diff --git a/apps/registry/registry/default/accordion/accordion.tsx b/apps/registry/registry/default/accordion/accordion.tsx
index 6d5818a6..b5255ece 100644
--- a/apps/registry/registry/default/accordion/accordion.tsx
+++ b/apps/registry/registry/default/accordion/accordion.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -22,7 +16,7 @@ type AccordionContextValue = {
 const AccordionContext = createContext<AccordionContextValue | null>(null);
 
 function useAccordionContext(): AccordionContextValue {
-  const context = useContext(AccordionContext);
+  const context = use(AccordionContext);
   if (!context) {
     throw new Error("AccordionItem must be used within an Accordion");
   }
diff --git a/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx b/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx
index 566cb81c..a0e7d20a 100644
--- a/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx
+++ b/apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx
@@ -204,40 +204,33 @@ function HeatmapGrid({
   );
 }
 
-export const ActivityHeatmap = React.forwardRef<
-  HTMLDivElement,
-  ActivityHeatmapProps
->(
-  (
-    {
-      className,
-      data,
-      description,
-      endDate = new Date(),
-      title = "Activity heatmap",
-      weeks = 12,
-      ...props
-    },
-    ref,
-  ) => {
-    const normalizedEndDate = normalizeDate(endDate);
-    const gridData = getGridData(data, normalizedEndDate, weeks);
-
-    return (
-      <div className={cn("space-y-4", className)} ref={ref} {...props}>
-        <div className="space-y-1">
-          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-          {description ? (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          ) : null}
-        </div>
+export const ActivityHeatmap = ({
+  className,
+  data,
+  description,
+  endDate = new Date(),
+  ref,
+  title = "Activity heatmap",
+  weeks = 12,
+  ...props
+}: ActivityHeatmapProps & React.RefAttributes<HTMLDivElement>) => {
+  const normalizedEndDate = normalizeDate(endDate);
+  const gridData = getGridData(data, normalizedEndDate, weeks);
 
-        <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
-          <HeatmapGrid gridData={gridData} weeks={weeks} />
-        </div>
+  return (
+    <div className={cn("space-y-4", className)} ref={ref} {...props}>
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
+        <HeatmapGrid gridData={gridData} weeks={weeks} />
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 ActivityHeatmap.displayName = "ActivityHeatmap";
diff --git a/apps/registry/registry/default/activity-log/activity-log.tsx b/apps/registry/registry/default/activity-log/activity-log.tsx
index e89f8b98..362bef06 100644
--- a/apps/registry/registry/default/activity-log/activity-log.tsx
+++ b/apps/registry/registry/default/activity-log/activity-log.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -294,63 +294,59 @@ function ActivityLogBody({
   );
 }
 
-const ActivityLog = forwardRef<HTMLDivElement, ActivityLogProps>(
-  (
-    {
-      className,
-      defaultPage = 1,
-      description,
-      emptyMessage = "No activity recorded yet.",
-      items,
-      onPageChange,
-      page,
-      pageSize = 5,
-      title = "Activity log",
-      ...props
-    },
-    ref,
-  ) => {
-    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
-    const currentPage = Math.min(
-      Math.max(page ?? uncontrolledPage, 1),
-      totalPages,
-    );
-    const pageNumbers = useMemo(
-      () => buildPageNumbers(currentPage, totalPages),
-      [currentPage, totalPages],
-    );
+const ActivityLog = ({
+  className,
+  defaultPage = 1,
+  description,
+  emptyMessage = "No activity recorded yet.",
+  items,
+  onPageChange,
+  page,
+  pageSize = 5,
+  ref,
+  title = "Activity log",
+  ...props
+}: ActivityLogProps & React.RefAttributes<HTMLDivElement>) => {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+  const currentPage = Math.min(
+    Math.max(page ?? uncontrolledPage, 1),
+    totalPages,
+  );
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages],
+  );
 
-    function handlePageChange(nextPage: number) {
-      if (page === undefined) {
-        setUncontrolledPage(nextPage);
-      }
-      onPageChange?.(nextPage);
+  function handlePageChange(nextPage: number) {
+    if (page === undefined) {
+      setUncontrolledPage(nextPage);
     }
+    onPageChange?.(nextPage);
+  }
 
-    return (
-      <Card className={cn("w-full", className)} ref={ref} {...props}>
-        <ActivityLogHeader
+  return (
+    <Card className={cn("w-full", className)} ref={ref} {...props}>
+      <ActivityLogHeader
+        currentPage={currentPage}
+        description={description}
+        title={title}
+        totalPages={totalPages}
+      />
+      <CardContent className="space-y-4">
+        <ActivityLogBody
           currentPage={currentPage}
-          description={description}
-          title={title}
+          emptyMessage={emptyMessage}
+          items={items}
+          onPageChange={handlePageChange}
+          pageNumbers={pageNumbers}
+          pageSize={pageSize}
           totalPages={totalPages}
         />
-        <CardContent className="space-y-4">
-          <ActivityLogBody
-            currentPage={currentPage}
-            emptyMessage={emptyMessage}
-            items={items}
-            onPageChange={handlePageChange}
-            pageNumbers={pageNumbers}
-            pageSize={pageSize}
-            totalPages={totalPages}
-          />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+      </CardContent>
+    </Card>
+  );
+};
 
 ActivityLog.displayName = "ActivityLog";
 
diff --git a/apps/registry/registry/default/agent-activity/agent-activity.tsx b/apps/registry/registry/default/agent-activity/agent-activity.tsx
index 0f682da4..ce36a479 100644
--- a/apps/registry/registry/default/agent-activity/agent-activity.tsx
+++ b/apps/registry/registry/default/agent-activity/agent-activity.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -155,47 +154,48 @@ const ACTIVITY_LIVE_REGION_ROLE: Record<AgentActivityStatus, "log" | "status"> =
  *
  * @public
  */
-export const AgentActivity = forwardRef<HTMLElement, AgentActivityProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      elapsed,
-      labels,
-      status = "idle",
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <section
-        aria-live={status === "running" ? "polite" : "off"}
-        className={cn(
-          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        role={ACTIVITY_LIVE_REGION_ROLE[status]}
-        {...rest}
-      >
-        <header className="flex items-center justify-between gap-3">
-          <h3 className="text-sm font-semibold tracking-tight text-foreground">
-            {resolvedLabels.activity}
-          </h3>
-          {elapsed ? (
-            <span
-              aria-label={resolvedLabels.elapsed}
-              className="text-xs font-mono text-muted-foreground"
-            >
-              {elapsed}
-            </span>
-          ) : null}
-        </header>
-        <ol className="flex flex-col gap-2">{children}</ol>
-      </section>
-    );
-  },
-);
+export const AgentActivity = (
+  props: AgentActivityProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    elapsed,
+    labels,
+    ref,
+    status = "idle",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <section
+      aria-live={status === "running" ? "polite" : "off"}
+      className={cn(
+        "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      role={ACTIVITY_LIVE_REGION_ROLE[status]}
+      {...rest}
+    >
+      <header className="flex items-center justify-between gap-3">
+        <h3 className="text-sm font-semibold tracking-tight text-foreground">
+          {resolvedLabels.activity}
+        </h3>
+        {elapsed ? (
+          <span
+            aria-label={resolvedLabels.elapsed}
+            className="text-xs font-mono text-muted-foreground"
+          >
+            {elapsed}
+          </span>
+        ) : null}
+      </header>
+      <ol className="flex flex-col gap-2">{children}</ol>
+    </section>
+  );
+};
 AgentActivity.displayName = "AgentActivity";
 
 /**
@@ -314,68 +314,66 @@ function StepRow({
   );
 }
 
-export const AgentStep = forwardRef<HTMLLIElement, AgentStepProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultOpen = true,
-      icon,
-      status,
-      ...rest
-    } = props;
-    const split = useMemo(() => splitChildren(children), [children]);
-    const palette = STATUS_CLASSES[status];
-    const hasDetails = split.body.length > 0;
-    const [open, setOpen] = useState(defaultOpen);
-    const detailsId = useId();
-
-    const handleToggle = useCallback(() => {
-      setOpen((value) => !value);
-    }, []);
-
-    const contextValue = useMemo<StepContextValue>(
-      () => ({ status }),
-      [status],
-    );
-    const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
-
-    return (
-      <li
-        className={cn(
-          "rounded-xl border ring-1",
-          palette.rowClass,
-          palette.ringClass,
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        {...rest}
-      >
-        <StepContext.Provider value={contextValue}>
-          <StepRow
-            detailsId={detailsId}
-            hasDetails={hasDetails}
-            header={split.header}
-            icon={resolvedIcon}
-            iconClass={palette.iconClass}
-            labels={DEFAULT_LABELS}
-            onToggle={handleToggle}
-            open={open}
-          />
-          {hasDetails && open ? (
-            <div
-              className="border-t border-border/60 px-3 py-2 text-xs"
-              id={detailsId}
-            >
-              <div className="flex flex-col gap-2 pl-8">{split.body}</div>
-            </div>
-          ) : null}
-        </StepContext.Provider>
-      </li>
-    );
-  },
-);
+export const AgentStep = (
+  props: AgentStepProps & React.RefAttributes<HTMLLIElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultOpen = true,
+    icon,
+    ref,
+    status,
+    ...rest
+  } = props;
+  const split = useMemo(() => splitChildren(children), [children]);
+  const palette = STATUS_CLASSES[status];
+  const hasDetails = split.body.length > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  const detailsId = useId();
+
+  const handleToggle = useCallback(() => {
+    setOpen((value) => !value);
+  }, []);
+
+  const contextValue = useMemo<StepContextValue>(() => ({ status }), [status]);
+  const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
+
+  return (
+    <li
+      className={cn(
+        "rounded-xl border ring-1",
+        palette.rowClass,
+        palette.ringClass,
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      {...rest}
+    >
+      <StepContext.Provider value={contextValue}>
+        <StepRow
+          detailsId={detailsId}
+          hasDetails={hasDetails}
+          header={split.header}
+          icon={resolvedIcon}
+          iconClass={palette.iconClass}
+          labels={DEFAULT_LABELS}
+          onToggle={handleToggle}
+          open={open}
+        />
+        {hasDetails && open ? (
+          <div
+            className="border-t border-border/60 px-3 py-2 text-xs"
+            id={detailsId}
+          >
+            <div className="flex flex-col gap-2 pl-8">{split.body}</div>
+          </div>
+        ) : null}
+      </StepContext.Provider>
+    </li>
+  );
+};
 AgentStep.displayName = "AgentStep";
 
 /**
@@ -390,10 +388,11 @@ export type AgentStepTitleProps = ComponentPropsWithoutRef<"p">;
  *
  * @public
  */
-export const AgentStepTitle = forwardRef<
-  HTMLParagraphElement,
-  AgentStepTitleProps
->(({ className, ...rest }, ref) => (
+export const AgentStepTitle = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepTitleProps & React.RefAttributes<HTMLParagraphElement>) => (
   <p
     className={cn(
       "text-sm font-medium leading-tight text-foreground",
@@ -402,7 +401,7 @@ export const AgentStepTitle = forwardRef<
     ref={ref}
     {...rest}
   />
-));
+);
 AgentStepTitle.displayName = "AgentStepTitle";
 
 /**
@@ -417,16 +416,17 @@ export type AgentStepDurationProps = ComponentPropsWithoutRef<"span">;
  *
  * @public
  */
-export const AgentStepDuration = forwardRef<
-  HTMLSpanElement,
-  AgentStepDurationProps
->(({ className, ...rest }, ref) => (
+export const AgentStepDuration = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepDurationProps & React.RefAttributes<HTMLSpanElement>) => (
   <span
     className={cn("font-mono text-xs text-muted-foreground", className)}
     ref={ref}
     {...rest}
   />
-));
+);
 AgentStepDuration.displayName = "AgentStepDuration";
 
 /**
@@ -446,10 +446,13 @@ export type AgentStepProgressProps = {
  *
  * @public
  */
-export const AgentStepProgress = forwardRef<
-  HTMLDivElement,
-  AgentStepProgressProps
->(({ className, label = "Step progress", value, ...rest }, ref) => {
+export const AgentStepProgress = ({
+  className,
+  label = "Step progress",
+  ref,
+  value,
+  ...rest
+}: AgentStepProgressProps & React.RefAttributes<HTMLDivElement>) => {
   const clamped = Math.max(0, Math.min(100, value));
   return (
     <div
@@ -468,7 +471,7 @@ export const AgentStepProgress = forwardRef<
       />
     </div>
   );
-});
+};
 AgentStepProgress.displayName = "AgentStepProgress";
 
 /**
@@ -484,14 +487,16 @@ export type AgentStepDetailProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const AgentStepDetail = forwardRef<HTMLDivElement, AgentStepDetailProps>(
-  ({ className, ...rest }, ref) => (
-    <div
-      className={cn("text-xs text-muted-foreground", className)}
-      ref={ref}
-      {...rest}
-    />
-  ),
+export const AgentStepDetail = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepDetailProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("text-xs text-muted-foreground", className)}
+    ref={ref}
+    {...rest}
+  />
 );
 AgentStepDetail.displayName = "AgentStepDetail";
 
@@ -501,5 +506,5 @@ AgentStepDetail.displayName = "AgentStepDetail";
  * @public
  */
 export function useAgentStepStatus(): AgentStepStatus {
-  return useContext(StepContext).status;
+  return use(StepContext).status;
 }
diff --git a/apps/registry/registry/default/ai-artifact/ai-artifact.tsx b/apps/registry/registry/default/ai-artifact/ai-artifact.tsx
index 784648c0..51afa18a 100644
--- a/apps/registry/registry/default/ai-artifact/ai-artifact.tsx
+++ b/apps/registry/registry/default/ai-artifact/ai-artifact.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useMemo,
   useState,
 } from "react";
@@ -114,7 +113,7 @@ const AIArtifactContext =
  * @public
  */
 export function useAIArtifact(): AIArtifactContextValue {
-  return useContext(AIArtifactContext);
+  return use(AIArtifactContext);
 }
 
 function pickExtension(type: AIArtifactType, language: string): string {
@@ -375,62 +374,63 @@ function useArtifactController(
   );
 }
 
-export const AIArtifact = forwardRef<HTMLElement, AIArtifactProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultFullscreen = false,
-      filename,
-      labels,
-      language = "",
-      onEdit,
-      subtitle,
-      title,
-      type = "code",
-      value = "",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const contextValue = useArtifactController({
-      defaultFullscreen,
-      filename,
-      labels: resolvedLabels,
-      language,
-      onEdit,
-      title,
-      type,
-      value,
-    });
-
-    return (
-      <AIArtifactContext.Provider value={contextValue}>
-        <section
-          aria-label={typeof title === "string" ? title : undefined}
-          className={cn(
-            "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-            className,
-          )}
-          data-fullscreen={contextValue.fullscreen ? "true" : "false"}
-          data-type={type}
-          ref={ref}
-          {...rest}
-        >
-          <ArtifactHeader
-            language={language}
-            subtitle={subtitle}
-            title={title}
-            type={type}
-          />
-          {children}
-        </section>
-      </AIArtifactContext.Provider>
-    );
-  },
-);
+export const AIArtifact = (
+  props: AIArtifactProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultFullscreen = false,
+    filename,
+    labels,
+    language = "",
+    onEdit,
+    ref,
+    subtitle,
+    title,
+    type = "code",
+    value = "",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const contextValue = useArtifactController({
+    defaultFullscreen,
+    filename,
+    labels: resolvedLabels,
+    language,
+    onEdit,
+    title,
+    type,
+    value,
+  });
+
+  return (
+    <AIArtifactContext.Provider value={contextValue}>
+      <section
+        aria-label={typeof title === "string" ? title : undefined}
+        className={cn(
+          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+          className,
+        )}
+        data-fullscreen={contextValue.fullscreen ? "true" : "false"}
+        data-type={type}
+        ref={ref}
+        {...rest}
+      >
+        <ArtifactHeader
+          language={language}
+          subtitle={subtitle}
+          title={title}
+          type={type}
+        />
+        {children}
+      </section>
+    </AIArtifactContext.Provider>
+  );
+};
 AIArtifact.displayName = "AIArtifact";
 
 /**
@@ -438,10 +438,11 @@ AIArtifact.displayName = "AIArtifact";
  *
  * @public
  */
-export const AIArtifactToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => (
+export const AIArtifactToolbar = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-1.5 border-b border-border pb-2",
@@ -451,7 +452,7 @@ export const AIArtifactToolbar = forwardRef<
     role="toolbar"
     {...rest}
   />
-));
+);
 AIArtifactToolbar.displayName = "AIArtifactToolbar";
 
 type ToolbarButtonProps = Omit<
@@ -465,10 +466,12 @@ type ToolbarButtonProps = Omit<
  *
  * @public
  */
-export const AIArtifactCopyButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactCopyButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { copied, copy, labels } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -496,7 +499,7 @@ export const AIArtifactCopyButton = forwardRef<
       )}
     </Button>
   );
-});
+};
 AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
 
 /**
@@ -505,10 +508,12 @@ AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
  *
  * @public
  */
-export const AIArtifactEditButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactEditButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { hasOnEdit, labels, onEdit } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -533,7 +538,7 @@ export const AIArtifactEditButton = forwardRef<
       <Pencil aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AIArtifactEditButton.displayName = "AIArtifactEditButton";
 
 /**
@@ -542,10 +547,12 @@ AIArtifactEditButton.displayName = "AIArtifactEditButton";
  *
  * @public
  */
-export const AIArtifactDownloadButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactDownloadButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { download, labels } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -569,7 +576,7 @@ export const AIArtifactDownloadButton = forwardRef<
       <Download aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
 
 /**
@@ -579,10 +586,12 @@ AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
  *
  * @public
  */
-export const AIArtifactFullscreenButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactFullscreenButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -611,7 +620,7 @@ export const AIArtifactFullscreenButton = forwardRef<
       )}
     </Button>
   );
-});
+};
 AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
 
 /**
@@ -620,10 +629,11 @@ AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
  *
  * @public
  */
-export const AIArtifactContent = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => (
+export const AIArtifactContent = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "min-h-[6rem] overflow-auto rounded-lg border border-border bg-muted/20 p-3 text-sm text-foreground",
@@ -632,7 +642,7 @@ export const AIArtifactContent = forwardRef<
     ref={ref}
     {...rest}
   />
-));
+);
 AIArtifactContent.displayName = "AIArtifactContent";
 
 /**
@@ -640,10 +650,12 @@ AIArtifactContent.displayName = "AIArtifactContent";
  *
  * @public
  */
-export const AIArtifactVersions = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"nav">
->(({ children, className, ...rest }, ref) => {
+export const AIArtifactVersions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"nav"> & React.RefAttributes<HTMLElement>) => {
   const { labels } = useAIArtifact();
   return (
     <nav
@@ -658,7 +670,7 @@ export const AIArtifactVersions = forwardRef<
       {children}
     </nav>
   );
-});
+};
 AIArtifactVersions.displayName = "AIArtifactVersions";
 
 /**
@@ -679,10 +691,13 @@ export type AIArtifactVersionProps = {
  *
  * @public
  */
-export const AIArtifactVersion = forwardRef<
-  HTMLButtonElement,
-  AIArtifactVersionProps
->(({ active = false, className, label, ...rest }, ref) => (
+export const AIArtifactVersion = ({
+  active = false,
+  className,
+  label,
+  ref,
+  ...rest
+}: AIArtifactVersionProps & React.RefAttributes<HTMLButtonElement>) => (
   <button
     aria-current={active ? "true" : undefined}
     className={cn(
@@ -698,5 +713,5 @@ export const AIArtifactVersion = forwardRef<
   >
     {label}
   </button>
-));
+);
 AIArtifactVersion.displayName = "AIArtifactVersion";
diff --git a/apps/registry/registry/default/ai-chat-input/ai-chat-input.tsx b/apps/registry/registry/default/ai-chat-input/ai-chat-input.tsx
index c480f7b7..73929096 100644
--- a/apps/registry/registry/default/ai-chat-input/ai-chat-input.tsx
+++ b/apps/registry/registry/default/ai-chat-input/ai-chat-input.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 
@@ -79,68 +77,61 @@ export type AIChatInputProps = React.ComponentPropsWithoutRef<"form"> & {
   value?: string;
 };
 
-const AIChatInput = forwardRef<HTMLFormElement, AIChatInputProps>(
-  (
-    {
-      className,
-      disabled = false,
-      helperText,
-      isSubmitting = false,
-      onSubmit,
-      onValueChange,
-      status,
-      submitLabel = "Send",
-      textareaProps,
-      toolbar,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const currentValue = value ?? "";
-    const maxLength = textareaProps?.maxLength;
-    const isSubmitDisabled =
-      disabled || isSubmitting || currentValue.trim().length === 0;
+const AIChatInput = ({
+  className,
+  disabled = false,
+  helperText,
+  isSubmitting = false,
+  onSubmit,
+  onValueChange,
+  ref,
+  status,
+  submitLabel = "Send",
+  textareaProps,
+  toolbar,
+  value,
+  ...props
+}: AIChatInputProps & React.RefAttributes<HTMLFormElement>) => {
+  const currentValue = value ?? "";
+  const maxLength = textareaProps?.maxLength;
+  const isSubmitDisabled =
+    disabled || isSubmitting || currentValue.trim().length === 0;
 
-    return (
-      <form
-        className={cn(formShellVariants(), "w-full p-3", className)}
-        onSubmit={onSubmit}
-        ref={ref}
-        {...props}
-      >
-        <div className="space-y-3">
-          <Textarea
-            className="min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-            disabled={disabled}
-            onChange={(event) => {
-              textareaProps?.onChange?.(event);
-              onValueChange?.(event.target.value);
-            }}
-            placeholder="Ask a follow-up question, paste context, or describe what you need..."
-            value={value}
-            {...textareaProps}
-          />
+  return (
+    <form
+      className={cn(formShellVariants(), "w-full p-3", className)}
+      onSubmit={onSubmit}
+      ref={ref}
+      {...props}
+    >
+      <div className="space-y-3">
+        <Textarea
+          className="min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          disabled={disabled}
+          onChange={(event) => {
+            textareaProps?.onChange?.(event);
+            onValueChange?.(event.target.value);
+          }}
+          placeholder="Ask a follow-up question, paste context, or describe what you need..."
+          value={value}
+          {...textareaProps}
+        />
 
-          {toolbar ? (
-            <div className="flex flex-wrap gap-2">{toolbar}</div>
-          ) : null}
+        {toolbar ? <div className="flex flex-wrap gap-2">{toolbar}</div> : null}
 
-          <AIChatInputFooter
-            currentLength={currentValue.length}
-            helperText={helperText}
-            isSubmitDisabled={isSubmitDisabled}
-            isSubmitting={isSubmitting}
-            maxLength={maxLength}
-            status={status}
-            submitLabel={submitLabel}
-          />
-        </div>
-      </form>
-    );
-  },
-);
+        <AIChatInputFooter
+          currentLength={currentValue.length}
+          helperText={helperText}
+          isSubmitDisabled={isSubmitDisabled}
+          isSubmitting={isSubmitting}
+          maxLength={maxLength}
+          status={status}
+          submitLabel={submitLabel}
+        />
+      </div>
+    </form>
+  );
+};
 
 AIChatInput.displayName = "AIChatInput";
-
 export { AIChatInput };
diff --git a/apps/registry/registry/default/ai-message-bubble/ai-message-bubble.tsx b/apps/registry/registry/default/ai-message-bubble/ai-message-bubble.tsx
index 68c9aff3..77696a38 100644
--- a/apps/registry/registry/default/ai-message-bubble/ai-message-bubble.tsx
+++ b/apps/registry/registry/default/ai-message-bubble/ai-message-bubble.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@vllnt/ui";
@@ -69,73 +67,66 @@ export type AIMessageBubbleProps = React.ComponentPropsWithoutRef<"div"> &
     timestamp?: string;
   };
 
-const AIMessageBubble = forwardRef<HTMLDivElement, AIMessageBubbleProps>(
-  (
-    {
-      author,
-      children,
-      className,
-      messageRole = "assistant",
-      status,
-      timestamp,
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedMessageRole = messageRole ?? "assistant";
-    const isUser = resolvedMessageRole === "user";
-    const fallbackLabel = (author ?? resolvedMessageRole)
-      .charAt(0)
-      .toUpperCase();
+const AIMessageBubble = ({
+  author,
+  children,
+  className,
+  messageRole = "assistant",
+  ref,
+  status,
+  timestamp,
+  ...props
+}: AIMessageBubbleProps & React.RefAttributes<HTMLDivElement>) => {
+  const resolvedMessageRole = messageRole ?? "assistant";
+  const isUser = resolvedMessageRole === "user";
+  const fallbackLabel = (author ?? resolvedMessageRole).charAt(0).toUpperCase();
 
-    return (
+  return (
+    <div
+      className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
+    >
       <div
-        className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
+        className={cn(
+          "flex w-full max-w-3xl gap-3",
+          isUser ? "flex-row-reverse text-right" : "flex-row",
+        )}
       >
+        <Avatar className="mt-0.5 size-8 border border-border/70">
+          <AvatarFallback className="bg-muted text-[11px] font-medium uppercase text-muted-foreground">
+            {fallbackLabel}
+          </AvatarFallback>
+        </Avatar>
+
         <div
           className={cn(
-            "flex w-full max-w-3xl gap-3",
-            isUser ? "flex-row-reverse text-right" : "flex-row",
+            "min-w-0 space-y-2",
+            isUser ? "items-end" : "items-start",
           )}
         >
-          <Avatar className="mt-0.5 size-8 border border-border/70">
-            <AvatarFallback className="bg-muted text-[11px] font-medium uppercase text-muted-foreground">
-              {fallbackLabel}
-            </AvatarFallback>
-          </Avatar>
+          <AIMessageMeta
+            author={author}
+            isUser={isUser}
+            status={status}
+            timestamp={timestamp}
+          />
 
           <div
             className={cn(
-              "min-w-0 space-y-2",
-              isUser ? "items-end" : "items-start",
+              bubbleVariants({ messageRole: resolvedMessageRole }),
+              className,
             )}
+            ref={ref}
+            {...props}
           >
-            <AIMessageMeta
-              author={author}
-              isUser={isUser}
-              status={status}
-              timestamp={timestamp}
-            />
-
-            <div
-              className={cn(
-                bubbleVariants({ messageRole: resolvedMessageRole }),
-                className,
-              )}
-              ref={ref}
-              {...props}
-            >
-              <div className="text-sm leading-6 whitespace-pre-wrap">
-                {children}
-              </div>
+            <div className="text-sm leading-6 whitespace-pre-wrap">
+              {children}
             </div>
           </div>
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 AIMessageBubble.displayName = "AIMessageBubble";
-
 export { AIMessageBubble };
diff --git a/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx b/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
index 5a6218c8..ce26814d 100644
--- a/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
+++ b/apps/registry/registry/default/ai-sidebar/ai-sidebar.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useState,
@@ -83,7 +82,7 @@ const AISidebarContext = createContext<AISidebarContextValue>(DEFAULT_CONTEXT);
  * @public
  */
 export function useAISidebar(): AISidebarContextValue {
-  return useContext(AISidebarContext);
+  return use(AISidebarContext);
 }
 
 /**
@@ -235,37 +234,37 @@ function useEscapeToClose(
  *
  * @public
  */
-export const AISidebar = forwardRef<HTMLElement, AISidebarProps>(
-  (props, ref) => {
-    const { children, className, closeOnEscape = true, ...rest } = props;
-    const { close, labels, openState, position, width } = useAISidebar();
-    useEscapeToClose(closeOnEscape, openState, close);
+export const AISidebar = (
+  props: AISidebarProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { children, className, closeOnEscape = true, ref, ...rest } = props;
+  const { close, labels, openState, position, width } = useAISidebar();
+  useEscapeToClose(closeOnEscape, openState, close);
 
-    return (
-      <aside
-        aria-hidden={!openState}
-        aria-label={labels.defaultTitle}
-        className={cn(
-          "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
-          position === "right" ? "right-0 border-l" : "left-0 border-r",
-          openState
-            ? "translate-x-0"
-            : position === "right"
-              ? "translate-x-full"
-              : "-translate-x-full",
-          "max-w-full",
-          className,
-        )}
-        data-state={openState ? "open" : "closed"}
-        ref={ref}
-        style={{ width: `${width.toString()}px` }}
-        {...rest}
-      >
-        {children}
-      </aside>
-    );
-  },
-);
+  return (
+    <aside
+      aria-hidden={!openState}
+      aria-label={labels.defaultTitle}
+      className={cn(
+        "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
+        position === "right" ? "right-0 border-l" : "left-0 border-r",
+        openState
+          ? "translate-x-0"
+          : position === "right"
+            ? "translate-x-full"
+            : "-translate-x-full",
+        "max-w-full",
+        className,
+      )}
+      data-state={openState ? "open" : "closed"}
+      ref={ref}
+      style={{ width: `${width.toString()}px` }}
+      {...rest}
+    >
+      {children}
+    </aside>
+  );
+};
 AISidebar.displayName = "AISidebar";
 
 /**
@@ -274,10 +273,12 @@ AISidebar.displayName = "AISidebar";
  *
  * @public
  */
-export const AISidebarHeader = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"header">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarHeader = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"header"> & React.RefAttributes<HTMLElement>) => (
   <header
     className={cn(
       "flex items-center gap-2 border-b border-border px-4 py-3",
@@ -288,7 +289,7 @@ export const AISidebarHeader = forwardRef<
   >
     {children}
   </header>
-));
+);
 AISidebarHeader.displayName = "AISidebarHeader";
 
 /**
@@ -297,10 +298,13 @@ AISidebarHeader.displayName = "AISidebarHeader";
  *
  * @public
  */
-export const AISidebarTitle = forwardRef<
-  HTMLHeadingElement,
-  ComponentPropsWithoutRef<"h2">
->(({ children, className, ...rest }, ref) => {
+export const AISidebarTitle = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"h2"> &
+  React.RefAttributes<HTMLHeadingElement>) => {
   const { labels } = useAISidebar();
   return (
     <h2
@@ -315,7 +319,7 @@ export const AISidebarTitle = forwardRef<
       {children ?? labels.defaultTitle}
     </h2>
   );
-});
+};
 AISidebarTitle.displayName = "AISidebarTitle";
 
 /**
@@ -323,10 +327,13 @@ AISidebarTitle.displayName = "AISidebarTitle";
  *
  * @public
  */
-export const AISidebarClose = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, onClick, ...rest }, ref) => {
+export const AISidebarClose = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { close, labels } = useAISidebar();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -350,7 +357,7 @@ export const AISidebarClose = forwardRef<
       <X aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AISidebarClose.displayName = "AISidebarClose";
 
 /**
@@ -358,10 +365,12 @@ AISidebarClose.displayName = "AISidebarClose";
  *
  * @public
  */
-export const AISidebarContent = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarContent = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex flex-1 flex-col gap-2 overflow-y-auto p-4", className)}
     ref={ref}
@@ -369,7 +378,7 @@ export const AISidebarContent = forwardRef<
   >
     {children}
   </div>
-));
+);
 AISidebarContent.displayName = "AISidebarContent";
 
 /**
@@ -377,10 +386,12 @@ AISidebarContent.displayName = "AISidebarContent";
  *
  * @public
  */
-export const AISidebarFooter = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"footer">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarFooter = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"footer"> & React.RefAttributes<HTMLElement>) => (
   <footer
     className={cn("border-t border-border bg-background px-4 py-3", className)}
     ref={ref}
@@ -388,7 +399,7 @@ export const AISidebarFooter = forwardRef<
   >
     {children}
   </footer>
-));
+);
 AISidebarFooter.displayName = "AISidebarFooter";
 
 /**
@@ -408,10 +419,13 @@ export type AISidebarTriggerProps = Omit<
  *
  * @public
  */
-export const AISidebarTrigger = forwardRef<
-  HTMLButtonElement,
-  AISidebarTriggerProps
->(({ children, className, onClick, ...rest }, ref) => {
+export const AISidebarTrigger = ({
+  children,
+  className,
+  onClick,
+  ref,
+  ...rest
+}: AISidebarTriggerProps & React.RefAttributes<HTMLButtonElement>) => {
   const { labels, openState, toggle } = useAISidebar();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -437,5 +451,5 @@ export const AISidebarTrigger = forwardRef<
       {children ?? <MessageSquarePlus aria-hidden="true" className="size-4" />}
     </Button>
   );
-});
+};
 AISidebarTrigger.displayName = "AISidebarTrigger";
diff --git a/apps/registry/registry/default/ai-source-citation/ai-source-citation.tsx b/apps/registry/registry/default/ai-source-citation/ai-source-citation.tsx
index d27b43b1..b0773b9b 100644
--- a/apps/registry/registry/default/ai-source-citation/ai-source-citation.tsx
+++ b/apps/registry/registry/default/ai-source-citation/ai-source-citation.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { ExternalLink, Quote } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
@@ -13,48 +11,51 @@ export type AISourceCitationProps = React.ComponentPropsWithoutRef<"a"> & {
   title: string;
 };
 
-const AISourceCitation = forwardRef<HTMLAnchorElement, AISourceCitationProps>(
-  (
-    { className, href, snippet, source, target = "_blank", title, ...props },
-    ref,
-  ) => {
-    return (
-      <a
-        className={cn(
-          "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className,
-        )}
-        href={href}
-        ref={ref}
-        rel={target === "_blank" ? "noreferrer" : undefined}
-        target={target}
-        {...props}
-      >
-        <div className="flex items-start gap-2">
-          <Quote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-          <div className="min-w-0 flex-1">
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <p className="truncate text-sm font-medium text-foreground">
-                  {title}
-                </p>
-                <p className="text-xs text-muted-foreground">{source}</p>
-              </div>
-              <ExternalLink className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+const AISourceCitation = ({
+  className,
+  href,
+  ref,
+  snippet,
+  source,
+  target = "_blank",
+  title,
+  ...props
+}: AISourceCitationProps & React.RefAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      className={cn(
+        "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      href={href}
+      ref={ref}
+      rel={target === "_blank" ? "noreferrer" : undefined}
+      target={target}
+      {...props}
+    >
+      <div className="flex items-start gap-2">
+        <Quote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium text-foreground">
+                {title}
+              </p>
+              <p className="text-xs text-muted-foreground">{source}</p>
             </div>
+            <ExternalLink className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
           </div>
         </div>
+      </div>
 
-        {snippet ? (
-          <p className="line-clamp-3 text-sm leading-6 text-muted-foreground">
-            {snippet}
-          </p>
-        ) : null}
-      </a>
-    );
-  },
-);
+      {snippet ? (
+        <p className="line-clamp-3 text-sm leading-6 text-muted-foreground">
+          {snippet}
+        </p>
+      ) : null}
+    </a>
+  );
+};
 
 AISourceCitation.displayName = "AISourceCitation";
-
 export { AISourceCitation };
diff --git a/apps/registry/registry/default/ai-streaming-text/ai-streaming-text.tsx b/apps/registry/registry/default/ai-streaming-text/ai-streaming-text.tsx
index 94b24293..59b82048 100644
--- a/apps/registry/registry/default/ai-streaming-text/ai-streaming-text.tsx
+++ b/apps/registry/registry/default/ai-streaming-text/ai-streaming-text.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
 
 export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
@@ -13,42 +11,37 @@ export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
   text: string;
 };
 
-const AIStreamingText = forwardRef<HTMLDivElement, AIStreamingTextProps>(
-  (
-    {
-      className,
-      cursor = "▍",
-      isStreaming = false,
-      showCursor = true,
-      text,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        aria-live={isStreaming ? "polite" : undefined}
-        className={cn(
-          "text-sm leading-6 text-foreground whitespace-pre-wrap",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        {text}
-        {isStreaming && showCursor ? (
-          <span
-            aria-hidden="true"
-            className="ml-0.5 inline-block animate-pulse text-muted-foreground"
-          >
-            {cursor}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+const AIStreamingText = ({
+  className,
+  cursor = "▍",
+  isStreaming = false,
+  ref,
+  showCursor = true,
+  text,
+  ...props
+}: AIStreamingTextProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      aria-live={isStreaming ? "polite" : undefined}
+      className={cn(
+        "text-sm leading-6 text-foreground whitespace-pre-wrap",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {text}
+      {isStreaming && showCursor ? (
+        <span
+          aria-hidden="true"
+          className="ml-0.5 inline-block animate-pulse text-muted-foreground"
+        >
+          {cursor}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 AIStreamingText.displayName = "AIStreamingText";
-
 export { AIStreamingText };
diff --git a/apps/registry/registry/default/ai-tool-call-display/ai-tool-call-display.tsx b/apps/registry/registry/default/ai-tool-call-display/ai-tool-call-display.tsx
index 10a90816..d67481d5 100644
--- a/apps/registry/registry/default/ai-tool-call-display/ai-tool-call-display.tsx
+++ b/apps/registry/registry/default/ai-tool-call-display/ai-tool-call-display.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva } from "class-variance-authority";
 import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
 
@@ -47,82 +45,77 @@ const statusIconMap: Record<AIToolCallStatus, React.ReactNode> = {
   running: <Wrench className="size-4 animate-pulse" />,
 };
 
-const AIToolCallDisplay = forwardRef<HTMLDivElement, AIToolCallDisplayProps>(
-  (
-    {
-      className,
-      description,
-      duration,
-      input,
-      output,
-      status = "queued",
-      toolName,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="min-w-0 space-y-1">
-            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-              {statusIconMap[status]}
-              <span>{toolName}</span>
-            </div>
-            {description ? (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            ) : null}
+const AIToolCallDisplay = ({
+  className,
+  description,
+  duration,
+  input,
+  output,
+  ref,
+  status = "queued",
+  toolName,
+  ...props
+}: AIToolCallDisplayProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            {statusIconMap[status]}
+            <span>{toolName}</span>
           </div>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
 
-          <div className="flex items-center gap-2">
-            {duration ? (
-              <span className="text-xs text-muted-foreground">{duration}</span>
-            ) : null}
-            <Badge className={statusVariants({ status })} variant="secondary">
-              {status}
-            </Badge>
-          </div>
+        <div className="flex items-center gap-2">
+          {duration ? (
+            <span className="text-xs text-muted-foreground">{duration}</span>
+          ) : null}
+          <Badge className={statusVariants({ status })} variant="secondary">
+            {status}
+          </Badge>
         </div>
+      </div>
 
-        {input ? (
-          <details
-            className="mt-4 rounded-xl border border-border/60 bg-muted/20 p-3"
-            open={status !== "complete"}
-          >
-            <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Tool input
-            </summary>
-            <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
-              {input}
-            </pre>
-          </details>
-        ) : null}
+      {input ? (
+        <details
+          className="mt-4 rounded-xl border border-border/60 bg-muted/20 p-3"
+          open={status !== "complete"}
+        >
+          <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Tool input
+          </summary>
+          <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
+            {input}
+          </pre>
+        </details>
+      ) : null}
 
-        {output ? (
-          <details
-            className="mt-3 rounded-xl border border-border/60 bg-muted/20 p-3"
-            open={status !== "complete"}
-          >
-            <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Tool output
-            </summary>
-            <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
-              {output}
-            </pre>
-          </details>
-        ) : null}
-      </div>
-    );
-  },
-);
+      {output ? (
+        <details
+          className="mt-3 rounded-xl border border-border/60 bg-muted/20 p-3"
+          open={status !== "complete"}
+        >
+          <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Tool output
+          </summary>
+          <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
+            {output}
+          </pre>
+        </details>
+      ) : null}
+    </div>
+  );
+};
 
 AIToolCallDisplay.displayName = "AIToolCallDisplay";
-
 export { AIToolCallDisplay };
diff --git a/apps/registry/registry/default/alert-dialog/alert-dialog.tsx b/apps/registry/registry/default/alert-dialog/alert-dialog.tsx
index 09438b5d..4a03afbb 100644
--- a/apps/registry/registry/default/alert-dialog/alert-dialog.tsx
+++ b/apps/registry/registry/default/alert-dialog/alert-dialog.tsx
@@ -1,22 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 import { cn } from "@vllnt/ui";
 import { buttonVariants } from "@vllnt/ui";
-
 const AlertDialog = AlertDialogPrimitive.Root;
-
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const AlertDialogOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Overlay>
+  >) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -25,13 +23,18 @@ const AlertDialogOverlay = forwardRef<
     {...props}
     ref={ref}
   />
-));
+);
+
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+const AlertDialogContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Content>
+  >) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
@@ -43,7 +46,8 @@ const AlertDialogContent = forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-));
+);
+
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -58,6 +62,7 @@ const AlertDialogHeader = ({
     {...props}
   />
 );
+
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
@@ -72,49 +77,69 @@ const AlertDialogFooter = ({
     {...props}
   />
 );
+
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
-const AlertDialogTitle = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+const AlertDialogTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Title>
+  >) => (
   <AlertDialogPrimitive.Title
     className={cn("text-lg font-semibold", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+const AlertDialogDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Description>
+  >) => (
   <AlertDialogPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+const AlertDialogAction = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Action>
+  >) => (
   <AlertDialogPrimitive.Action
     className={cn(buttonVariants(), className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
+const AlertDialogCancel = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Cancel>
+  >) => (
   <AlertDialogPrimitive.Cancel
     className={cn(
       buttonVariants({ variant: "outline" }),
@@ -124,7 +149,8 @@ const AlertDialogCancel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
diff --git a/apps/registry/registry/default/alert-pulse/alert-pulse.tsx b/apps/registry/registry/default/alert-pulse/alert-pulse.tsx
index 2cd5d738..0d1479dd 100644
--- a/apps/registry/registry/default/alert-pulse/alert-pulse.tsx
+++ b/apps/registry/registry/default/alert-pulse/alert-pulse.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -82,65 +82,66 @@ const safeRadius = (value: number): number => (value < 6 ? 6 : value);
  *
  * @public
  */
-export const AlertPulse = forwardRef<SVGSVGElement, AlertPulseProps>(
-  (props, ref) => {
-    const {
-      className,
-      cx,
-      cy,
-      labels,
-      radius = 36,
-      reducedMotion = false,
-      severity = "warn",
-      ...rest
-    } = props;
-    const r = safeRadius(radius);
-    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
-    const size = r * 2 + 24;
-    return (
-      <svg
-        aria-label={ariaLabel}
+export const AlertPulse = (
+  props: AlertPulseProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    className,
+    cx,
+    cy,
+    labels,
+    radius = 36,
+    reducedMotion = false,
+    ref,
+    severity = "warn",
+    ...rest
+  } = props;
+  const r = safeRadius(radius);
+  const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+  const size = r * 2 + 24;
+  return (
+    <svg
+      aria-label={ariaLabel}
+      className={cn(
+        "pointer-events-none absolute z-20 overflow-visible",
+        className,
+      )}
+      data-alert-pulse
+      data-alert-severity={severity}
+      height={size}
+      ref={ref}
+      role="img"
+      style={{
+        left: cx - size / 2,
+        top: cy - size / 2,
+      }}
+      width={size}
+      {...rest}
+    >
+      <circle
+        className={cn("origin-center", SEVERITY_STROKE[severity])}
+        cx={size / 2}
+        cy={size / 2}
+        fill="none"
+        r={r}
+        strokeOpacity={0.7}
+        strokeWidth={2}
+      />
+      <circle
         className={cn(
-          "pointer-events-none absolute z-20 overflow-visible",
-          className,
+          "origin-center",
+          SEVERITY_STROKE[severity],
+          SEVERITY_FILL[severity],
+          reducedMotion ? null : "animate-ping",
         )}
-        data-alert-pulse
-        data-alert-severity={severity}
-        height={size}
-        ref={ref}
-        role="img"
-        style={{
-          left: cx - size / 2,
-          top: cy - size / 2,
-        }}
-        width={size}
-        {...rest}
-      >
-        <circle
-          className={cn("origin-center", SEVERITY_STROKE[severity])}
-          cx={size / 2}
-          cy={size / 2}
-          fill="none"
-          r={r}
-          strokeOpacity={0.7}
-          strokeWidth={2}
-        />
-        <circle
-          className={cn(
-            "origin-center",
-            SEVERITY_STROKE[severity],
-            SEVERITY_FILL[severity],
-            reducedMotion ? null : "animate-ping",
-          )}
-          cx={size / 2}
-          cy={size / 2}
-          data-alert-pulse-ring
-          r={r}
-          strokeOpacity={0.4}
-          strokeWidth={2}
-        />
-      </svg>
-    );
-  },
-);
+        cx={size / 2}
+        cy={size / 2}
+        data-alert-pulse-ring
+        r={r}
+        strokeOpacity={0.4}
+        strokeWidth={2}
+      />
+    </svg>
+  );
+};
 AlertPulse.displayName = "AlertPulse";
diff --git a/apps/registry/registry/default/alert/alert.tsx b/apps/registry/registry/default/alert/alert.tsx
index 65ff6666..105b85fd 100644
--- a/apps/registry/registry/default/alert/alert.tsx
+++ b/apps/registry/registry/default/alert/alert.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@vllnt/ui";
@@ -20,23 +18,31 @@ const alertVariants = cva(
   },
 );
 
-const Alert = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+const Alert = ({
+  className,
+  ref,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(alertVariants({ variant }), className)}
     ref={ref}
     role="alert"
     {...props}
   />
-));
+);
+
 Alert.displayName = "Alert";
 
-const AlertTitle = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ children, className, ...props }, ref) => (
+const AlertTitle = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement> &
+  React.RefAttributes<HTMLParagraphElement>) => (
   <h5
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     ref={ref}
@@ -44,19 +50,22 @@ const AlertTitle = forwardRef<
   >
     {children}
   </h5>
-));
+);
+
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const AlertDescription = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> &
+  React.RefAttributes<HTMLParagraphElement>) => (
   <div
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     ref={ref}
     {...props}
   />
-));
-AlertDescription.displayName = "AlertDescription";
+);
 
+AlertDescription.displayName = "AlertDescription";
 export { Alert, AlertDescription, AlertTitle, alertVariants };
diff --git a/apps/registry/registry/default/anchor-port/anchor-port.tsx b/apps/registry/registry/default/anchor-port/anchor-port.tsx
index ad51bcc0..05589cae 100644
--- a/apps/registry/registry/default/anchor-port/anchor-port.tsx
+++ b/apps/registry/registry/default/anchor-port/anchor-port.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
 
 export type AnchorPortProps = React.ComponentPropsWithoutRef<"span"> & {
@@ -29,38 +27,33 @@ const sideClasses: Record<NonNullable<AnchorPortProps["side"]>, string> = {
   top: "self-start",
 };
 
-const AnchorPort = forwardRef<HTMLSpanElement, AnchorPortProps>(
-  (
-    {
+const AnchorPort = ({
+  className,
+  ref,
+  side = "right",
+  state = "idle",
+  tone = "bidirectional",
+  ...props
+}: AnchorPortProps & React.RefAttributes<HTMLSpanElement>) => (
+  <span
+    aria-label={props["aria-label"] ?? `${tone} ${side} port ${state}`}
+    className={cn(
+      "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+      toneClasses[tone],
+      stateClasses[state],
+      sideClasses[side],
       className,
-      side = "right",
-      state = "idle",
-      tone = "bidirectional",
-      ...props
-    },
-    ref,
-  ) => (
-    <span
-      aria-label={props["aria-label"] ?? `${tone} ${side} port ${state}`}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
-        toneClasses[tone],
-        stateClasses[state],
-        sideClasses[side],
-        className,
-      )}
-      data-side={side}
-      data-state={state}
-      data-tone={tone}
-      ref={ref}
-      role="img"
-      {...props}
-    >
-      <span className="size-2.5 rounded-full bg-current" />
-    </span>
-  ),
+    )}
+    data-side={side}
+    data-state={state}
+    data-tone={tone}
+    ref={ref}
+    role="img"
+    {...props}
+  >
+    <span className="size-2.5 rounded-full bg-current" />
+  </span>
 );
 
 AnchorPort.displayName = "AnchorPort";
-
 export { AnchorPort };
diff --git a/apps/registry/registry/default/animated-text/animated-text.tsx b/apps/registry/registry/default/animated-text/animated-text.tsx
index 10a4938e..2bda680f 100644
--- a/apps/registry/registry/default/animated-text/animated-text.tsx
+++ b/apps/registry/registry/default/animated-text/animated-text.tsx
@@ -387,80 +387,73 @@ function AnimatedTextCursor({
   );
 }
 
-export const AnimatedText = React.forwardRef<
-  HTMLParagraphElement,
-  AnimatedTextProps
->(
-  (
-    {
-      className,
-      cursor = true,
-      cursorChar = "█",
-      direction = "start",
-      duration = 600,
-      randomCharacters,
-      randomCharactersPreset = "matrix",
-      randomness = 0,
-      splitBy = "word",
-      stagger = 70,
-      text,
-      variant = "terminal",
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedRandomCharacters = getResolvedRandomCharacters(
-      randomCharacters,
-      randomCharactersPreset,
-    );
-    const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
-    const segments = React.useMemo(
-      () => getSegments(text, resolvedSplitBy),
-      [resolvedSplitBy, text],
-    );
-    const segmentFrames = useAnimatedTextFrames({
-      direction,
-      randomCharacters: resolvedRandomCharacters,
-      randomness,
-      segments,
-      stagger,
-      variant,
-    });
-    const showCursor =
-      cursor &&
-      variant !== "reveal" &&
-      segmentFrames.some((frame) => !frame.isRevealed);
-    const cursorToneClass = getCursorToneClass(variant);
-
-    return (
-      <p
-        aria-label={text}
-        className={cn(getContainerClasses(variant), className)}
-        ref={ref}
-        style={{
-          ["--vllnt-animated-text-duration" as string]: `${duration}ms`,
-        }}
-        {...props}
-      >
-        {segmentFrames.map((segmentFrame) => (
-          <span
-            aria-hidden="true"
-            className={getSegmentClasses(variant, segmentFrame.isRevealed)}
-            key={segmentFrame.key}
-            style={segmentFrame.style}
-          >
-            {segmentFrame.content}
-          </span>
-        ))}
-        {showCursor ? (
-          <AnimatedTextCursor
-            cursorChar={cursorChar}
-            cursorToneClass={cursorToneClass}
-          />
-        ) : null}
-      </p>
-    );
-  },
-);
+export const AnimatedText = ({
+  className,
+  cursor = true,
+  cursorChar = "█",
+  direction = "start",
+  duration = 600,
+  randomCharacters,
+  randomCharactersPreset = "matrix",
+  randomness = 0,
+  ref,
+  splitBy = "word",
+  stagger = 70,
+  text,
+  variant = "terminal",
+  ...props
+}: AnimatedTextProps & React.RefAttributes<HTMLParagraphElement>) => {
+  const resolvedRandomCharacters = getResolvedRandomCharacters(
+    randomCharacters,
+    randomCharactersPreset,
+  );
+  const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
+  const segments = React.useMemo(
+    () => getSegments(text, resolvedSplitBy),
+    [resolvedSplitBy, text],
+  );
+  const segmentFrames = useAnimatedTextFrames({
+    direction,
+    randomCharacters: resolvedRandomCharacters,
+    randomness,
+    segments,
+    stagger,
+    variant,
+  });
+  const showCursor =
+    cursor &&
+    variant !== "reveal" &&
+    segmentFrames.some((frame) => !frame.isRevealed);
+  const cursorToneClass = getCursorToneClass(variant);
+
+  return (
+    <p
+      aria-label={text}
+      className={cn(getContainerClasses(variant), className)}
+      ref={ref}
+      style={{
+        ["--vllnt-animated-text-duration" as string]: `${duration}ms`,
+      }}
+      {...props}
+    >
+      {segmentFrames.map((segmentFrame) => (
+        <span
+          aria-hidden="true"
+          className={getSegmentClasses(variant, segmentFrame.isRevealed)}
+          key={segmentFrame.key}
+          style={segmentFrame.style}
+        >
+          {segmentFrame.content}
+        </span>
+      ))}
+      {showCursor ? (
+        <AnimatedTextCursor
+          cursorChar={cursorChar}
+          cursorToneClass={cursorToneClass}
+        />
+      ) : null}
+    </p>
+  );
+};
 
 AnimatedText.displayName = "AnimatedText";
diff --git a/apps/registry/registry/default/auto-reload/auto-reload.tsx b/apps/registry/registry/default/auto-reload/auto-reload.tsx
index 58de5b0a..f0c82f28 100644
--- a/apps/registry/registry/default/auto-reload/auto-reload.tsx
+++ b/apps/registry/registry/default/auto-reload/auto-reload.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -394,20 +393,23 @@ type DisabledBannerProps = {
   message: ReactNode;
 } & ComponentPropsWithoutRef<"div">;
 
-const DisabledBanner = forwardRef<HTMLDivElement, DisabledBannerProps>(
-  ({ className, message, ...rest }, ref) => (
-    <div
-      aria-disabled="true"
-      className={cn(
-        "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
-        className,
-      )}
-      ref={ref}
-      {...rest}
-    >
-      {message}
-    </div>
-  ),
+const DisabledBanner = ({
+  className,
+  message,
+  ref,
+  ...rest
+}: DisabledBannerProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    aria-disabled="true"
+    className={cn(
+      "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
+      className,
+    )}
+    ref={ref}
+    {...rest}
+  >
+    {message}
+  </div>
 );
 DisabledBanner.displayName = "AutoReload.DisabledBanner";
 
@@ -426,60 +428,61 @@ type ActivePanelProps = {
   toggleId: string;
 } & ComponentPropsWithoutRef<"div">;
 
-const ActivePanel = forwardRef<HTMLDivElement, ActivePanelProps>(
-  (props, ref) => {
-    const {
-      className,
-      controller,
-      currencyDisplay,
-      isSaving,
-      labels,
-      maxAmountCents,
-      minAmountCents,
-      onSave,
-      reloadAmountId,
-      stepCents,
-      thresholdId,
-      toggleId,
-      ...rest
-    } = props;
-    return (
-      <div
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <ToggleHeader
-          enabled={controller.enabled}
-          heading={labels.heading}
-          helper={labels.helper}
-          id={toggleId}
-          onCheckedChange={controller.handleToggle}
+const ActivePanel = (
+  props: ActivePanelProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    controller,
+    currencyDisplay,
+    isSaving,
+    labels,
+    maxAmountCents,
+    minAmountCents,
+    onSave,
+    ref,
+    reloadAmountId,
+    stepCents,
+    thresholdId,
+    toggleId,
+    ...rest
+  } = props;
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <ToggleHeader
+        enabled={controller.enabled}
+        heading={labels.heading}
+        helper={labels.helper}
+        id={toggleId}
+        onCheckedChange={controller.handleToggle}
+      />
+      {controller.enabled ? (
+        <ReloadFormFields
+          currencyDisplay={currencyDisplay}
+          isSaving={isSaving}
+          labels={labels}
+          maxAmountCents={maxAmountCents}
+          minAmountCents={minAmountCents}
+          onSave={onSave}
+          reloadAmount={controller.reloadAmount}
+          reloadAmountId={reloadAmountId}
+          setReloadAmount={controller.setReloadAmount}
+          setThreshold={controller.setThreshold}
+          stepCents={stepCents}
+          threshold={controller.threshold}
+          thresholdId={thresholdId}
         />
-        {controller.enabled ? (
-          <ReloadFormFields
-            currencyDisplay={currencyDisplay}
-            isSaving={isSaving}
-            labels={labels}
-            maxAmountCents={maxAmountCents}
-            minAmountCents={minAmountCents}
-            onSave={onSave}
-            reloadAmount={controller.reloadAmount}
-            reloadAmountId={reloadAmountId}
-            setReloadAmount={controller.setReloadAmount}
-            setThreshold={controller.setThreshold}
-            stepCents={stepCents}
-            threshold={controller.threshold}
-            thresholdId={thresholdId}
-          />
-        ) : null}
-      </div>
-    );
-  },
-);
+      ) : null}
+    </div>
+  );
+};
 ActivePanel.displayName = "AutoReload.ActivePanel";
 
 type AutoReloadInternalState = {
@@ -543,44 +546,45 @@ function useAutoReloadInternals(
   };
 }
 
-export const AutoReload = forwardRef<HTMLDivElement, AutoReloadProps>(
-  (props, ref) => {
-    const {
-      className,
-      disabled = false,
-      disabledMessage,
-      isSaving = false,
-      maxAmountCents,
-      minAmountCents = 100,
-      stepCents = DEFAULT_STEP_CENTS,
-    } = props;
-    const internals = useAutoReloadInternals(props);
-    if (disabled) {
-      return (
-        <DisabledBanner
-          className={className}
-          message={disabledMessage ?? internals.resolvedLabels.disabledFallback}
-          ref={ref}
-        />
-      );
-    }
+export const AutoReload = (
+  props: AutoReloadProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    disabled = false,
+    disabledMessage,
+    isSaving = false,
+    maxAmountCents,
+    minAmountCents = 100,
+    ref,
+    stepCents = DEFAULT_STEP_CENTS,
+  } = props;
+  const internals = useAutoReloadInternals(props);
+  if (disabled) {
     return (
-      <ActivePanel
+      <DisabledBanner
         className={className}
-        controller={internals.controller}
-        currencyDisplay={internals.currencyDisplay}
-        isSaving={isSaving}
-        labels={internals.resolvedLabels}
-        maxAmountCents={maxAmountCents}
-        minAmountCents={minAmountCents}
-        onSave={internals.handleSave}
+        message={disabledMessage ?? internals.resolvedLabels.disabledFallback}
         ref={ref}
-        reloadAmountId={internals.reloadAmountId}
-        stepCents={stepCents}
-        thresholdId={internals.thresholdId}
-        toggleId={internals.toggleId}
       />
     );
-  },
-);
+  }
+  return (
+    <ActivePanel
+      className={className}
+      controller={internals.controller}
+      currencyDisplay={internals.currencyDisplay}
+      isSaving={isSaving}
+      labels={internals.resolvedLabels}
+      maxAmountCents={maxAmountCents}
+      minAmountCents={minAmountCents}
+      onSave={internals.handleSave}
+      ref={ref}
+      reloadAmountId={internals.reloadAmountId}
+      stepCents={stepCents}
+      thresholdId={internals.thresholdId}
+      toggleId={internals.toggleId}
+    />
+  );
+};
 AutoReload.displayName = "AutoReload";
diff --git a/apps/registry/registry/default/avatar-group/avatar-group.tsx b/apps/registry/registry/default/avatar-group/avatar-group.tsx
index 4b0ee7c1..a2a4442d 100644
--- a/apps/registry/registry/default/avatar-group/avatar-group.tsx
+++ b/apps/registry/registry/default/avatar-group/avatar-group.tsx
@@ -63,36 +63,42 @@ export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> &
     overflowLabel?: (hiddenCount: number) => string;
   };
 
-const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, items, max, overflowLabel, size, ...props }, reference) => {
-    const visibleItems = max === undefined ? items : items.slice(0, max);
-    const hiddenCount = max === undefined ? 0 : Math.max(items.length - max, 0);
+const AvatarGroup = ({
+  className,
+  items,
+  max,
+  overflowLabel,
+  ref: reference,
+  size,
+  ...props
+}: AvatarGroupProps & React.RefAttributes<HTMLDivElement>) => {
+  const visibleItems = max === undefined ? items : items.slice(0, max);
+  const hiddenCount = max === undefined ? 0 : Math.max(items.length - max, 0);
 
-    return (
-      <div
-        className={cn(avatarGroupVariants({ size }), className)}
-        ref={reference}
-        {...props}
-      >
-        {visibleItems.map((item, index) => (
-          <Avatar
-            className={avatarItemVariants({ size })}
-            key={item.src ?? item.alt}
-            style={{ zIndex: visibleItems.length - index }}
-          >
-            {item.src ? <AvatarImage alt={item.alt} src={item.src} /> : null}
-            <AvatarFallback>{item.fallback}</AvatarFallback>
-          </Avatar>
-        ))}
-        {hiddenCount > 0 ? (
-          <span className={overflowBadgeVariants({ size })}>
-            {overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}`}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      className={cn(avatarGroupVariants({ size }), className)}
+      ref={reference}
+      {...props}
+    >
+      {visibleItems.map((item, index) => (
+        <Avatar
+          className={avatarItemVariants({ size })}
+          key={item.src ?? item.alt}
+          style={{ zIndex: visibleItems.length - index }}
+        >
+          {item.src ? <AvatarImage alt={item.alt} src={item.src} /> : null}
+          <AvatarFallback>{item.fallback}</AvatarFallback>
+        </Avatar>
+      ))}
+      {hiddenCount > 0 ? (
+        <span className={overflowBadgeVariants({ size })}>
+          {overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}`}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 AvatarGroup.displayName = "AvatarGroup";
 
diff --git a/apps/registry/registry/default/avatar/avatar.tsx b/apps/registry/registry/default/avatar/avatar.tsx
index 326991a7..7d9f5369 100644
--- a/apps/registry/registry/default/avatar/avatar.tsx
+++ b/apps/registry/registry/default/avatar/avatar.tsx
@@ -1,15 +1,14 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 import { cn } from "@vllnt/ui";
 
-const Avatar = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Avatar = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Root>>) => (
   <AvatarPrimitive.Root
     className={cn(
       "relative flex size-10 shrink-0 overflow-hidden rounded-full",
@@ -18,25 +17,31 @@ const Avatar = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
+const AvatarImage = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Image>>) => (
   <AvatarPrimitive.Image
     className={cn("aspect-square h-full w-full", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+const AvatarFallback = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Fallback>>) => (
   <AvatarPrimitive.Fallback
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted",
@@ -45,7 +50,7 @@ const AvatarFallback = forwardRef<
     ref={ref}
     {...props}
   />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+);
 
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export { Avatar, AvatarFallback, AvatarImage };
diff --git a/apps/registry/registry/default/banner/banner.tsx b/apps/registry/registry/default/banner/banner.tsx
index b1140d0b..0f7244b1 100644
--- a/apps/registry/registry/default/banner/banner.tsx
+++ b/apps/registry/registry/default/banner/banner.tsx
@@ -3,7 +3,6 @@
 import {
   type ButtonHTMLAttributes,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -139,74 +138,69 @@ export type BannerProps = {
  *
  * @public
  */
-export const Banner = forwardRef<HTMLDivElement, BannerProps>(
-  (
-    {
-      children,
-      className,
-      dismissible = false,
-      dismissLabel = "Dismiss",
-      icon,
-      id,
-      onDismiss,
-      persistDismissal = false,
-      role: roleOverride,
-      variant,
-      ...rest
-    },
-    ref,
-  ) => {
-    const storageKey =
-      persistDismissal && id ? `${STORAGE_PREFIX}${id}` : undefined;
-    const persistedDismissed = usePersistedDismissed(storageKey);
-    const [locallyDismissed, setLocallyDismissed] = useState(false);
-
-    const handleDismiss = useCallback(() => {
-      setLocallyDismissed(true);
-      if (storageKey) safeStorageSet(storageKey, "1");
-      onDismiss?.();
-    }, [onDismiss, storageKey]);
-
-    if (locallyDismissed || persistedDismissed) return null;
-
-    const resolvedVariant: BannerVariant = variant ?? "info";
-    const role =
-      roleOverride ??
-      (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
-
-    return (
-      <div
-        className={cn(bannerVariants({ variant }), className)}
-        id={id}
-        ref={ref}
-        role={role}
-        {...rest}
-      >
-        {icon ? (
-          <span
-            aria-hidden="true"
-            className="mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4"
-          >
-            {icon}
-          </span>
-        ) : null}
-        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1">
-          {children}
-        </div>
-        {dismissible ? (
-          <button
-            aria-label={dismissLabel}
-            className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-            onClick={handleDismiss}
-            type="button"
-          >
-            <X aria-hidden="true" className="size-4" />
-          </button>
-        ) : null}
+export const Banner = ({
+  children,
+  className,
+  dismissible = false,
+  dismissLabel = "Dismiss",
+  icon,
+  id,
+  onDismiss,
+  persistDismissal = false,
+  ref,
+  role: roleOverride,
+  variant,
+  ...rest
+}: BannerProps & React.RefAttributes<HTMLDivElement>) => {
+  const storageKey =
+    persistDismissal && id ? `${STORAGE_PREFIX}${id}` : undefined;
+  const persistedDismissed = usePersistedDismissed(storageKey);
+  const [locallyDismissed, setLocallyDismissed] = useState(false);
+
+  const handleDismiss = useCallback(() => {
+    setLocallyDismissed(true);
+    if (storageKey) safeStorageSet(storageKey, "1");
+    onDismiss?.();
+  }, [onDismiss, storageKey]);
+
+  if (locallyDismissed || persistedDismissed) return null;
+
+  const resolvedVariant: BannerVariant = variant ?? "info";
+  const role =
+    roleOverride ?? (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
+
+  return (
+    <div
+      className={cn(bannerVariants({ variant }), className)}
+      id={id}
+      ref={ref}
+      role={role}
+      {...rest}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          className="mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1">
+        {children}
       </div>
-    );
-  },
-);
+      {dismissible ? (
+        <button
+          aria-label={dismissLabel}
+          className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onClick={handleDismiss}
+          type="button"
+        >
+          <X aria-hidden="true" className="size-4" />
+        </button>
+      ) : null}
+    </div>
+  );
+};
 Banner.displayName = "Banner";
 
 /**
@@ -226,27 +220,32 @@ export type BannerActionProps = {
  *
  * @public
  */
-export const BannerAction = forwardRef<HTMLButtonElement, BannerActionProps>(
-  ({ asChild = false, children, className, type, ...rest }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = asChild
-      ? rest
-      : { type: type ?? "button", ...rest };
-
-    return (
-      <Comp
-        className={cn(
-          "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className,
-        )}
-        ref={ref}
-        {...buttonProps}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+export const BannerAction = ({
+  asChild = false,
+  children,
+  className,
+  ref,
+  type,
+  ...rest
+}: BannerActionProps & React.RefAttributes<HTMLButtonElement>) => {
+  const Comp = asChild ? Slot : "button";
+  const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = asChild
+    ? rest
+    : { type: type ?? "button", ...rest };
+
+  return (
+    <Comp
+      className={cn(
+        "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      ref={ref}
+      {...buttonProps}
+    >
+      {children}
+    </Comp>
+  );
+};
 BannerAction.displayName = "BannerAction";
 
 export { bannerVariants };
diff --git a/apps/registry/registry/default/border-beam/border-beam.tsx b/apps/registry/registry/default/border-beam/border-beam.tsx
index f40b263b..833df42b 100644
--- a/apps/registry/registry/default/border-beam/border-beam.tsx
+++ b/apps/registry/registry/default/border-beam/border-beam.tsx
@@ -11,53 +11,49 @@ export type BorderBeamProps = React.ComponentPropsWithoutRef<"span"> & {
   reverse?: boolean;
 };
 
-export const BorderBeam = React.forwardRef<HTMLSpanElement, BorderBeamProps>(
-  (
-    {
-      borderWidth = 1,
-      className,
-      colorFrom = "hsl(var(--primary) / 0.85)",
-      colorTo = "hsl(var(--ring) / 0.25)",
-      delay = 0,
-      duration = 6,
-      reverse = false,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const beamStyle: React.CSSProperties = {
-      animationDelay: `${delay}s`,
-      animationDirection: reverse ? "reverse" : "normal",
-      animationDuration: `${duration}s`,
-      animationIterationCount: "infinite",
-      animationName: "vllnt-border-beam-angle",
-      animationTimingFunction: "linear",
-      background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,
-      borderRadius: "inherit",
-      boxSizing: "border-box",
-      mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-      maskComposite: "exclude",
-      padding: `${borderWidth}px`,
-      WebkitMask:
-        "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-      WebkitMaskComposite: "xor",
-      ...style,
-    };
+export const BorderBeam = ({
+  borderWidth = 1,
+  className,
+  colorFrom = "hsl(var(--primary) / 0.85)",
+  colorTo = "hsl(var(--ring) / 0.25)",
+  delay = 0,
+  duration = 6,
+  ref,
+  reverse = false,
+  style,
+  ...props
+}: BorderBeamProps & React.RefAttributes<HTMLSpanElement>) => {
+  const beamStyle: React.CSSProperties = {
+    animationDelay: `${delay}s`,
+    animationDirection: reverse ? "reverse" : "normal",
+    animationDuration: `${duration}s`,
+    animationIterationCount: "infinite",
+    animationName: "vllnt-border-beam-angle",
+    animationTimingFunction: "linear",
+    background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    padding: `${borderWidth}px`,
+    WebkitMask:
+      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    ...style,
+  };
 
-    return (
-      <span
-        aria-hidden="true"
-        className={cn(
-          "pointer-events-none absolute inset-0 rounded-[inherit]",
-          className,
-        )}
-        ref={ref}
-        style={beamStyle}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit]",
+        className,
+      )}
+      ref={ref}
+      style={beamStyle}
+      {...props}
+    />
+  );
+};
 
 BorderBeam.displayName = "BorderBeam";
diff --git a/apps/registry/registry/default/bottom-activity-strip/bottom-activity-strip.tsx b/apps/registry/registry/default/bottom-activity-strip/bottom-activity-strip.tsx
index 1689c394..499e3db6 100644
--- a/apps/registry/registry/default/bottom-activity-strip/bottom-activity-strip.tsx
+++ b/apps/registry/registry/default/bottom-activity-strip/bottom-activity-strip.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -151,11 +147,10 @@ const Chip = (props: { event: ActivityEvent }): React.ReactElement => {
  *
  * @public
  */
-export const BottomActivityStrip = forwardRef<
-  HTMLElement,
-  BottomActivityStripProps
->((props, ref) => {
-  const { className, events, labels, maxEvents, ...rest } = props;
+export const BottomActivityStrip = (
+  props: BottomActivityStripProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, events, labels, maxEvents, ref, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const visible =
     maxEvents === undefined || maxEvents >= events.length
@@ -184,5 +179,5 @@ export const BottomActivityStrip = forwardRef<
       )}
     </section>
   );
-});
+};
 BottomActivityStrip.displayName = "BottomActivityStrip";
diff --git a/apps/registry/registry/default/button/button.tsx b/apps/registry/registry/default/button/button.tsx
index 928b7ee0..7674ade2 100644
--- a/apps/registry/registry/default/button/button.tsx
+++ b/apps/registry/registry/default/button/button.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -39,18 +37,23 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, reference) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ className, size, variant }))}
-        ref={reference}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
+const Button = ({
+  asChild = false,
+  className,
+  ref: reference,
+  size,
+  variant,
+  ...props
+}: ButtonProps & React.RefAttributes<HTMLButtonElement>) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={cn(buttonVariants({ className, size, variant }))}
+      ref={reference}
+      {...props}
+    />
+  );
+};
 
+Button.displayName = "Button";
 export { Button, buttonVariants };
diff --git a/apps/registry/registry/default/candlestick-chart/candlestick-chart.tsx b/apps/registry/registry/default/candlestick-chart/candlestick-chart.tsx
index 42c1f4e0..71fa744e 100644
--- a/apps/registry/registry/default/candlestick-chart/candlestick-chart.tsx
+++ b/apps/registry/registry/default/candlestick-chart/candlestick-chart.tsx
@@ -202,65 +202,58 @@ function SessionPill({ sessionChange }: { sessionChange: number }) {
   );
 }
 
-export const CandlestickChart = React.forwardRef<
-  HTMLDivElement,
-  CandlestickChartProps
->(
-  (
-    {
-      className,
-      data,
-      height = DEFAULT_HEIGHT,
-      showGrid = true,
-      width = DEFAULT_WIDTH,
-      ...props
-    },
-    reference,
-  ) => {
-    const firstCandle = data[0];
-    const finalCandle = data.at(-1);
+export const CandlestickChart = ({
+  className,
+  data,
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  showGrid = true,
+  width = DEFAULT_WIDTH,
+  ...props
+}: CandlestickChartProps & React.RefAttributes<HTMLDivElement>) => {
+  const firstCandle = data[0];
+  const finalCandle = data.at(-1);
 
-    if (!firstCandle || !finalCandle) {
-      return null;
-    }
+  if (!firstCandle || !finalCandle) {
+    return null;
+  }
 
-    const metrics = buildMetrics(data, height, width);
-    const sessionChange = finalCandle.close - firstCandle.open;
+  const metrics = buildMetrics(data, height, width);
+  const sessionChange = finalCandle.close - firstCandle.open;
 
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              OHLC session
-            </p>
-            <h3 className="text-lg font-semibold text-foreground">
-              Candlestick chart
-            </h3>
-          </div>
-          <SessionPill sessionChange={sessionChange} />
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            OHLC session
+          </p>
+          <h3 className="text-lg font-semibold text-foreground">
+            Candlestick chart
+          </h3>
         </div>
-        <svg
-          aria-label="Candlestick chart"
-          className="h-full w-full"
-          height={height}
-          role="img"
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
-        >
-          <PriceGrid metrics={metrics} showGrid={showGrid} width={width} />
-          <CandleMarks data={data} height={height} metrics={metrics} />
-        </svg>
+        <SessionPill sessionChange={sessionChange} />
       </div>
-    );
-  },
-);
+      <svg
+        aria-label="Candlestick chart"
+        className="h-full w-full"
+        height={height}
+        role="img"
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
+      >
+        <PriceGrid metrics={metrics} showGrid={showGrid} width={width} />
+        <CandleMarks data={data} height={height} metrics={metrics} />
+      </svg>
+    </div>
+  );
+};
 
 CandlestickChart.displayName = "CandlestickChart";
diff --git a/apps/registry/registry/default/canvas-shell/canvas-shell.tsx b/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
index 85e689ce..927dde1c 100644
--- a/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
+++ b/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { CSSProperties, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -206,7 +204,7 @@ function renderLegacyCanvasShell(
     topBar,
     ...props
   }: CanvasShellProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  ref: React.Ref<HTMLElement> | undefined,
 ) {
   return (
     <section
@@ -268,7 +266,7 @@ function renderFloatingCanvasShell(
     topBar,
     ...props
   }: CanvasShellProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  ref: React.Ref<HTMLElement> | undefined,
 ) {
   const inset = toInsetValue(chromeInset) ?? "16px";
   const resolvedBottomBar = bottomBar ?? bottomSlot;
@@ -324,8 +322,11 @@ function renderFloatingCanvasShell(
   );
 }
 
-const CanvasShell = forwardRef<HTMLElement, CanvasShellProps>((props, ref) => {
-  const { bottomBar, chromeInset, contentPadding, leftBar, rightBar } = props;
+const CanvasShell = (
+  props: CanvasShellProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { bottomBar, chromeInset, contentPadding, leftBar, ref, rightBar } =
+    props;
   const hasExplicitChromeInset = Object.prototype.hasOwnProperty.call(
     props,
     "chromeInset",
@@ -342,8 +343,7 @@ const CanvasShell = forwardRef<HTMLElement, CanvasShellProps>((props, ref) => {
   }
 
   return renderFloatingCanvasShell(props, ref);
-});
+};
 
 CanvasShell.displayName = "CanvasShell";
-
 export { CanvasShell };
diff --git a/apps/registry/registry/default/canvas-view/canvas-view.tsx b/apps/registry/registry/default/canvas-view/canvas-view.tsx
index 0f22747e..ec8a84fa 100644
--- a/apps/registry/registry/default/canvas-view/canvas-view.tsx
+++ b/apps/registry/registry/default/canvas-view/canvas-view.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  forwardRef,
   useCallback,
   useEffect,
   useId,
@@ -473,7 +472,7 @@ function usePreventBodySelection(disabled: boolean) {
 }
 
 function useCanvasViewHandle(
-  ref: React.ForwardedRef<CanvasViewHandle>,
+  ref: React.Ref<CanvasViewHandle> | undefined,
   viewportState: {
     resetViewport: () => void;
     setViewport: (viewport: CanvasViewport) => void;
@@ -577,75 +576,68 @@ function CanvasContentLayer({
   );
 }
 
-const CanvasView = forwardRef<CanvasViewHandle, CanvasViewProps>(
-  (
-    {
-      children,
-      className,
-      defaultViewport = DEFAULT_VIEWPORT,
-      maxZoom = 2,
-      minZoom = 0.5,
-      onViewportChange,
-      overlay,
-      zoomStep = 0.1,
-      ...props
-    },
-    ref,
-  ) => {
-    const instructionsId = useId();
-    const viewportState = useViewportState({
-      defaultViewport,
-      maxZoom,
-      minZoom,
-      onViewportChange,
-    });
-    const keyboard = useCanvasKeyboardInteractions({
-      nudgeViewport: viewportState.nudgeViewport,
-      resetViewport: viewportState.resetViewport,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef,
-      zoomStep,
-    });
-    const pointer = useCanvasPointerInteractions({
-      isSpacePressed: keyboard.isSpacePressed,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef,
-    });
-    usePreventBodySelection(pointer.isDragging);
-    useCanvasViewHandle(ref, viewportState);
+const CanvasView = ({
+  children,
+  className,
+  defaultViewport = DEFAULT_VIEWPORT,
+  maxZoom = 2,
+  minZoom = 0.5,
+  onViewportChange,
+  overlay,
+  ref,
+  zoomStep = 0.1,
+  ...props
+}: CanvasViewProps & React.RefAttributes<CanvasViewHandle>) => {
+  const instructionsId = useId();
+  const viewportState = useViewportState({
+    defaultViewport,
+    maxZoom,
+    minZoom,
+    onViewportChange,
+  });
+  const keyboard = useCanvasKeyboardInteractions({
+    nudgeViewport: viewportState.nudgeViewport,
+    resetViewport: viewportState.resetViewport,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef,
+    zoomStep,
+  });
+  const pointer = useCanvasPointerInteractions({
+    isSpacePressed: keyboard.isSpacePressed,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef,
+  });
+  usePreventBodySelection(pointer.isDragging);
+  useCanvasViewHandle(ref, viewportState);
 
-    return (
-      <div
-        className={cn(
-          "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
-          className,
-        )}
-        {...props}
+  return (
+    <div
+      className={cn(
+        "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <CanvasInteractionLayer
+        instructionsId={instructionsId}
+        isDragging={pointer.isDragging}
+        isSpacePressed={keyboard.isSpacePressed}
+        onKeyDown={keyboard.handleKeyDown}
+        onKeyUp={keyboard.handleKeyUp}
+        onPointerCancel={pointer.handlePointerCancel}
+        onPointerDown={pointer.handlePointerDown}
+        onPointerMove={pointer.handlePointerMove}
+        onPointerUp={pointer.handlePointerUp}
+        onWheel={keyboard.handleWheel}
+        viewport={viewportState.viewport}
       >
-        <CanvasInteractionLayer
-          instructionsId={instructionsId}
-          isDragging={pointer.isDragging}
-          isSpacePressed={keyboard.isSpacePressed}
-          onKeyDown={keyboard.handleKeyDown}
-          onKeyUp={keyboard.handleKeyUp}
-          onPointerCancel={pointer.handlePointerCancel}
-          onPointerDown={pointer.handlePointerDown}
-          onPointerMove={pointer.handlePointerMove}
-          onPointerUp={pointer.handlePointerUp}
-          onWheel={keyboard.handleWheel}
-          viewport={viewportState.viewport}
-        >
-          <CanvasContentLayer
-            overlay={overlay}
-            viewport={viewportState.viewport}
-          >
-            {children}
-          </CanvasContentLayer>
-        </CanvasInteractionLayer>
-      </div>
-    );
-  },
-);
+        <CanvasContentLayer overlay={overlay} viewport={viewportState.viewport}>
+          {children}
+        </CanvasContentLayer>
+      </CanvasInteractionLayer>
+    </div>
+  );
+};
 
 CanvasView.displayName = "CanvasView";
 
diff --git a/apps/registry/registry/default/card/card.tsx b/apps/registry/registry/default/card/card.tsx
index 6e962891..7712e335 100644
--- a/apps/registry/registry/default/card/card.tsx
+++ b/apps/registry/registry/default/card/card.tsx
@@ -2,10 +2,12 @@ import * as React from "react";
 
 import { cn } from "@vllnt/ui";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const Card = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
@@ -14,25 +16,29 @@ const Card = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardHeader = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -41,39 +47,45 @@ const CardTitle = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardContent = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div className={cn("p-6 pt-0", className)} ref={reference} {...props} />
-));
+);
 CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardFooter = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex items-center p-6 pt-0", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardFooter.displayName = "CardFooter";
 
 export {
diff --git a/apps/registry/registry/default/carousel/carousel.tsx b/apps/registry/registry/default/carousel/carousel.tsx
index 01918acb..70ea1098 100644
--- a/apps/registry/registry/default/carousel/carousel.tsx
+++ b/apps/registry/registry/default/carousel/carousel.tsx
@@ -2,9 +2,8 @@
 
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useState,
@@ -42,7 +41,7 @@ type CarouselContextProps = {
 const CarouselContext = createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = useContext(CarouselContext);
+  const context = use(CarouselContext);
 
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
@@ -142,78 +141,75 @@ function useCarouselLogic({
   };
 }
 
-const Carousel = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      children,
-      className,
+const Carousel = ({
+  children,
+  className,
+  opts,
+  orientation = "horizontal",
+  plugins,
+  ref,
+  setApi,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  CarouselProps &
+  React.RefAttributes<HTMLDivElement>) => {
+  const {
+    api,
+    canScrollNext,
+    canScrollPrevious,
+    carouselRef,
+    handleKeyDown,
+    scrollNext,
+    scrollPrevious,
+  } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
+
+  const contextValue = useMemo(
+    () => ({
+      api,
+      canScrollNext,
+      canScrollPrev: canScrollPrevious,
+      carouselRef,
       opts,
-      orientation = "horizontal",
-      plugins,
-      setApi,
-      ...props
-    },
-    ref,
-  ) => {
-    const {
+      orientation:
+        orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollNext,
+      scrollPrev: scrollPrevious,
+    }),
+    [
       api,
       canScrollNext,
       canScrollPrevious,
       carouselRef,
-      handleKeyDown,
+      opts,
+      orientation,
       scrollNext,
       scrollPrevious,
-    } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
-
-    const contextValue = useMemo(
-      () => ({
-        api,
-        canScrollNext,
-        canScrollPrev: canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollNext,
-        scrollPrev: scrollPrevious,
-      }),
-      [
-        api,
-        canScrollNext,
-        canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation,
-        scrollNext,
-        scrollPrevious,
-      ],
-    );
-
-    return (
-      <CarouselContext.Provider value={contextValue}>
-        <div
-          aria-roledescription="carousel"
-          className={cn("relative", className)}
-          onKeyDownCapture={handleKeyDown}
-          ref={ref}
-          role="region"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
+    ],
+  );
+
+  return (
+    <CarouselContext.Provider value={contextValue}>
+      <div
+        aria-roledescription="carousel"
+        className={cn("relative", className)}
+        onKeyDownCapture={handleKeyDown}
+        ref={ref}
+        role="region"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+};
 Carousel.displayName = "Carousel";
 
-const CarouselContent = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+const CarouselContent = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => {
   const { carouselRef, orientation } = useCarousel();
 
   return (
@@ -229,13 +225,15 @@ const CarouselContent = forwardRef<
       />
     </div>
   );
-});
+};
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+const CarouselItem = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => {
   const { orientation } = useCarousel();
 
   return (
@@ -251,13 +249,17 @@ const CarouselItem = forwardRef<
       {...props}
     />
   );
-});
+};
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselPrevious = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof Button> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { canScrollPrev, orientation, scrollPrev } = useCarousel();
 
   return (
@@ -280,13 +282,17 @@ const CarouselPrevious = forwardRef<
       <span className="sr-only">Previous slide</span>
     </Button>
   );
-});
+};
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselNext = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof Button> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { canScrollNext, orientation, scrollNext } = useCarousel();
 
   return (
@@ -309,7 +315,7 @@ const CarouselNext = forwardRef<
       <span className="sr-only">Next slide</span>
     </Button>
   );
-});
+};
 CarouselNext.displayName = "CarouselNext";
 
 export {
diff --git a/apps/registry/registry/default/checkbox/checkbox.tsx b/apps/registry/registry/default/checkbox/checkbox.tsx
index 9142458d..8e1c419d 100644
--- a/apps/registry/registry/default/checkbox/checkbox.tsx
+++ b/apps/registry/registry/default/checkbox/checkbox.tsx
@@ -7,10 +7,12 @@ import { Check } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
 
-const Checkbox = React.forwardRef<
-  React.ComponentRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, reference) => (
+const Checkbox = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof CheckboxPrimitive.Root>>) => (
   <CheckboxPrimitive.Root
     className={cn(
       "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
@@ -25,7 +27,7 @@ const Checkbox = React.forwardRef<
       <Check className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-));
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
diff --git a/apps/registry/registry/default/choropleth-map/choropleth-map.tsx b/apps/registry/registry/default/choropleth-map/choropleth-map.tsx
index 2e057ab1..9960dd60 100644
--- a/apps/registry/registry/default/choropleth-map/choropleth-map.tsx
+++ b/apps/registry/registry/default/choropleth-map/choropleth-map.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -78,7 +77,7 @@ type ChoroplethCtx = {
 const ChoroplethContext = createContext<ChoroplethCtx | null>(null);
 
 function useChoroplethContext(): ChoroplethCtx {
-  const ctx = useContext(ChoroplethContext);
+  const ctx = use(ChoroplethContext);
   if (!ctx) {
     throw new Error("ChoroplethMap subcomponent used outside its root.");
   }
@@ -257,10 +256,12 @@ export type ChoroplethTooltipProps = {
   children?: ChoroplethTooltipRender;
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const ChoroplethTooltip = forwardRef<
-  HTMLDivElement,
-  ChoroplethTooltipProps
->(({ children, className, ...rest }, ref) => {
+export const ChoroplethTooltip = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ChoroplethTooltipProps & React.RefAttributes<HTMLDivElement>) => {
   const { hover, regionByid } = useChoroplethContext();
   if (!hover) return null;
   const region = regionByid.get(hover.id);
@@ -290,7 +291,7 @@ export const ChoroplethTooltip = forwardRef<
       )}
     </div>
   );
-});
+};
 ChoroplethTooltip.displayName = "ChoroplethTooltip";
 
 /**
@@ -303,10 +304,12 @@ export type ChoroplethLegendProps = {
   title?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const ChoroplethLegend = forwardRef<
-  HTMLDivElement,
-  ChoroplethLegendProps
->(({ className, title, ...rest }, ref) => {
+export const ChoroplethLegend = ({
+  className,
+  ref,
+  title,
+  ...rest
+}: ChoroplethLegendProps & React.RefAttributes<HTMLDivElement>) => {
   const { legend } = useChoroplethContext();
   if (!legend) return null;
   const stops = legend.scale.join(", ");
@@ -336,7 +339,7 @@ export const ChoroplethLegend = forwardRef<
       </div>
     </div>
   );
-});
+};
 ChoroplethLegend.displayName = "ChoroplethLegend";
 
 type DataSummaryProps = {
@@ -502,80 +505,82 @@ function RegionsLayer({
  *
  * @public
  */
-export const ChoroplethMap = forwardRef<HTMLElement, ChoroplethMapProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      colorScale = DEFAULT_SCALE,
-      data,
-      domain: domainProperty,
-      labels,
-      missingColor = DEFAULT_MISSING,
-      onSelectRegion,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-
-    const domain = useMemo(
-      () => domainProperty ?? computeDomain(Object.values(data)),
-      [data, domainProperty],
-    );
-
-    const ctx = useChoroplethState({
-      colorScale,
-      data,
-      domain,
-      missingColor,
-      regions,
-    });
-    const buckets = useMemo(() => bucketChildren(children), [children]);
-
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-
-    const handleSelect = useCallback(
-      (region: ChoroplethRegion) => {
-        setSelectedId(region.id);
-        onSelectRegion?.(region);
-      },
-      [onSelectRegion],
-    );
-
-    return (
-      <ChoroplethContext.Provider value={ctx}>
-        <section
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-            className,
-          )}
-          ref={ref}
-          {...rest}
+// eslint-disable-next-line max-lines-per-function
+export const ChoroplethMap = (
+  props: ChoroplethMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    colorScale = DEFAULT_SCALE,
+    data,
+    domain: domainProperty,
+    labels,
+    missingColor = DEFAULT_MISSING,
+    onSelectRegion,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  const domain = useMemo(
+    () => domainProperty ?? computeDomain(Object.values(data)),
+    [data, domainProperty],
+  );
+
+  const ctx = useChoroplethState({
+    colorScale,
+    data,
+    domain,
+    missingColor,
+    regions,
+  });
+  const buckets = useMemo(() => bucketChildren(children), [children]);
+
+  const [selectedId, setSelectedId] = useState<string | undefined>();
+
+  const handleSelect = useCallback(
+    (region: ChoroplethRegion) => {
+      setSelectedId(region.id);
+      onSelectRegion?.(region);
+    },
+    [onSelectRegion],
+  );
+
+  return (
+    <ChoroplethContext.Provider value={ctx}>
+      <section
+        aria-label={resolvedLabels.region}
+        className={cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <svg
+          aria-hidden="true"
+          className="block h-full w-full"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox={`0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`}
         >
-          <svg
-            aria-hidden="true"
-            className="block h-full w-full"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox={`0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`}
-          >
-            <RegionsLayer
-              onSelect={handleSelect}
-              regions={regions}
-              selectedId={selectedId}
-              setHoverFn={ctx.setHover}
-            />
-          </svg>
-          {buckets.tooltip}
-          {buckets.legend}
-          <DataSummary data={data} regions={regions} titleId={titleId} />
-        </section>
-      </ChoroplethContext.Provider>
-    );
-  },
-);
+          <RegionsLayer
+            onSelect={handleSelect}
+            regions={regions}
+            selectedId={selectedId}
+            setHoverFn={ctx.setHover}
+          />
+        </svg>
+        {buckets.tooltip}
+        {buckets.legend}
+        <DataSummary data={data} regions={regions} titleId={titleId} />
+      </section>
+    </ChoroplethContext.Provider>
+  );
+};
 ChoroplethMap.displayName = "ChoroplethMap";
diff --git a/apps/registry/registry/default/chronological-timeline/chronological-timeline.tsx b/apps/registry/registry/default/chronological-timeline/chronological-timeline.tsx
index cbb581d1..4c5762f3 100644
--- a/apps/registry/registry/default/chronological-timeline/chronological-timeline.tsx
+++ b/apps/registry/registry/default/chronological-timeline/chronological-timeline.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -53,7 +52,7 @@ type ChronoCtx = {
 const ChronoContext = createContext<ChronoCtx | null>(null);
 
 function useChronoContext(): ChronoCtx {
-  const ctx = useContext(ChronoContext);
+  const ctx = use(ChronoContext);
   if (!ctx) {
     throw new Error("ChronoEvent used outside ChronologicalTimeline.");
   }
@@ -286,68 +285,69 @@ function EventCard({
  *
  * @public
  */
-export const ChronoEvent = forwardRef<HTMLElement, ChronoEventProps>(
-  (props, forwardedRef) => {
-    const {
-      children,
-      className,
-      date,
-      featured = false,
-      id,
-      media,
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const eventId = id ?? generatedId;
-    const ref = useRef<HTMLElement | null>(null);
-    const { registerEvent, setActiveId } = useChronoContext();
-
-    const refCallback = useCallback(
-      (node: HTMLElement | null) => {
-        ref.current = node;
-        registerEvent(eventId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [eventId, forwardedRef, registerEvent],
-    );
+export const ChronoEvent = (
+  props: ChronoEventProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    date,
+    featured = false,
+    id,
+    media,
+    ref: forwardedRef,
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const eventId = id ?? generatedId;
+  const ref = useRef<HTMLElement | null>(null);
+  const { registerEvent, setActiveId } = useChronoContext();
+
+  const refCallback = useCallback(
+    (node: HTMLElement | null) => {
+      ref.current = node;
+      registerEvent(eventId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [eventId, forwardedRef, registerEvent],
+  );
 
-    const handleFocus = useCallback(() => {
-      setActiveId(eventId);
-    }, [eventId, setActiveId]);
+  const handleFocus = useCallback(() => {
+    setActiveId(eventId);
+  }, [eventId, setActiveId]);
 
-    return (
-      <article
-        aria-labelledby={`${eventId}-title`}
-        className={cn(
-          "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
-          className,
-        )}
-        data-event-id={eventId}
-        data-featured={featured ? "true" : undefined}
-        id={eventId}
-        onFocus={handleFocus}
-        ref={refCallback}
-        {...rest}
+  return (
+    <article
+      aria-labelledby={`${eventId}-title`}
+      className={cn(
+        "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
+        className,
+      )}
+      data-event-id={eventId}
+      data-featured={featured ? "true" : undefined}
+      id={eventId}
+      onFocus={handleFocus}
+      ref={refCallback}
+      {...rest}
+    >
+      <DateColumn date={date} />
+      <RailColumn featured={featured} />
+      <EventCard
+        date={date}
+        eventId={eventId}
+        featured={featured}
+        media={media}
+        subtitle={subtitle}
+        title={title}
       >
-        <DateColumn date={date} />
-        <RailColumn featured={featured} />
-        <EventCard
-          date={date}
-          eventId={eventId}
-          featured={featured}
-          media={media}
-          subtitle={subtitle}
-          title={title}
-        >
-          {children}
-        </EventCard>
-      </article>
-    );
-  },
-);
+        {children}
+      </EventCard>
+    </article>
+  );
+};
 ChronoEvent.displayName = "ChronoEvent";
 
 type ProgressStripProps = {
@@ -477,14 +477,14 @@ function EventList({ activeId, children }: EventListProps): ReactNode {
  *
  * @public
  */
-export const ChronologicalTimeline = forwardRef<
-  HTMLElement,
-  ChronologicalTimelineProps
->((props, ref) => {
+export const ChronologicalTimeline = (
+  props: ChronologicalTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     children,
     className,
     progressLabel = "Timeline progress",
+    ref,
     title,
     ...rest
   } = props;
@@ -520,7 +520,7 @@ export const ChronologicalTimeline = forwardRef<
       </section>
     </ChronoContext.Provider>
   );
-});
+};
 ChronologicalTimeline.displayName = "ChronologicalTimeline";
 
 function isReactElementWithEventId(
diff --git a/apps/registry/registry/default/civilization-card/civilization-card.tsx b/apps/registry/registry/default/civilization-card/civilization-card.tsx
index 41227c0f..50605431 100644
--- a/apps/registry/registry/default/civilization-card/civilization-card.tsx
+++ b/apps/registry/registry/default/civilization-card/civilization-card.tsx
@@ -1,10 +1,5 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { Globe } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 import { Badge } from "@vllnt/ui";
@@ -376,54 +371,55 @@ function CivilizationBody({
   );
 }
 
-export const CivilizationCard = forwardRef<HTMLElement, CivilizationCardProps>(
-  (props, ref) => {
-    const {
-      achievements,
-      actionHref,
-      capital,
-      className,
-      color = "neutral",
-      era,
-      image,
-      labels,
-      leaders,
-      name,
-      peakPopulation,
-      region,
-      ...rest
-    } = props;
+export const CivilizationCard = (
+  props: CivilizationCardProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    achievements,
+    actionHref,
+    capital,
+    className,
+    color = "neutral",
+    era,
+    image,
+    labels,
+    leaders,
+    name,
+    peakPopulation,
+    ref,
+    region,
+    ...rest
+  } = props;
 
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const palette = CIVILIZATION_COLOR_VARIANTS[color];
-    const altName = typeof name === "string" ? name : undefined;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const palette = CIVILIZATION_COLOR_VARIANTS[color];
+  const altName = typeof name === "string" ? name : undefined;
 
-    return (
-      <article
-        className={cn(
-          "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
-          palette.ring,
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <CivilizationHero color={color} image={image} imageAlt={altName} />
-        <CivilizationBody
-          achievements={achievements}
-          actionHref={actionHref}
-          capital={capital}
-          era={era}
-          labels={resolvedLabels}
-          leaders={leaders}
-          name={name}
-          peakPopulation={peakPopulation}
-          region={region}
-        />
-      </article>
-    );
-  },
-);
+  return (
+    <article
+      className={cn(
+        "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
+        palette.ring,
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <CivilizationHero color={color} image={image} imageAlt={altName} />
+      <CivilizationBody
+        achievements={achievements}
+        actionHref={actionHref}
+        capital={capital}
+        era={era}
+        labels={resolvedLabels}
+        leaders={leaders}
+        name={name}
+        peakPopulation={peakPopulation}
+        region={region}
+      />
+    </article>
+  );
+};
 CivilizationCard.displayName = "CivilizationCard";
 
 /**
@@ -440,10 +436,12 @@ export type CivilizationComparisonProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const CivilizationComparison = forwardRef<
-  HTMLDivElement,
-  CivilizationComparisonProps
->(({ children, className, ...rest }, ref) => {
+export const CivilizationComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: CivilizationComparisonProps & React.RefAttributes<HTMLDivElement>) => {
   return (
     <div
       className={cn(
@@ -456,5 +454,5 @@ export const CivilizationComparison = forwardRef<
       {children}
     </div>
   );
-});
+};
 CivilizationComparison.displayName = "CivilizationComparison";
diff --git a/apps/registry/registry/default/combobox/combobox.tsx b/apps/registry/registry/default/combobox/combobox.tsx
index b6344ee3..ae08cda0 100644
--- a/apps/registry/registry/default/combobox/combobox.tsx
+++ b/apps/registry/registry/default/combobox/combobox.tsx
@@ -133,68 +133,64 @@ function ComboboxListPanel({
   );
 }
 
-const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
-  (
-    {
-      className,
-      commandClassName,
-      emptyText = "No option found.",
-      onValueChange,
-      options,
-      placeholder = "Select an option",
-      searchPlaceholder = "Search options...",
-      triggerClassName,
-      value,
-    },
-    reference,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const listboxId = React.useId();
-    const { resolvedValue, setResolvedValue } = useComboboxValue(
-      value,
-      onValueChange,
-    );
-    const selectedOption = options.find(
-      (option) => option.value === resolvedValue,
-    );
-
-    const handleSelect = (nextValue: string) => {
-      setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
-      setOpen(false);
-    };
-
-    return (
-      <Popover onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <Button
-            aria-controls={listboxId}
-            aria-expanded={open}
-            aria-haspopup="listbox"
-            className={cn("w-full justify-between", triggerClassName)}
-            ref={reference}
-            role="combobox"
-            variant="outline"
-          >
-            <span className="truncate">
-              {selectedOption ? selectedOption.label : placeholder}
-            </span>
-            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <ComboboxListPanel
-          className={className}
-          commandClassName={commandClassName}
-          emptyText={emptyText}
-          listboxId={listboxId}
-          onSelect={handleSelect}
-          options={options}
-          resolvedValue={resolvedValue}
-          searchPlaceholder={searchPlaceholder}
-        />
-      </Popover>
-    );
-  },
-);
+const Combobox = ({
+  className,
+  commandClassName,
+  emptyText = "No option found.",
+  onValueChange,
+  options,
+  placeholder = "Select an option",
+  ref: reference,
+  searchPlaceholder = "Search options...",
+  triggerClassName,
+  value,
+}: ComboboxProps & React.RefAttributes<HTMLButtonElement>) => {
+  const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
+  const { resolvedValue, setResolvedValue } = useComboboxValue(
+    value,
+    onValueChange,
+  );
+  const selectedOption = options.find(
+    (option) => option.value === resolvedValue,
+  );
+
+  const handleSelect = (nextValue: string) => {
+    setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
+    setOpen(false);
+  };
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-controls={listboxId}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          className={cn("w-full justify-between", triggerClassName)}
+          ref={reference}
+          role="combobox"
+          variant="outline"
+        >
+          <span className="truncate">
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <ComboboxListPanel
+        className={className}
+        commandClassName={commandClassName}
+        emptyText={emptyText}
+        listboxId={listboxId}
+        onSelect={handleSelect}
+        options={options}
+        resolvedValue={resolvedValue}
+        searchPlaceholder={searchPlaceholder}
+      />
+    </Popover>
+  );
+};
 Combobox.displayName = "Combobox";
 
 export { Combobox };
diff --git a/apps/registry/registry/default/command/command.tsx b/apps/registry/registry/default/command/command.tsx
index 20d1a36d..44f8c1e3 100644
--- a/apps/registry/registry/default/command/command.tsx
+++ b/apps/registry/registry/default/command/command.tsx
@@ -9,10 +9,12 @@ import { Search } from "lucide-react";
 import { cn } from "@vllnt/ui";
 import { Dialog, DialogContent, DialogTitle } from "@vllnt/ui";
 
-const Command = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, reference) => (
+const Command = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive>>) => (
   <CommandPrimitive
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
@@ -21,7 +23,7 @@ const Command = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = {} & React.ComponentPropsWithoutRef<
@@ -41,10 +43,12 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
-const CommandInput = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, reference) => (
+const CommandInput = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Input>>) => (
   // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 size-4 shrink-0 opacity-50" />
@@ -57,37 +61,42 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-));
+);
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, reference) => (
+const CommandList = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.List>>) => (
   <CommandPrimitive.List
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, reference) => (
+const CommandEmpty = ({
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Empty>>) => (
   <CommandPrimitive.Empty
     className="py-6 text-center text-sm"
     ref={reference}
     {...props}
   />
-));
+);
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, reference) => (
+const CommandGroup = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Group>>) => (
   <CommandPrimitive.Group
     className={cn(
       "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
@@ -96,25 +105,32 @@ const CommandGroup = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, reference) => (
+const CommandSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof CommandPrimitive.Separator>
+  >) => (
   <CommandPrimitive.Separator
     className={cn("-mx-1 h-px bg-border", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, disabled, ...props }, reference) => (
+const CommandItem = ({
+  className,
+  disabled,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Item>>) => (
   <CommandPrimitive.Item
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:opacity-50",
@@ -125,7 +141,7 @@ const CommandItem = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
diff --git a/apps/registry/registry/default/comment-pin/comment-pin.tsx b/apps/registry/registry/default/comment-pin/comment-pin.tsx
index c193dab1..3e9914f6 100644
--- a/apps/registry/registry/default/comment-pin/comment-pin.tsx
+++ b/apps/registry/registry/default/comment-pin/comment-pin.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -124,65 +120,66 @@ const PinBody = (props: PinBodyInput): React.ReactElement => {
  *
  * @public
  */
-export const CommentPin = forwardRef<HTMLDivElement, CommentPinProps>(
-  (props, ref) => {
-    const {
-      authorInitial,
-      className,
-      color,
-      labels,
-      onActivate,
-      state = "open",
-      unread,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const showBadge = typeof unread === "number" && unread > 0;
-    const ariaLabel = showBadge
-      ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}`
-      : resolvedLabels.region;
-    const handleClick = (): void => {
-      onActivate?.();
-    };
-    const body = (
-      <PinBody
-        accent={color}
-        authorInitial={authorInitial}
-        state={state}
-        unread={unread}
-      />
-    );
-    return (
-      <div
-        aria-label={ariaLabel}
-        className={cn(
-          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
-          className,
-        )}
-        data-comment-pin
-        data-comment-pin-state={state}
-        ref={ref}
-        role="img"
-        style={{ left: x, top: y }}
-        {...rest}
-      >
-        {onActivate ? (
-          <button
-            aria-label={ariaLabel}
-            className="relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            data-comment-pin-trigger
-            onClick={handleClick}
-            type="button"
-          >
-            {body}
-          </button>
-        ) : (
-          <span className="relative inline-flex">{body}</span>
-        )}
-      </div>
-    );
-  },
-);
+export const CommentPin = (
+  props: CommentPinProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    authorInitial,
+    className,
+    color,
+    labels,
+    onActivate,
+    ref,
+    state = "open",
+    unread,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const showBadge = typeof unread === "number" && unread > 0;
+  const ariaLabel = showBadge
+    ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}`
+    : resolvedLabels.region;
+  const handleClick = (): void => {
+    onActivate?.();
+  };
+  const body = (
+    <PinBody
+      accent={color}
+      authorInitial={authorInitial}
+      state={state}
+      unread={unread}
+    />
+  );
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+        className,
+      )}
+      data-comment-pin
+      data-comment-pin-state={state}
+      ref={ref}
+      role="img"
+      style={{ left: x, top: y }}
+      {...rest}
+    >
+      {onActivate ? (
+        <button
+          aria-label={ariaLabel}
+          className="relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          data-comment-pin-trigger
+          onClick={handleClick}
+          type="button"
+        >
+          {body}
+        </button>
+      ) : (
+        <span className="relative inline-flex">{body}</span>
+      )}
+    </div>
+  );
+};
 CommentPin.displayName = "CommentPin";
diff --git a/apps/registry/registry/default/connector-edge/connector-edge.tsx b/apps/registry/registry/default/connector-edge/connector-edge.tsx
index 3a079d45..a84c720b 100644
--- a/apps/registry/registry/default/connector-edge/connector-edge.tsx
+++ b/apps/registry/registry/default/connector-edge/connector-edge.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { CSSProperties } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -26,55 +24,60 @@ const strokeClasses: Record<
   idle: "stroke-muted-foreground/60",
 };
 
-const ConnectorEdge = forwardRef<HTMLDivElement, ConnectorEdgeProps>(
-  ({ className, end, label, start, state = "idle", ...props }, ref) => {
-    const width = Math.max(Math.abs(end.x - start.x), 32);
-    const height = Math.max(Math.abs(end.y - start.y), 32);
-    const midX = width / 2;
-    const startX = start.x <= end.x ? 4 : width - 4;
-    const endX = start.x <= end.x ? width - 4 : 4;
-    const startY = start.y <= end.y ? 4 : height - 4;
-    const endY = start.y <= end.y ? height - 4 : 4;
-    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+const ConnectorEdge = ({
+  className,
+  end,
+  label,
+  ref,
+  start,
+  state = "idle",
+  ...props
+}: ConnectorEdgeProps & React.RefAttributes<HTMLDivElement>) => {
+  const width = Math.max(Math.abs(end.x - start.x), 32);
+  const height = Math.max(Math.abs(end.y - start.y), 32);
+  const midX = width / 2;
+  const startX = start.x <= end.x ? 4 : width - 4;
+  const endX = start.x <= end.x ? width - 4 : 4;
+  const startY = start.y <= end.y ? 4 : height - 4;
+  const endY = start.y <= end.y ? height - 4 : 4;
+  const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
 
-    const style = {
-      height,
-      width,
-    } satisfies CSSProperties;
+  const style = {
+    height,
+    width,
+  } satisfies CSSProperties;
 
-    return (
-      <div
-        className={cn("relative inline-flex", className)}
-        ref={ref}
-        style={style}
-        {...props}
+  return (
+    <div
+      className={cn("relative inline-flex", className)}
+      ref={ref}
+      style={style}
+      {...props}
+    >
+      <svg
+        className="overflow-visible"
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
       >
-        <svg
-          className="overflow-visible"
-          height={height}
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
+        <path
+          className={cn("fill-none stroke-[2.5]", strokeClasses[state])}
+          d={path}
+          strokeDasharray={state === "blocked" ? "4 4" : undefined}
+          strokeLinecap="round"
+        />
+      </svg>
+      {label ? (
+        <EdgeLabel
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          emphasis={state === "active" ? "active" : "subtle"}
         >
-          <path
-            className={cn("fill-none stroke-[2.5]", strokeClasses[state])}
-            d={path}
-            strokeDasharray={state === "blocked" ? "4 4" : undefined}
-            strokeLinecap="round"
-          />
-        </svg>
-        {label ? (
-          <EdgeLabel
-            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            emphasis={state === "active" ? "active" : "subtle"}
-          >
-            {label}
-          </EdgeLabel>
-        ) : null}
-      </div>
-    );
-  },
-);
+          {label}
+        </EdgeLabel>
+      ) : null}
+    </div>
+  );
+};
 
 ConnectorEdge.displayName = "ConnectorEdge";
-
 export { ConnectorEdge };
diff --git a/apps/registry/registry/default/context-lens/context-lens.tsx b/apps/registry/registry/default/context-lens/context-lens.tsx
index efa8f43a..cfd4fdf6 100644
--- a/apps/registry/registry/default/context-lens/context-lens.tsx
+++ b/apps/registry/registry/default/context-lens/context-lens.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef, useId } from "react";
+import { type ComponentPropsWithoutRef, useId } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -79,68 +79,68 @@ const safeRadius = (value: number): number => (value < 0 ? 0 : value);
  *
  * @public
  */
-export const ContextLens = forwardRef<SVGSVGElement, ContextLensProps>(
-  (props, ref) => {
-    const { className, focus, labels, opacity = 0.55, ...rest } = props;
-    const maskId = useId();
-    if (!focus) {
-      return null;
-    }
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const inner = safeRadius(focus.inner);
-    const outer = safeRadius(Math.max(focus.outer, inner));
-    const fillOpacity = clamp01(opacity);
-    return (
-      <svg
-        aria-hidden="true"
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute inset-0 z-20 h-full w-full",
-          className,
-        )}
-        data-context-lens
-        ref={ref}
-        {...rest}
-      >
-        <defs>
-          <radialGradient
-            cx={focus.cx}
-            cy={focus.cy}
-            data-context-lens-gradient
-            gradientUnits="userSpaceOnUse"
-            id={maskId}
-            r={outer === 0 ? 1 : outer}
-          >
-            <stop offset="0%" stopColor="black" stopOpacity={0} />
-            <stop
-              offset={outer === 0 ? "100%" : `${(inner / outer) * 100}%`}
-              stopColor="black"
-              stopOpacity={0}
-            />
-            <stop offset="100%" stopColor="black" stopOpacity={1} />
-          </radialGradient>
-        </defs>
-        <rect
-          data-context-lens-dim
-          fill="black"
-          fillOpacity={fillOpacity}
-          height="100%"
-          mask={`url(#${maskId}-mask)`}
-          width="100%"
-          x={0}
-          y={0}
-        />
-        <mask id={`${maskId}-mask`}>
-          <rect fill="white" height="100%" width="100%" x={0} y={0} />
-          <circle
-            cx={focus.cx}
-            cy={focus.cy}
-            fill={`url(#${maskId})`}
-            r={outer}
+export const ContextLens = (
+  props: ContextLensProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const { className, focus, labels, opacity = 0.55, ref, ...rest } = props;
+  const maskId = useId();
+  if (!focus) {
+    return null;
+  }
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inner = safeRadius(focus.inner);
+  const outer = safeRadius(Math.max(focus.outer, inner));
+  const fillOpacity = clamp01(opacity);
+  return (
+    <svg
+      aria-hidden="true"
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute inset-0 z-20 h-full w-full",
+        className,
+      )}
+      data-context-lens
+      ref={ref}
+      {...rest}
+    >
+      <defs>
+        <radialGradient
+          cx={focus.cx}
+          cy={focus.cy}
+          data-context-lens-gradient
+          gradientUnits="userSpaceOnUse"
+          id={maskId}
+          r={outer === 0 ? 1 : outer}
+        >
+          <stop offset="0%" stopColor="black" stopOpacity={0} />
+          <stop
+            offset={outer === 0 ? "100%" : `${(inner / outer) * 100}%`}
+            stopColor="black"
+            stopOpacity={0}
           />
-        </mask>
-      </svg>
-    );
-  },
-);
+          <stop offset="100%" stopColor="black" stopOpacity={1} />
+        </radialGradient>
+      </defs>
+      <rect
+        data-context-lens-dim
+        fill="black"
+        fillOpacity={fillOpacity}
+        height="100%"
+        mask={`url(#${maskId}-mask)`}
+        width="100%"
+        x={0}
+        y={0}
+      />
+      <mask id={`${maskId}-mask`}>
+        <rect fill="white" height="100%" width="100%" x={0} y={0} />
+        <circle
+          cx={focus.cx}
+          cy={focus.cy}
+          fill={`url(#${maskId})`}
+          r={outer}
+        />
+      </mask>
+    </svg>
+  );
+};
 ContextLens.displayName = "ContextLens";
diff --git a/apps/registry/registry/default/context-menu/context-menu.tsx b/apps/registry/registry/default/context-menu/context-menu.tsx
index 72e412a5..a7293496 100644
--- a/apps/registry/registry/default/context-menu/context-menu.tsx
+++ b/apps/registry/registry/default/context-menu/context-menu.tsx
@@ -1,30 +1,26 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
-
 const ContextMenu = ContextMenuPrimitive.Root;
-
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
 const ContextMenuGroup = ContextMenuPrimitive.Group;
-
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
 const ContextMenuSub = ContextMenuPrimitive.Sub;
-
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
-const ContextMenuSubTrigger = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, ref) => (
+const ContextMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>
+  >) => (
   <ContextMenuPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -37,13 +33,18 @@ const ContextMenuSubTrigger = forwardRef<
     {children}
     <ChevronRight className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
-));
+);
+
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
-const ContextMenuSubContent = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const ContextMenuSubContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.SubContent>
+  >) => (
   <ContextMenuPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -52,13 +53,18 @@ const ContextMenuSubContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
-const ContextMenuContent = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+const ContextMenuContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Content>
+  >) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       className={cn(
@@ -69,15 +75,20 @@ const ContextMenuContent = forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-));
+);
+
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
-const ContextMenuItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const ContextMenuItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Item>
+  >) => (
   <ContextMenuPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -87,13 +98,20 @@ const ContextMenuItem = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
-const ContextMenuCheckboxItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, ref) => (
+const ContextMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>
+  >) => (
   <ContextMenuPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -110,14 +128,20 @@ const ContextMenuCheckboxItem = forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-));
+);
+
 ContextMenuCheckboxItem.displayName =
   ContextMenuPrimitive.CheckboxItem.displayName;
 
-const ContextMenuRadioItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ children, className, ...props }, ref) => (
+const ContextMenuRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>
+  >) => (
   <ContextMenuPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -133,15 +157,20 @@ const ContextMenuRadioItem = forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-));
+);
+
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
-const ContextMenuLabel = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const ContextMenuLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Label>
+  >) => (
   <ContextMenuPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
@@ -151,19 +180,25 @@ const ContextMenuLabel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
-const ContextMenuSeparator = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const ContextMenuSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Separator>
+  >) => (
   <ContextMenuPrimitive.Separator
     className={cn("-m-1 h-px bg-border", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
@@ -180,6 +215,7 @@ const ContextMenuShortcut = ({
     />
   );
 };
+
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
diff --git a/apps/registry/registry/default/copy-button/copy-button.tsx b/apps/registry/registry/default/copy-button/copy-button.tsx
index 75399518..d0ec8641 100644
--- a/apps/registry/registry/default/copy-button/copy-button.tsx
+++ b/apps/registry/registry/default/copy-button/copy-button.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type MouseEvent as ReactMouseEvent,
   type ReactElement,
   type ReactNode,
@@ -166,65 +165,46 @@ type TriggerProps = Omit<
   onClickHandler: (event: ReactMouseEvent<HTMLButtonElement>) => void;
 };
 
-const ButtonTrigger = forwardRef<HTMLButtonElement, TriggerProps>(
-  (
-    {
-      accessibleLabel,
-      className,
-      copied,
-      copiedText,
-      iconClassName,
-      label = "Copy",
-      onClick: _onClick,
-      onClickHandler,
-      value: _value,
-      variant = "icon",
-      ...rest
-    },
-    ref,
-  ) => {
-    if (variant === "button") {
-      return (
-        <Button
-          aria-label={accessibleLabel}
-          className={cn(className)}
-          onClick={onClickHandler}
-          ref={ref}
-          size="sm"
-          type="button"
-          variant="outline"
-          {...rest}
-        >
-          <CopyIcon className={iconClassName} copied={copied} size="sm" />
-          <span>{copied ? copiedText : label}</span>
-        </Button>
-      );
-    }
-
-    if (variant === "inline") {
-      return (
-        <Button
-          aria-label={accessibleLabel}
-          className={cn(
-            "size-6 align-middle text-muted-foreground hover:text-foreground",
-            className,
-          )}
-          onClick={onClickHandler}
-          ref={ref}
-          size="icon"
-          type="button"
-          variant="ghost"
-          {...rest}
-        >
-          <CopyIcon className={iconClassName} copied={copied} size="xs" />
-        </Button>
-      );
-    }
+const ButtonTrigger = ({
+  accessibleLabel,
+  className,
+  copied,
+  copiedText,
+  iconClassName,
+  label = "Copy",
+  onClick: _onClick,
+  onClickHandler,
+  ref,
+  value: _value,
+  variant = "icon",
+  ...rest
+}: TriggerProps & React.RefAttributes<HTMLButtonElement>) => {
+  if (variant === "button") {
+    return (
+      <Button
+        aria-label={accessibleLabel}
+        className={cn(className)}
+        onClick={onClickHandler}
+        ref={ref}
+        size="sm"
+        type="button"
+        variant="outline"
+        {...rest}
+      >
+        <CopyIcon className={iconClassName} copied={copied} size="sm" />
+        <span>{copied ? copiedText : label}</span>
+      </Button>
+    );
+  }
 
+  if (variant === "inline") {
     return (
       <Button
         aria-label={accessibleLabel}
-        className={cn("size-8", className)}
+        className={cn(
+          "size-6 align-middle text-muted-foreground hover:text-foreground",
+          className,
+        )}
         onClick={onClickHandler}
         ref={ref}
         size="icon"
@@ -232,11 +212,26 @@ const ButtonTrigger = forwardRef<HTMLButtonElement, TriggerProps>(
         variant="ghost"
         {...rest}
       >
-        <CopyIcon className={iconClassName} copied={copied} size="sm" />
+        <CopyIcon className={iconClassName} copied={copied} size="xs" />
       </Button>
     );
-  },
-);
+  }
+
+  return (
+    <Button
+      aria-label={accessibleLabel}
+      className={cn("size-8", className)}
+      onClick={onClickHandler}
+      ref={ref}
+      size="icon"
+      type="button"
+      variant="ghost"
+      {...rest}
+    >
+      <CopyIcon className={iconClassName} copied={copied} size="sm" />
+    </Button>
+  );
+};
 ButtonTrigger.displayName = "CopyButton.Trigger";
 
 /**
@@ -255,71 +250,67 @@ ButtonTrigger.displayName = "CopyButton.Trigger";
  *
  * @public
  */
-export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
-  (
-    {
-      "aria-label": ariaLabelOverride,
-      copiedLabel = "Copied!",
-      label = "Copy",
-      onClick,
-      showTooltip = true,
-      timeout = FALLBACK_TIMEOUT_MS,
-      value,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { copied, copy } = useCopyToClipboard({ timeout });
-
-    const handleClick = useCallback(
-      (event: ReactMouseEvent<HTMLButtonElement>) => {
-        onClick?.(event);
-        if (event.defaultPrevented) return;
-        void copy(value);
-      },
-      [copy, onClick, value],
-    );
+export const CopyButton = ({
+  "aria-label": ariaLabelOverride,
+  copiedLabel = "Copied!",
+  label = "Copy",
+  onClick,
+  ref,
+  showTooltip = true,
+  timeout = FALLBACK_TIMEOUT_MS,
+  value,
+  ...rest
+}: CopyButtonProps & React.RefAttributes<HTMLButtonElement>) => {
+  const { copied, copy } = useCopyToClipboard({ timeout });
 
-    const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
-    const tooltipText = copied ? copiedLabel : label;
+  const handleClick = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      void copy(value);
+    },
+    [copy, onClick, value],
+  );
 
-    const trigger: ReactElement = (
-      <ButtonTrigger
-        {...rest}
-        accessibleLabel={accessibleLabel}
-        copied={copied}
-        copiedText={copiedLabel}
-        label={label}
-        onClickHandler={handleClick}
-        ref={ref}
-        value={value}
-      />
-    );
+  const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
+  const tooltipText = copied ? copiedLabel : label;
 
-    const liveRegion = (
-      <span aria-live="polite" className="sr-only" role="status">
-        {copied ? copiedLabel : ""}
-      </span>
-    );
+  const trigger: ReactElement = (
+    <ButtonTrigger
+      {...rest}
+      accessibleLabel={accessibleLabel}
+      copied={copied}
+      copiedText={copiedLabel}
+      label={label}
+      onClickHandler={handleClick}
+      ref={ref}
+      value={value}
+    />
+  );
 
-    if (!showTooltip) {
-      return (
-        <>
-          {trigger}
-          {liveRegion}
-        </>
-      );
-    }
+  const liveRegion = (
+    <span aria-live="polite" className="sr-only" role="status">
+      {copied ? copiedLabel : ""}
+    </span>
+  );
 
+  if (!showTooltip) {
     return (
-      <TooltipProvider delayDuration={200}>
-        <Tooltip>
-          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
-          <TooltipContent>{tooltipText}</TooltipContent>
-        </Tooltip>
+      <>
+        {trigger}
         {liveRegion}
-      </TooltipProvider>
+      </>
     );
-  },
-);
+  }
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>
+      {liveRegion}
+    </TooltipProvider>
+  );
+};
 CopyButton.displayName = "CopyButton";
diff --git a/apps/registry/registry/default/countdown-timer/countdown-timer.tsx b/apps/registry/registry/default/countdown-timer/countdown-timer.tsx
index 261886d0..865b0a9a 100644
--- a/apps/registry/registry/default/countdown-timer/countdown-timer.tsx
+++ b/apps/registry/registry/default/countdown-timer/countdown-timer.tsx
@@ -192,64 +192,54 @@ function TimerProgress({
   );
 }
 
-export const CountdownTimer = React.forwardRef<
-  HTMLDivElement,
-  CountdownTimerProps
->(
-  (
-    {
-      className,
-      deadline,
-      description,
-      now,
-      startedAt,
-      tickMs = 1000,
-      title = "Countdown timer",
-      warningThresholdMs = 15 * 60 * 1000,
-      ...props
-    },
-    ref,
-  ) => {
-    const deadlineDate = React.useMemo(
-      () => normalizeDate(deadline),
-      [deadline],
-    );
-    const startedAtDate = React.useMemo(
-      () => (startedAt ? normalizeDate(startedAt) : undefined),
-      [startedAt],
-    );
-    const liveNow = useLiveDate(now, tickMs);
-    const remainingMs = getRemainingMs(deadlineDate, liveNow);
-    const status = getStatus(remainingMs, warningThresholdMs);
-    const segments = formatSegments(Math.abs(remainingMs));
-    const progress = getProgress(deadlineDate, liveNow, startedAtDate);
-
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="space-y-2 pb-3">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <CardTitle className="text-base">{title}</CardTitle>
-              <CardDescription>
-                {description ?? `Deadline ${formatDeadline(deadlineDate)}`}
-              </CardDescription>
-            </div>
-            <Badge variant={status.badgeVariant}>{status.label}</Badge>
+export const CountdownTimer = ({
+  className,
+  deadline,
+  description,
+  now,
+  ref,
+  startedAt,
+  tickMs = 1000,
+  title = "Countdown timer",
+  warningThresholdMs = 15 * 60 * 1000,
+  ...props
+}: CountdownTimerProps & React.RefAttributes<HTMLDivElement>) => {
+  const deadlineDate = React.useMemo(() => normalizeDate(deadline), [deadline]);
+  const startedAtDate = React.useMemo(
+    () => (startedAt ? normalizeDate(startedAt) : undefined),
+    [startedAt],
+  );
+  const liveNow = useLiveDate(now, tickMs);
+  const remainingMs = getRemainingMs(deadlineDate, liveNow);
+  const status = getStatus(remainingMs, warningThresholdMs);
+  const segments = formatSegments(Math.abs(remainingMs));
+  const progress = getProgress(deadlineDate, liveNow, startedAtDate);
+
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="space-y-2 pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <CardTitle className="text-base">{title}</CardTitle>
+            <CardDescription>
+              {description ?? `Deadline ${formatDeadline(deadlineDate)}`}
+            </CardDescription>
           </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <TimerSegments segments={segments} />
-          <TimerProgress
-            progress={progress}
-            remainingMs={remainingMs}
-            segments={segments}
-            startedAt={startedAtDate}
-            toneClassName={status.toneClassName}
-          />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+          <Badge variant={status.badgeVariant}>{status.label}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <TimerSegments segments={segments} />
+        <TimerProgress
+          progress={progress}
+          remainingMs={remainingMs}
+          segments={segments}
+          startedAt={startedAtDate}
+          toneClassName={status.toneClassName}
+        />
+      </CardContent>
+    </Card>
+  );
+};
 
 CountdownTimer.displayName = "CountdownTimer";
diff --git a/apps/registry/registry/default/credit-badge/credit-badge.tsx b/apps/registry/registry/default/credit-badge/credit-badge.tsx
index d4ac743b..83ac00ee 100644
--- a/apps/registry/registry/default/credit-badge/credit-badge.tsx
+++ b/apps/registry/registry/default/credit-badge/credit-badge.tsx
@@ -40,28 +40,33 @@ function getStatusClasses(status: CreditBadgeStatus): string {
   }
 }
 
-export const CreditBadge = React.forwardRef<HTMLSpanElement, CreditBadgeProps>(
-  ({ amount, className, label, status, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getStatusClasses(status),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
-        <span>
-          {amount
-            ? `${amount} • ${label ?? getStatusLabel(status)}`
-            : (label ?? getStatusLabel(status))}
-        </span>
+export const CreditBadge = ({
+  amount,
+  className,
+  label,
+  ref: reference,
+  status,
+  ...props
+}: CreditBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getStatusClasses(status),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span>
+        {amount
+          ? `${amount} • ${label ?? getStatusLabel(status)}`
+          : (label ?? getStatusLabel(status))}
       </span>
-    );
-  },
-);
+    </span>
+  );
+};
 
 CreditBadge.displayName = "CreditBadge";
diff --git a/apps/registry/registry/default/data-list/data-list.tsx b/apps/registry/registry/default/data-list/data-list.tsx
index 63453990..f4f1942a 100644
--- a/apps/registry/registry/default/data-list/data-list.tsx
+++ b/apps/registry/registry/default/data-list/data-list.tsx
@@ -47,76 +47,84 @@ const DataListContext = React.createContext<DataListContextValue>({
 export type DataListProps = React.HTMLAttributes<HTMLDListElement> &
   VariantProps<typeof dataListVariants>;
 
-const DataList = React.forwardRef<HTMLDListElement, DataListProps>(
-  ({ className, density, ...props }, reference) => {
-    const resolvedDensity = density ?? "default";
-    const contextValue = React.useMemo<DataListContextValue>(
-      () => ({ density: resolvedDensity }),
-      [resolvedDensity],
-    );
-
-    return (
-      <DataListContext.Provider value={contextValue}>
-        <dl
-          className={cn(
-            dataListVariants({ density: resolvedDensity }),
-            className,
-          )}
-          ref={reference}
-          {...props}
-        />
-      </DataListContext.Provider>
-    );
-  },
-);
-
-DataList.displayName = "DataList";
-
-export type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof dataListItemVariants>;
-
-const DataListItem = React.forwardRef<HTMLDivElement, DataListItemProps>(
-  ({ className, density, ...props }, reference) => {
-    const context = React.useContext(DataListContext);
-
-    return (
-      <div
+const DataList = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}: DataListProps & React.RefAttributes<HTMLDListElement>) => {
+  const resolvedDensity = density ?? "default";
+  const contextValue = React.useMemo<DataListContextValue>(
+    () => ({ density: resolvedDensity }),
+    [resolvedDensity],
+  );
+
+  return (
+    <DataListContext.Provider value={contextValue}>
+      <dl
         className={cn(
-          dataListItemVariants({ density: density ?? context.density }),
+          dataListVariants({ density: resolvedDensity }),
           className,
         )}
         ref={reference}
         {...props}
       />
-    );
-  },
-);
+    </DataListContext.Provider>
+  );
+};
+
+DataList.displayName = "DataList";
+
+export type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof dataListItemVariants>;
+
+const DataListItem = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}: DataListItemProps & React.RefAttributes<HTMLDivElement>) => {
+  const context = React.use(DataListContext);
+
+  return (
+    <div
+      className={cn(
+        dataListItemVariants({ density: density ?? context.density }),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    />
+  );
+};
 
 DataListItem.displayName = "DataListItem";
 
-const DataListLabel = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(({ className, ...props }, reference) => (
+const DataListLabel = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) => (
   <dt
     className={cn("text-sm font-medium text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 
 DataListLabel.displayName = "DataListLabel";
 
-const DataListValue = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(({ className, ...props }, reference) => (
+const DataListValue = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) => (
   <dd
     className={cn("m-0 text-sm leading-6 text-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 
 DataListValue.displayName = "DataListValue";
 
diff --git a/apps/registry/registry/default/date-picker/date-picker.tsx b/apps/registry/registry/default/date-picker/date-picker.tsx
index 87bd3d69..8610141a 100644
--- a/apps/registry/registry/default/date-picker/date-picker.tsx
+++ b/apps/registry/registry/default/date-picker/date-picker.tsx
@@ -24,72 +24,68 @@ export type DatePickerProps = {
   value?: Date;
 };
 
-const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
-  (
-    {
-      buttonClassName,
-      calendarProps,
-      className,
-      onValueChange,
-      placeholder = "Pick a date",
-      value,
-    },
-    reference,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState<Date | undefined>(
-      value,
-    );
-    const selectedDate = value ?? internalValue;
+const DatePicker = ({
+  buttonClassName,
+  calendarProps,
+  className,
+  onValueChange,
+  placeholder = "Pick a date",
+  ref: reference,
+  value,
+}: DatePickerProps & React.RefAttributes<HTMLButtonElement>) => {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    value,
+  );
+  const selectedDate = value ?? internalValue;
 
-    React.useEffect(() => {
-      if (value !== undefined) {
-        setInternalValue(value);
-      }
-    }, [value]);
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
 
-    const handleSelect = (nextDate: Date | undefined) => {
-      if (value === undefined) {
-        setInternalValue(nextDate);
-      }
+  const handleSelect = (nextDate: Date | undefined) => {
+    if (value === undefined) {
+      setInternalValue(nextDate);
+    }
 
-      onValueChange?.(nextDate);
+    onValueChange?.(nextDate);
 
-      if (nextDate) {
-        setOpen(false);
-      }
-    };
+    if (nextDate) {
+      setOpen(false);
+    }
+  };
 
-    return (
-      <Popover onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <Button
-            className={cn(
-              "w-full justify-start text-left font-normal",
-              !selectedDate && "text-muted-foreground",
-              buttonClassName,
-            )}
-            ref={reference}
-            variant="outline"
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {selectedDate
-              ? defaultDateFormatter.format(selectedDate)
-              : placeholder}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent align="start" className={cn("w-auto p-0", className)}>
-          <Calendar
-            mode="single"
-            onSelect={handleSelect}
-            selected={selectedDate}
-            {...calendarProps}
-          />
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
+            buttonClassName,
+          )}
+          ref={reference}
+          variant="outline"
+        >
+          <CalendarIcon className="mr-2 size-4" />
+          {selectedDate
+            ? defaultDateFormatter.format(selectedDate)
+            : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("w-auto p-0", className)}>
+        <Calendar
+          mode="single"
+          onSelect={handleSelect}
+          selected={selectedDate}
+          {...calendarProps}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker };
diff --git a/apps/registry/registry/default/dialog/dialog.tsx b/apps/registry/registry/default/dialog/dialog.tsx
index 42efe509..424539cd 100644
--- a/apps/registry/registry/default/dialog/dialog.tsx
+++ b/apps/registry/registry/default/dialog/dialog.tsx
@@ -15,10 +15,12 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, reference) => (
+const DialogOverlay = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Overlay>>) => (
   <DialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -27,13 +29,16 @@ const DialogOverlay = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ children, className, ...props }, reference) => (
+const DialogContent = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Content>>) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -51,7 +56,7 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -82,10 +87,12 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, reference) => (
+const DialogTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Title>>) => (
   <DialogPrimitive.Title
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
@@ -94,19 +101,23 @@ const DialogTitle = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, reference) => (
+const DialogDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DialogPrimitive.Description>
+  >) => (
   <DialogPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
diff --git a/apps/registry/registry/default/document-sibling-nav/document-sibling-nav.tsx b/apps/registry/registry/default/document-sibling-nav/document-sibling-nav.tsx
index 0fc9e266..e0803704 100644
--- a/apps/registry/registry/default/document-sibling-nav/document-sibling-nav.tsx
+++ b/apps/registry/registry/default/document-sibling-nav/document-sibling-nav.tsx
@@ -1,11 +1,9 @@
-import {
-  type AnchorHTMLAttributes,
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
+import type {
+  AnchorHTMLAttributes,
+  ComponentPropsWithoutRef,
+  ReactNode,
+} from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -167,10 +165,15 @@ function buildAriaLabel(
  *
  * @public
  */
-export const DocumentSiblingNav = forwardRef<
-  HTMLElement,
-  DocumentSiblingNavProps
->(({ className, labels, next, previous, variant, ...rest }, ref) => {
+export const DocumentSiblingNav = ({
+  className,
+  labels,
+  next,
+  previous,
+  ref,
+  variant,
+  ...rest
+}: DocumentSiblingNavProps & React.RefAttributes<HTMLElement>) => {
   if (!previous && !next) return null;
 
   const resolvedVariant: DocumentSiblingNavVariant = variant ?? "with-title";
@@ -211,7 +214,7 @@ export const DocumentSiblingNav = forwardRef<
       )}
     </nav>
   );
-});
+};
 DocumentSiblingNav.displayName = "DocumentSiblingNav";
 
 export { navVariants as documentSiblingNavVariants };
diff --git a/apps/registry/registry/default/drawer/drawer.tsx b/apps/registry/registry/default/drawer/drawer.tsx
index a7f44045..32a9a6c4 100644
--- a/apps/registry/registry/default/drawer/drawer.tsx
+++ b/apps/registry/registry/default/drawer/drawer.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@vllnt/ui";
@@ -15,30 +12,34 @@ const Drawer = ({
     {...props}
   />
 );
-Drawer.displayName = "Drawer";
 
+Drawer.displayName = "Drawer";
 const DrawerTrigger = DrawerPrimitive.Trigger;
-
 const DrawerPortal = DrawerPrimitive.Portal;
-
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DrawerOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Overlay>>) => (
   <DrawerPrimitive.Overlay
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ children, className, ...props }, ref) => (
+const DrawerContent = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Content>>) => (
   <DrawerPortal>
     <DrawerOverlay />
     <DrawerPrimitive.Content
@@ -53,7 +54,8 @@ const DrawerContent = forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-));
+);
+
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -65,6 +67,7 @@ const DrawerHeader = ({
     {...props}
   />
 );
+
 DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
@@ -76,12 +79,15 @@ const DrawerFooter = ({
     {...props}
   />
 );
+
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DrawerTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Title>>) => (
   <DrawerPrimitive.Title
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
@@ -90,19 +96,25 @@ const DrawerTitle = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DrawerDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DrawerPrimitive.Description>
+  >) => (
   <DrawerPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
diff --git a/apps/registry/registry/default/dropdown-menu/dropdown-menu.tsx b/apps/registry/registry/default/dropdown-menu/dropdown-menu.tsx
index 1c934b9d..d94d6307 100644
--- a/apps/registry/registry/default/dropdown-menu/dropdown-menu.tsx
+++ b/apps/registry/registry/default/dropdown-menu/dropdown-menu.tsx
@@ -18,12 +18,17 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, reference) => (
+const DropdownMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>
+  >) => (
   <DropdownMenuPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
@@ -36,14 +41,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <span className="ml-auto text-xs">›</span>
   </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, reference) => (
+const DropdownMenuSubContent = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>
+  >) => (
   <DropdownMenuPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -52,14 +61,19 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, reference) => (
+const DropdownMenuContent = ({
+  className,
+  ref: reference,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Content>
+  >) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       className={cn(
@@ -71,15 +85,19 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, reference) => (
+const DropdownMenuItem = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Item>
+  >) => (
   <DropdownMenuPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -89,13 +107,19 @@ const DropdownMenuItem = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, reference) => (
+const DropdownMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>
+  >) => (
   <DropdownMenuPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -112,14 +136,19 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ children, className, ...props }, reference) => (
+const DropdownMenuRadioItem = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>
+  >) => (
   <DropdownMenuPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -135,15 +164,19 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, reference) => (
+const DropdownMenuLabel = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Label>
+  >) => (
   <DropdownMenuPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
@@ -153,19 +186,23 @@ const DropdownMenuLabel = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, reference) => (
+const DropdownMenuSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Separator>
+  >) => (
   <DropdownMenuPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
diff --git a/apps/registry/registry/default/edge-label/edge-label.tsx b/apps/registry/registry/default/edge-label/edge-label.tsx
index 70f842f1..c9922503 100644
--- a/apps/registry/registry/default/edge-label/edge-label.tsx
+++ b/apps/registry/registry/default/edge-label/edge-label.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
 
 export type EdgeLabelProps = React.ComponentPropsWithoutRef<"span"> & {
@@ -14,21 +12,23 @@ const emphasisClasses: Record<
   subtle: "border-border/60 bg-background/90 text-muted-foreground",
 };
 
-const EdgeLabel = forwardRef<HTMLSpanElement, EdgeLabelProps>(
-  ({ className, emphasis = "subtle", ...props }, ref) => (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
-        emphasisClasses[emphasis],
-        className,
-      )}
-      data-emphasis={emphasis}
-      ref={ref}
-      {...props}
-    />
-  ),
+const EdgeLabel = ({
+  className,
+  emphasis = "subtle",
+  ref,
+  ...props
+}: EdgeLabelProps & React.RefAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+      emphasisClasses[emphasis],
+      className,
+    )}
+    data-emphasis={emphasis}
+    ref={ref}
+    {...props}
+  />
 );
 
 EdgeLabel.displayName = "EdgeLabel";
-
 export { EdgeLabel };
diff --git a/apps/registry/registry/default/empty-state/empty-state.tsx b/apps/registry/registry/default/empty-state/empty-state.tsx
index 86f5e4d2..74d79b49 100644
--- a/apps/registry/registry/default/empty-state/empty-state.tsx
+++ b/apps/registry/registry/default/empty-state/empty-state.tsx
@@ -1,10 +1,5 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -116,47 +111,41 @@ export type EmptyStateProps = {
  *
  * @public
  */
-export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
-  (
-    {
-      children,
-      className,
-      description,
-      icon,
-      role: roleOverride,
-      size,
-      title,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        className={cn(emptyStateVariants({ size }), className)}
-        ref={ref}
-        role={roleOverride ?? "status"}
-        {...rest}
-      >
-        {icon ? (
-          <span aria-hidden="true" className={cn(iconVariants({ size }))}>
-            {icon}
-          </span>
-        ) : null}
-        {title ? (
-          <h3 className={cn(titleVariants({ size }))}>{title}</h3>
-        ) : null}
-        {description ? (
-          <p className={cn(descriptionVariants({ size }))}>{description}</p>
-        ) : null}
-        {children ? (
-          <div className="mt-2 flex flex-wrap items-center justify-center gap-2">
-            {children}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const EmptyState = ({
+  children,
+  className,
+  description,
+  icon,
+  ref,
+  role: roleOverride,
+  size,
+  title,
+  ...rest
+}: EmptyStateProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(emptyStateVariants({ size }), className)}
+      ref={ref}
+      role={roleOverride ?? "status"}
+      {...rest}
+    >
+      {icon ? (
+        <span aria-hidden="true" className={cn(iconVariants({ size }))}>
+          {icon}
+        </span>
+      ) : null}
+      {title ? <h3 className={cn(titleVariants({ size }))}>{title}</h3> : null}
+      {description ? (
+        <p className={cn(descriptionVariants({ size }))}>{description}</p>
+      ) : null}
+      {children ? (
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-2">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+};
 EmptyState.displayName = "EmptyState";
 
 export { emptyStateVariants };
diff --git a/apps/registry/registry/default/era-comparison/era-comparison.tsx b/apps/registry/registry/default/era-comparison/era-comparison.tsx
index 932422f9..b3dbd6fb 100644
--- a/apps/registry/registry/default/era-comparison/era-comparison.tsx
+++ b/apps/registry/registry/default/era-comparison/era-comparison.tsx
@@ -4,9 +4,8 @@ import {
   type AnchorHTMLAttributes,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
-  useContext,
+  use,
   useMemo,
 } from "react";
 
@@ -72,7 +71,7 @@ const EraColumnContext = createContext<EraColumnContextValue>({
  * @public
  */
 export function useEraColumnColor(): EraColor {
-  return useContext(EraColumnContext).color;
+  return use(EraColumnContext).color;
 }
 
 /**
@@ -107,19 +106,22 @@ export type EraComparisonProps = ComponentPropsWithoutRef<"section">;
  *
  * @public
  */
-export const EraComparison = forwardRef<HTMLElement, EraComparisonProps>(
-  ({ children, className, ...rest }, ref) => (
-    <section
-      className={cn(
-        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
-        className,
-      )}
-      ref={ref}
-      {...rest}
-    >
-      {children}
-    </section>
-  ),
+export const EraComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: EraComparisonProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+      className,
+    )}
+    ref={ref}
+    {...rest}
+  >
+    {children}
+  </section>
 );
 EraComparison.displayName = "EraComparison";
 
@@ -188,44 +190,45 @@ function ColumnHeader({
  *
  * @public
  */
-export const EraColumn = forwardRef<HTMLElement, EraColumnProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "neutral",
-      name,
-      period,
-      region,
-      ...rest
-    } = props;
-    const contextValue = useMemo<EraColumnContextValue>(
-      () => ({ color }),
-      [color],
-    );
-    return (
-      <EraColumnContext.Provider value={contextValue}>
-        <article
-          className={cn(
-            "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
-            className,
-          )}
-          data-color={color}
-          ref={ref}
-          {...rest}
-        >
-          <ColumnHeader
-            color={color}
-            name={name}
-            period={period}
-            region={region}
-          />
-          <div className="flex flex-col gap-3">{children}</div>
-        </article>
-      </EraColumnContext.Provider>
-    );
-  },
-);
+export const EraColumn = (
+  props: EraColumnProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    color = "neutral",
+    name,
+    period,
+    ref,
+    region,
+    ...rest
+  } = props;
+  const contextValue = useMemo<EraColumnContextValue>(
+    () => ({ color }),
+    [color],
+  );
+  return (
+    <EraColumnContext.Provider value={contextValue}>
+      <article
+        className={cn(
+          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+          className,
+        )}
+        data-color={color}
+        ref={ref}
+        {...rest}
+      >
+        <ColumnHeader
+          color={color}
+          name={name}
+          period={period}
+          region={region}
+        />
+        <div className="flex flex-col gap-3">{children}</div>
+      </article>
+    </EraColumnContext.Provider>
+  );
+};
 EraColumn.displayName = "EraColumn";
 
 /**
@@ -244,20 +247,24 @@ export type EraDomainProps = {
  *
  * @public
  */
-export const EraDomain = forwardRef<HTMLElement, EraDomainProps>(
-  ({ children, className, name, ...rest }, ref) => (
-    <section
-      className={cn("flex flex-col gap-2", className)}
-      data-domain={typeof name === "string" ? name : undefined}
-      ref={ref}
-      {...rest}
-    >
-      <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-        {name}
-      </h4>
-      {children}
-    </section>
-  ),
+export const EraDomain = ({
+  children,
+  className,
+  name,
+  ref,
+  ...rest
+}: EraDomainProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn("flex flex-col gap-2", className)}
+    data-domain={typeof name === "string" ? name : undefined}
+    ref={ref}
+    {...rest}
+  >
+    <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+      {name}
+    </h4>
+    {children}
+  </section>
 );
 EraDomain.displayName = "EraDomain";
 
@@ -274,21 +281,24 @@ export type EraHighlightProps = ComponentPropsWithoutRef<"p">;
  *
  * @public
  */
-export const EraHighlight = forwardRef<HTMLParagraphElement, EraHighlightProps>(
-  ({ children, className, ...rest }, ref) => {
-    const color = useEraColumnColor();
-    const palette = ERA_PALETTE[color];
-    return (
-      <p
-        className={cn("rounded-md px-2 py-1 text-sm", palette.chip, className)}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </p>
-    );
-  },
-);
+export const EraHighlight = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: EraHighlightProps & React.RefAttributes<HTMLParagraphElement>) => {
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  return (
+    <p
+      className={cn("rounded-md px-2 py-1 text-sm", palette.chip, className)}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </p>
+  );
+};
 EraHighlight.displayName = "EraHighlight";
 
 type AnchorPassthroughProps = Omit<
@@ -316,32 +326,32 @@ export type EraFigureProps = {
  *
  * @public
  */
-export const EraFigure = forwardRef<HTMLSpanElement, EraFigureProps>(
-  (props, ref) => {
-    const { anchorProps, className, href, name, ...rest } = props;
-    const color = useEraColumnColor();
-    const palette = ERA_PALETTE[color];
-    const baseClass = cn(
-      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-      palette.chip,
-      className,
-    );
-    if (href) {
-      return (
-        <a
-          className={cn(baseClass, "underline-offset-4 hover:underline")}
-          href={href}
-          {...anchorProps}
-        >
-          {name}
-        </a>
-      );
-    }
+export const EraFigure = (
+  props: EraFigureProps & React.RefAttributes<HTMLSpanElement>,
+) => {
+  const { anchorProps, className, href, name, ref, ...rest } = props;
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  const baseClass = cn(
+    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+    palette.chip,
+    className,
+  );
+  if (href) {
     return (
-      <span className={baseClass} ref={ref} {...rest}>
+      <a
+        className={cn(baseClass, "underline-offset-4 hover:underline")}
+        href={href}
+        {...anchorProps}
+      >
         {name}
-      </span>
+      </a>
     );
-  },
-);
+  }
+  return (
+    <span className={baseClass} ref={ref} {...rest}>
+      {name}
+    </span>
+  );
+};
 EraFigure.displayName = "EraFigure";
diff --git a/apps/registry/registry/default/file-upload/file-upload.tsx b/apps/registry/registry/default/file-upload/file-upload.tsx
index 2fb627c9..8c58fe6f 100644
--- a/apps/registry/registry/default/file-upload/file-upload.tsx
+++ b/apps/registry/registry/default/file-upload/file-upload.tsx
@@ -76,7 +76,7 @@ function useFileUploadState(
 }
 
 function assignInputReference(
-  reference: React.ForwardedRef<HTMLInputElement>,
+  reference: React.Ref<HTMLInputElement> | undefined,
   node: HTMLInputElement | null,
 ) {
   if (typeof reference === "function") {
@@ -217,21 +217,19 @@ function FileUploadList({
   );
 }
 
-function FileUploadComponent(
-  {
-    accept,
-    browseLabel = "Choose files",
-    className,
-    disabled,
-    dropzoneText = "Drag and drop files here, or click to browse.",
-    files,
-    helperText = "Supports one or more files.",
-    multiple = true,
-    onFilesChange,
-    ...props
-  }: FileUploadProps,
-  reference: React.ForwardedRef<HTMLInputElement>,
-) {
+function FileUploadComponent({
+  accept,
+  browseLabel = "Choose files",
+  className,
+  disabled,
+  dropzoneText = "Drag and drop files here, or click to browse.",
+  files,
+  helperText = "Supports one or more files.",
+  multiple = true,
+  onFilesChange,
+  ref: reference,
+  ...props
+}: FileUploadProps & React.RefAttributes<HTMLInputElement>) {
   const inputReference = React.useRef<HTMLInputElement | null>(null);
   const [isDragging, setIsDragging] = React.useState(false);
   const { addFiles, removeFile, resolvedFiles } = useFileUploadState(
@@ -280,7 +278,9 @@ function FileUploadComponent(
   );
 }
 
-const FileUpload = React.forwardRef(FileUploadComponent);
+const FileUpload = FileUploadComponent as typeof FileUploadComponent & {
+  displayName?: string;
+};
 FileUpload.displayName = "FileUpload";
 
 export { FileUpload };
diff --git a/apps/registry/registry/default/floating-toolbar/floating-toolbar.tsx b/apps/registry/registry/default/floating-toolbar/floating-toolbar.tsx
index 33d86f13..1ddc1543 100644
--- a/apps/registry/registry/default/floating-toolbar/floating-toolbar.tsx
+++ b/apps/registry/registry/default/floating-toolbar/floating-toolbar.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -91,54 +87,54 @@ export type FloatingToolbarProps = {
  *
  * @public
  */
-export const FloatingToolbar = forwardRef<HTMLDivElement, FloatingToolbarProps>(
-  (props, ref) => {
-    const { actions, className, labels, x, y, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
-          className,
-        )}
-        data-floating-toolbar
-        ref={ref}
-        role="toolbar"
-        style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
-        {...rest}
-      >
-        {actions.map((action) => {
-          const variant = action.variant ?? "ghost";
-          const handleClick = (): void => {
-            action.onActivate();
-          };
-          return (
-            <button
-              aria-label={action.ariaLabel ?? undefined}
-              className={cn(
-                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                VARIANT_CLASSES[variant],
-                action.disabled ? "cursor-not-allowed opacity-50" : "",
-              )}
-              data-action-id={action.id}
-              data-variant={variant}
-              disabled={action.disabled}
-              key={action.id}
-              onClick={handleClick}
-              type="button"
-            >
-              {action.glyph ? (
-                <span aria-hidden="true" className="inline-flex size-3">
-                  {action.glyph}
-                </span>
-              ) : null}
-              <span>{action.label}</span>
-            </button>
-          );
-        })}
-      </div>
-    );
-  },
-);
+export const FloatingToolbar = (
+  props: FloatingToolbarProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { actions, className, labels, ref, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+        className,
+      )}
+      data-floating-toolbar
+      ref={ref}
+      role="toolbar"
+      style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
+      {...rest}
+    >
+      {actions.map((action) => {
+        const variant = action.variant ?? "ghost";
+        const handleClick = (): void => {
+          action.onActivate();
+        };
+        return (
+          <button
+            aria-label={action.ariaLabel ?? undefined}
+            className={cn(
+              "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              VARIANT_CLASSES[variant],
+              action.disabled ? "cursor-not-allowed opacity-50" : "",
+            )}
+            data-action-id={action.id}
+            data-variant={variant}
+            disabled={action.disabled}
+            key={action.id}
+            onClick={handleClick}
+            type="button"
+          >
+            {action.glyph ? (
+              <span aria-hidden="true" className="inline-flex size-3">
+                {action.glyph}
+              </span>
+            ) : null}
+            <span>{action.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
 FloatingToolbar.displayName = "FloatingToolbar";
diff --git a/apps/registry/registry/default/follow-mode/follow-mode.tsx b/apps/registry/registry/default/follow-mode/follow-mode.tsx
index 3e97f62b..4140acc2 100644
--- a/apps/registry/registry/default/follow-mode/follow-mode.tsx
+++ b/apps/registry/registry/default/follow-mode/follow-mode.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -78,58 +74,59 @@ export type FollowModeProps = {
  *
  * @public
  */
-export const FollowMode = forwardRef<HTMLDivElement, FollowModeProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "blue",
-      labels,
-      name,
-      onStop,
-      ...rest
-    } = props;
-    const palette = PALETTE[color];
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
+export const FollowMode = (
+  props: FollowModeProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    color = "blue",
+    labels,
+    name,
+    onStop,
+    ref,
+    ...rest
+  } = props;
+  const palette = PALETTE[color];
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative h-full w-full rounded-2xl ring-2 ring-inset",
+        palette.ring,
+        className,
+      )}
+      data-follow-color={color}
+      ref={ref}
+      {...rest}
+    >
       <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative h-full w-full rounded-2xl ring-2 ring-inset",
-          palette.ring,
-          className,
-        )}
-        data-follow-color={color}
-        ref={ref}
-        {...rest}
+        className="pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm"
+        data-follow-chip
       >
-        <div
-          className="pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm"
-          data-follow-chip
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+            palette.chip,
+          )}
         >
-          <span
-            className={cn(
-              "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
-              palette.chip,
-            )}
+          <span aria-hidden="true">▸</span>
+          <span>Following {name}</span>
+        </span>
+        {onStop ? (
+          <button
+            aria-label={resolvedLabels.stop}
+            className="inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={onStop}
+            type="button"
           >
-            <span aria-hidden="true">▸</span>
-            <span>Following {name}</span>
-          </span>
-          {onStop ? (
-            <button
-              aria-label={resolvedLabels.stop}
-              className="inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={onStop}
-              type="button"
-            >
-              {resolvedLabels.stop}
-            </button>
-          ) : null}
-        </div>
-        {children}
+            {resolvedLabels.stop}
+          </button>
+        ) : null}
       </div>
-    );
-  },
-);
+      {children}
+    </div>
+  );
+};
 FollowMode.displayName = "FollowMode";
diff --git a/apps/registry/registry/default/form/form.tsx b/apps/registry/registry/default/form/form.tsx
index b10a44f7..4e21c841 100644
--- a/apps/registry/registry/default/form/form.tsx
+++ b/apps/registry/registry/default/form/form.tsx
@@ -118,7 +118,7 @@ const FormItemContext = React.createContext<FormItemContextValue | undefined>(
 );
 
 function useFormRootContext(componentName: string) {
-  const context = React.useContext(FormRootContext);
+  const context = React.use(FormRootContext);
 
   if (context === undefined) {
     throw new Error(`${componentName} must be used within Form.`);
@@ -128,7 +128,7 @@ function useFormRootContext(componentName: string) {
 }
 
 function useFormItemContext(componentName: string) {
-  const context = React.useContext(FormItemContext);
+  const context = React.use(FormItemContext);
 
   if (context === undefined) {
     throw new Error(`${componentName} must be used within FormItem.`);
@@ -306,7 +306,7 @@ type FormMarkupProps<TFieldValues extends FieldValues> = {
     React.ComponentPropsWithoutRef<"form">,
     "children" | "className" | "onSubmit"
   >;
-  formRef: React.ForwardedRef<HTMLFormElement>;
+  formRef?: React.Ref<HTMLFormElement>;
   handleValidatedSubmit?: ReturnType<
     FormInstance<TFieldValues>["handleSubmit"]
   >;
@@ -352,28 +352,26 @@ function FormMarkup<TFieldValues extends FieldValues>({
   );
 }
 
-function FormInner<TFieldValues extends FieldValues = FieldValues>(
-  {
-    children,
-    className,
-    controlId,
-    defaultValues,
-    descriptionId,
-    disabled = false,
-    form: providedForm,
-    invalid = false,
-    messageId,
-    onError,
-    onSubmit,
-    onValidSubmit,
-    required = false,
-    resolver,
-    schema,
-    values,
-    ...props
-  }: FormProps<TFieldValues>,
-  ref: React.ForwardedRef<HTMLFormElement>,
-) {
+function FormInner<TFieldValues extends FieldValues = FieldValues>({
+  children,
+  className,
+  controlId,
+  defaultValues,
+  descriptionId,
+  disabled = false,
+  form: providedForm,
+  invalid = false,
+  messageId,
+  onError,
+  onSubmit,
+  onValidSubmit,
+  ref,
+  required = false,
+  resolver,
+  schema,
+  values,
+  ...props
+}: FormProps<TFieldValues> & React.RefAttributes<HTMLFormElement>) {
   const internalForm = useForm<TFieldValues>({
     defaultValues,
     resolver:
@@ -419,7 +417,7 @@ function FormInner<TFieldValues extends FieldValues = FieldValues>(
   );
 }
 
-const FormBase = React.forwardRef(FormInner);
+const FormBase = FormInner as typeof FormInner & { displayName?: string };
 FormBase.displayName = "Form";
 
 const Form = FormBase as <TFieldValues extends FieldValues = FieldValues>(
@@ -443,7 +441,7 @@ function FormField<
 }
 
 function useFormField() {
-  const fieldContext = React.useContext(FormFieldContext);
+  const fieldContext = React.use(FormFieldContext);
   const itemContext = useFormItemContext("useFormField");
   const { formState, getFieldState } = useFormContext();
 
@@ -488,88 +486,84 @@ function useFormField() {
   };
 }
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div"> & {
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-  }
->(
-  (
-    {
-      children,
-      className,
-      disabled: itemDisabled,
-      invalid: itemInvalid,
-      required: itemRequired,
-      ...props
-    },
-    ref,
-  ) => {
-    const {
-      controlId: controlIdBase,
-      descriptionId: descriptionIdBase,
-      disabled,
-      invalid,
-      messageId: messageIdBase,
-      required,
-    } = useFormRootContext("FormItem");
-    const generatedId = React.useId();
-    const hasDescription = hasRenderedFormChild(children, "FormDescription");
-    const hasMessage = hasRenderedFormChild(children, "FormMessage");
-    const hasMessageSlot = hasFormChild(children, "FormMessage");
-
-    const effectiveDisabled = itemDisabled ?? disabled;
-    const effectiveInvalid = itemInvalid ?? invalid;
-    const effectiveRequired = itemRequired ?? required;
-
-    const value = React.useMemo<FormItemContextValue>(
-      () => ({
-        controlId: resolveItemId(controlIdBase, generatedId, "control"),
-        descriptionId: resolveItemId(
-          descriptionIdBase,
-          generatedId,
-          "description",
-        ),
-        disabled: effectiveDisabled,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        id: generatedId,
-        invalid: effectiveInvalid,
-        messageId: resolveItemId(messageIdBase, generatedId, "message"),
-        required: effectiveRequired,
-      }),
-      [
-        controlIdBase,
+const FormItem = ({
+  children,
+  className,
+  disabled: itemDisabled,
+  invalid: itemInvalid,
+  ref,
+  required: itemRequired,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & {
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+} & React.RefAttributes<HTMLDivElement>) => {
+  const {
+    controlId: controlIdBase,
+    descriptionId: descriptionIdBase,
+    disabled,
+    invalid,
+    messageId: messageIdBase,
+    required,
+  } = useFormRootContext("FormItem");
+  const generatedId = React.useId();
+  const hasDescription = hasRenderedFormChild(children, "FormDescription");
+  const hasMessage = hasRenderedFormChild(children, "FormMessage");
+  const hasMessageSlot = hasFormChild(children, "FormMessage");
+
+  const effectiveDisabled = itemDisabled ?? disabled;
+  const effectiveInvalid = itemInvalid ?? invalid;
+  const effectiveRequired = itemRequired ?? required;
+
+  const value = React.useMemo<FormItemContextValue>(
+    () => ({
+      controlId: resolveItemId(controlIdBase, generatedId, "control"),
+      descriptionId: resolveItemId(
         descriptionIdBase,
-        effectiveDisabled,
-        effectiveInvalid,
-        effectiveRequired,
         generatedId,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        messageIdBase,
-      ],
-    );
-
-    return (
-      <FormItemContext.Provider value={value}>
-        <div className={cn("space-y-2", className)} ref={ref} {...props}>
-          {children}
-        </div>
-      </FormItemContext.Provider>
-    );
-  },
-);
+        "description",
+      ),
+      disabled: effectiveDisabled,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      id: generatedId,
+      invalid: effectiveInvalid,
+      messageId: resolveItemId(messageIdBase, generatedId, "message"),
+      required: effectiveRequired,
+    }),
+    [
+      controlIdBase,
+      descriptionIdBase,
+      effectiveDisabled,
+      effectiveInvalid,
+      effectiveRequired,
+      generatedId,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      messageIdBase,
+    ],
+  );
+
+  return (
+    <FormItemContext.Provider value={value}>
+      <div className={cn("space-y-2", className)} ref={ref} {...props}>
+        {children}
+      </div>
+    </FormItemContext.Provider>
+  );
+};
 FormItem.displayName = "FormItem";
 
-const FormLabel = React.forwardRef<
-  React.ComponentRef<typeof Label>,
-  React.ComponentPropsWithoutRef<typeof Label>
->(({ className, htmlFor, ...props }, ref) => {
+const FormLabel = ({
+  className,
+  htmlFor,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Label> &
+  React.RefAttributes<React.ComponentRef<typeof Label>>) => {
   const { formItemId, invalid } = useFormField();
 
   return (
@@ -581,7 +575,7 @@ const FormLabel = React.forwardRef<
       {...props}
     />
   );
-});
+};
 FormLabel.displayName = "FormLabel";
 
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot> & {
@@ -589,73 +583,73 @@ type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot> & {
   required?: boolean;
 };
 
-const FormControl = React.forwardRef<HTMLElement, FormControlProps>(
-  (
-    { disabled: controlDisabled, id: _id, required: controlRequired, ...props },
-    ref,
-  ) => {
-    const {
-      disabled,
-      error,
-      formDescriptionId,
-      formItemId,
-      formMessageId,
-      hasDescription,
-      hasMessage,
-      hasMessageSlot,
-      invalid,
-      required,
-    } = useFormField();
-    const { formState } = useFormContext();
-    const hasErrorMessage = hasVisibleContent(error?.message);
-    const describedBy = composeIds(
-      props["aria-describedby"],
-      hasDescription ? formDescriptionId : undefined,
-      error === undefined
-        ? hasMessage && invalid
-          ? formMessageId
-          : undefined
-        : hasMessageSlot && hasErrorMessage
-          ? formMessageId
-          : undefined,
-    );
-    const effectiveDisabled =
-      controlDisabled ?? (disabled || formState.isSubmitting);
-    const effectiveRequired = controlRequired ?? required;
-    const nativeConstraintProps: {
-      disabled?: boolean;
-      required?: boolean;
-    } = {
-      disabled: effectiveDisabled || undefined,
-      required: effectiveRequired || undefined,
-    };
+const FormControl = ({
+  disabled: controlDisabled,
+  id: _id,
+  ref,
+  required: controlRequired,
+  ...props
+}: FormControlProps & React.RefAttributes<HTMLElement>) => {
+  const {
+    disabled,
+    error,
+    formDescriptionId,
+    formItemId,
+    formMessageId,
+    hasDescription,
+    hasMessage,
+    hasMessageSlot,
+    invalid,
+    required,
+  } = useFormField();
+  const { formState } = useFormContext();
+  const hasErrorMessage = hasVisibleContent(error?.message);
+  const describedBy = composeIds(
+    props["aria-describedby"],
+    hasDescription ? formDescriptionId : undefined,
+    error === undefined
+      ? hasMessage && invalid
+        ? formMessageId
+        : undefined
+      : hasMessageSlot && hasErrorMessage
+        ? formMessageId
+        : undefined,
+  );
+  const effectiveDisabled =
+    controlDisabled ?? (disabled || formState.isSubmitting);
+  const effectiveRequired = controlRequired ?? required;
+  const nativeConstraintProps: {
+    disabled?: boolean;
+    required?: boolean;
+  } = {
+    disabled: effectiveDisabled || undefined,
+    required: effectiveRequired || undefined,
+  };
 
-    return (
-      <Slot
-        {...props}
-        {...nativeConstraintProps}
-        aria-describedby={describedBy}
-        aria-disabled={
-          props["aria-disabled"] ?? (effectiveDisabled || undefined)
-        }
-        aria-invalid={props["aria-invalid"] ?? (invalid || undefined)}
-        aria-required={
-          props["aria-required"] ?? (effectiveRequired || undefined)
-        }
-        data-disabled={effectiveDisabled ? "true" : undefined}
-        data-invalid={invalid ? "true" : undefined}
-        id={formItemId}
-        ref={ref}
-      />
-    );
-  },
-);
+  return (
+    <Slot
+      {...props}
+      {...nativeConstraintProps}
+      aria-describedby={describedBy}
+      aria-disabled={props["aria-disabled"] ?? (effectiveDisabled || undefined)}
+      aria-invalid={props["aria-invalid"] ?? (invalid || undefined)}
+      aria-required={props["aria-required"] ?? (effectiveRequired || undefined)}
+      data-disabled={effectiveDisabled ? "true" : undefined}
+      data-invalid={invalid ? "true" : undefined}
+      id={formItemId}
+      ref={ref}
+    />
+  );
+};
 FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<"p">
->(({ className, id: _id, ...props }, ref) => {
+const FormDescription = ({
+  className,
+  id: _id,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"p"> &
+  React.RefAttributes<HTMLParagraphElement>) => {
   const { formDescriptionId } = useFormField();
 
   return (
@@ -666,13 +660,17 @@ const FormDescription = React.forwardRef<
       ref={ref}
     />
   );
-});
+};
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<"p">
->(({ children, className, id: _id, ...props }, ref) => {
+const FormMessage = ({
+  children,
+  className,
+  id: _id,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"p"> &
+  React.RefAttributes<HTMLParagraphElement>) => {
   const { error, formMessageId, invalid } = useFormField();
   const body = error?.message ?? children;
 
@@ -695,7 +693,7 @@ const FormMessage = React.forwardRef<
       {body}
     </p>
   );
-});
+};
 FormMessage.displayName = "FormMessage";
 
 export {
diff --git a/apps/registry/registry/default/gantt-chart/gantt-chart.tsx b/apps/registry/registry/default/gantt-chart/gantt-chart.tsx
index 11dc49f7..10cde1ad 100644
--- a/apps/registry/registry/default/gantt-chart/gantt-chart.tsx
+++ b/apps/registry/registry/default/gantt-chart/gantt-chart.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -530,47 +525,48 @@ function TimelineColumn({
  *
  * @public
  */
-export const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
-  (props, ref) => {
-    const {
-      className,
-      endDate,
-      groups,
-      labels,
-      locale = DEFAULT_LOCALE,
-      milestones = [],
-      now,
-      scale = "month",
-      startDate,
-      taskColumnWidth = 200,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const geometry = useChartGeometry({ endDate, locale, scale, startDate });
-    const nowDate = useMemo(() => (now ? toDate(now) : new Date()), [now]);
-
-    return (
-      <div
-        className={cn(
-          "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <LeftColumn groups={groups} taskColumnWidth={taskColumnWidth} />
-        <TimelineColumn
-          geometry={geometry}
-          groups={groups}
-          labels={resolvedLabels}
-          milestones={milestones}
-          now={nowDate}
-        />
-      </div>
-    );
-  },
-);
+export const GanttChart = (
+  props: GanttChartProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    endDate,
+    groups,
+    labels,
+    locale = DEFAULT_LOCALE,
+    milestones = [],
+    now,
+    ref,
+    scale = "month",
+    startDate,
+    taskColumnWidth = 200,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const geometry = useChartGeometry({ endDate, locale, scale, startDate });
+  const nowDate = useMemo(() => (now ? toDate(now) : new Date()), [now]);
+
+  return (
+    <div
+      className={cn(
+        "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <LeftColumn groups={groups} taskColumnWidth={taskColumnWidth} />
+      <TimelineColumn
+        geometry={geometry}
+        groups={groups}
+        labels={resolvedLabels}
+        milestones={milestones}
+        now={nowDate}
+      />
+    </div>
+  );
+};
 GanttChart.displayName = "GanttChart";
diff --git a/apps/registry/registry/default/geography-quiz-map/geography-quiz-map.tsx b/apps/registry/registry/default/geography-quiz-map/geography-quiz-map.tsx
index c2dde44f..403f9945 100644
--- a/apps/registry/registry/default/geography-quiz-map/geography-quiz-map.tsx
+++ b/apps/registry/registry/default/geography-quiz-map/geography-quiz-map.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -97,7 +96,7 @@ type QuizCtx = {
 const QuizContext = createContext<null | QuizCtx>(null);
 
 function useQuizContext(): QuizCtx {
-  const ctx = useContext(QuizContext);
+  const ctx = use(QuizContext);
   if (!ctx) {
     throw new Error("GeographyQuizMap subcomponent used outside its root.");
   }
@@ -272,10 +271,11 @@ function Stage({
  *
  * @public
  */
-export const GeographyQuizMapPrompt = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapPrompt = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { current, phase } = useQuizContext();
   if (phase !== "playing" || !current) return null;
   return (
@@ -291,7 +291,7 @@ export const GeographyQuizMapPrompt = forwardRef<
       {current.prompt}
     </div>
   );
-});
+};
 GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
 
 /**
@@ -299,10 +299,11 @@ GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
  *
  * @public
  */
-export const GeographyQuizMapScore = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapScore = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { answers, totalQuestions } = useQuizContext();
   const correct = answers.filter((entry) => entry.correct).length;
   const accuracy =
@@ -320,7 +321,7 @@ export const GeographyQuizMapScore = forwardRef<
       {`${correct.toString()} / ${totalQuestions.toString()} · ${accuracy.toString()}%`}
     </div>
   );
-});
+};
 GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
 
 /**
@@ -329,10 +330,11 @@ GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
  *
  * @public
  */
-export const GeographyQuizMapResults = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapResults = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { answers, phase, totalQuestions } = useQuizContext();
   if (phase !== "complete") return null;
   const correct = answers.filter((entry) => entry.correct).length;
@@ -369,7 +371,7 @@ export const GeographyQuizMapResults = forwardRef<
       </ol>
     </div>
   );
-});
+};
 GeographyQuizMapResults.displayName = "GeographyQuizMapResults";
 
 type QuizState = {
@@ -476,77 +478,79 @@ function scheduleAdvance(
  *
  * @public
  */
-export const GeographyQuizMap = forwardRef<HTMLElement, GeographyQuizMapProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      children,
-      className,
-      labels,
-      onComplete,
-      questions,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const { handleSelect, state } = useQuizState({ onComplete, questions });
-
-    const phase: Phase =
-      state.questionIndex >= questions.length ? "complete" : "playing";
-    const current = questions[state.questionIndex];
-
-    const ctx = useMemo<QuizCtx>(
-      () => ({
-        answers: state.answers,
-        current,
-        feedback: state.feedback,
-        phase,
-        questionIndex: state.questionIndex,
-        totalQuestions: questions.length,
-      }),
-      [
-        current,
-        phase,
-        questions.length,
-        state.answers,
-        state.feedback,
-        state.questionIndex,
-      ],
-    );
-
-    return (
-      <QuizContext.Provider value={ctx}>
-        <section
-          aria-labelledby={titleId}
-          className={cn(
-            "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          <span className="sr-only" id={titleId}>
-            {resolvedLabels.region}
-          </span>
-          <Stage
-            backdrop={backdrop}
-            backdropAlt={backdropAlt}
-            current={current}
-            disabled={phase === "complete" || Boolean(state.feedback)}
-            feedback={state.feedback}
-            onSelect={handleSelect}
-            regions={regions}
-            selectedRegionId={state.selectedRegionId}
-          />
-          {children}
-        </section>
-      </QuizContext.Provider>
-    );
-  },
-);
+// eslint-disable-next-line max-lines-per-function
+export const GeographyQuizMap = (
+  props: GeographyQuizMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    labels,
+    onComplete,
+    questions,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const { handleSelect, state } = useQuizState({ onComplete, questions });
+
+  const phase: Phase =
+    state.questionIndex >= questions.length ? "complete" : "playing";
+  const current = questions[state.questionIndex];
+
+  const ctx = useMemo<QuizCtx>(
+    () => ({
+      answers: state.answers,
+      current,
+      feedback: state.feedback,
+      phase,
+      questionIndex: state.questionIndex,
+      totalQuestions: questions.length,
+    }),
+    [
+      current,
+      phase,
+      questions.length,
+      state.answers,
+      state.feedback,
+      state.questionIndex,
+    ],
+  );
+
+  return (
+    <QuizContext.Provider value={ctx}>
+      <section
+        aria-labelledby={titleId}
+        className={cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <span className="sr-only" id={titleId}>
+          {resolvedLabels.region}
+        </span>
+        <Stage
+          backdrop={backdrop}
+          backdropAlt={backdropAlt}
+          current={current}
+          disabled={phase === "complete" || Boolean(state.feedback)}
+          feedback={state.feedback}
+          onSelect={handleSelect}
+          regions={regions}
+          selectedRegionId={state.selectedRegionId}
+        />
+        {children}
+      </section>
+    </QuizContext.Provider>
+  );
+};
 GeographyQuizMap.displayName = "GeographyQuizMap";
diff --git a/apps/registry/registry/default/globe-3d/globe-3d.tsx b/apps/registry/registry/default/globe-3d/globe-3d.tsx
index 4d2ce555..aa9cb63e 100644
--- a/apps/registry/registry/default/globe-3d/globe-3d.tsx
+++ b/apps/registry/registry/default/globe-3d/globe-3d.tsx
@@ -4,13 +4,12 @@ import {
   Children,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   isValidElement,
   type PointerEvent as ReactPointerEvent,
   type ReactElement,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -126,7 +125,7 @@ type Ctx = {
 const GlobeContext = createContext<Ctx | null>(null);
 
 function useGlobeContext(): Ctx {
-  const ctx = useContext(GlobeContext);
+  const ctx = use(GlobeContext);
   if (!ctx) {
     throw new Error("Globe3D subcomponent used outside its root.");
   }
@@ -157,40 +156,40 @@ export type GlobeMarkerProps = {
  *
  * @public
  */
-export const GlobeMarker = forwardRef<SVGGElement, GlobeMarkerProps>(
-  (props, ref) => {
-    const { color = "red", id, label, lat, lng, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const projected = project({ lat, lng }, rotationLng, rotationLat);
-    if (!projected.visible) return null;
-    const palette = PALETTE[color];
-    return (
-      <g
-        data-marker-id={id}
-        data-marker-visible="true"
-        ref={ref}
-        transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
-        {...rest}
-      >
-        <circle
-          className={cn("stroke-background", palette.fill)}
-          r="5"
-          strokeWidth="1.5"
-        />
-        {label ? (
-          <text
-            className="select-none fill-foreground text-[10px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="-10"
-          >
-            {label}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+export const GlobeMarker = (
+  props: GlobeMarkerProps & React.RefAttributes<SVGGElement>,
+) => {
+  const { color = "red", id, label, lat, lng, ref, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const projected = project({ lat, lng }, rotationLng, rotationLat);
+  if (!projected.visible) return null;
+  const palette = PALETTE[color];
+  return (
+    <g
+      data-marker-id={id}
+      data-marker-visible="true"
+      ref={ref}
+      transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
+      {...rest}
+    >
+      <circle
+        className={cn("stroke-background", palette.fill)}
+        r="5"
+        strokeWidth="1.5"
+      />
+      {label ? (
+        <text
+          className="select-none fill-foreground text-[10px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="-10"
+        >
+          {label}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 GlobeMarker.displayName = "GlobeMarker";
 
 /**
@@ -246,27 +245,27 @@ function buildArc(arguments_: {
  *
  * @public
  */
-export const GlobeArc = forwardRef<SVGPathElement, GlobeArcProps>(
-  (props, ref) => {
-    const { color = "cyan", from, id, strokeWidth = 2, to, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const path = buildArc({ from, rotationLat, rotationLng, to });
-    if (!path) return null;
-    const palette = PALETTE[color];
-    return (
-      <path
-        className={cn("fill-none", palette.stroke)}
-        d={path}
-        data-arc-id={id}
-        ref={ref}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={strokeWidth}
-        {...rest}
-      />
-    );
-  },
-);
+export const GlobeArc = (
+  props: GlobeArcProps & React.RefAttributes<SVGPathElement>,
+) => {
+  const { color = "cyan", from, id, ref, strokeWidth = 2, to, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const path = buildArc({ from, rotationLat, rotationLng, to });
+  if (!path) return null;
+  const palette = PALETTE[color];
+  return (
+    <path
+      className={cn("fill-none", palette.stroke)}
+      d={path}
+      data-arc-id={id}
+      ref={ref}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      {...rest}
+    />
+  );
+};
 GlobeArc.displayName = "GlobeArc";
 
 type GraticuleProps = {
@@ -570,13 +569,16 @@ function DataSummary({ children, titleId }: DataSummaryProps): ReactNode {
  *
  * @public
  */
-export const Globe3D = forwardRef<HTMLElement, Globe3DProps>((props, ref) => {
+export const Globe3D = (
+  props: Globe3DProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     autoRotate = true,
     children,
     className,
     initialPosition = { lat: 20, lng: 0 },
     labels,
+    ref,
     rotationSpeed = 8,
     ...rest
   } = props;
@@ -638,5 +640,5 @@ export const Globe3D = forwardRef<HTMLElement, Globe3DProps>((props, ref) => {
       </section>
     </GlobeContext.Provider>
   );
-});
+};
 Globe3D.displayName = "Globe3D";
diff --git a/apps/registry/registry/default/group-hull/group-hull.tsx b/apps/registry/registry/default/group-hull/group-hull.tsx
index 238a36c4..af0de977 100644
--- a/apps/registry/registry/default/group-hull/group-hull.tsx
+++ b/apps/registry/registry/default/group-hull/group-hull.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -10,39 +8,44 @@ export type GroupHullProps = React.ComponentPropsWithoutRef<"section"> & {
   title: string;
 };
 
-const GroupHull = forwardRef<HTMLElement, GroupHullProps>(
-  ({ children, className, description, eyebrow, title, ...props }, ref) => (
-    <section
-      className={cn(
-        "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="absolute inset-3 rounded-[1.5rem] border border-border/40" />
-      <div className="relative space-y-1">
-        {eyebrow ? (
-          <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-            {eyebrow}
-          </div>
-        ) : null}
-        <h3 className="text-lg font-semibold tracking-tight text-foreground">
-          {title}
-        </h3>
-        {description ? (
-          <p className="max-w-[48ch] text-sm leading-6 text-muted-foreground">
-            {description}
-          </p>
-        ) : null}
-      </div>
-      <div className="relative flex flex-1 flex-wrap items-start gap-4">
-        {children}
-      </div>
-    </section>
-  ),
+const GroupHull = ({
+  children,
+  className,
+  description,
+  eyebrow,
+  ref,
+  title,
+  ...props
+}: GroupHullProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="absolute inset-3 rounded-[1.5rem] border border-border/40" />
+    <div className="relative space-y-1">
+      {eyebrow ? (
+        <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+          {eyebrow}
+        </div>
+      ) : null}
+      <h3 className="text-lg font-semibold tracking-tight text-foreground">
+        {title}
+      </h3>
+      {description ? (
+        <p className="max-w-[48ch] text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
+    </div>
+    <div className="relative flex flex-1 flex-wrap items-start gap-4">
+      {children}
+    </div>
+  </section>
 );
 
 GroupHull.displayName = "GroupHull";
-
 export { GroupHull };
diff --git a/apps/registry/registry/default/handoff-beacon/handoff-beacon.tsx b/apps/registry/registry/default/handoff-beacon/handoff-beacon.tsx
index 81f99a51..57f63a8e 100644
--- a/apps/registry/registry/default/handoff-beacon/handoff-beacon.tsx
+++ b/apps/registry/registry/default/handoff-beacon/handoff-beacon.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -81,60 +77,61 @@ export type HandoffBeaconProps = {
  *
  * @public
  */
-export const HandoffBeacon = forwardRef<HTMLDivElement, HandoffBeaconProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      level = "info",
-      message,
-      source,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
+export const HandoffBeacon = (
+  props: HandoffBeaconProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    labels,
+    level = "info",
+    message,
+    ref,
+    source,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
+        className,
+      )}
+      data-handoff-level={level}
+      ref={ref}
+      role="status"
+      style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
-          className,
+          "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
+          LEVEL_DOT[level],
+          LEVEL_RING[level],
         )}
-        data-handoff-level={level}
-        ref={ref}
-        role="status"
-        style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
-        {...rest}
-      >
-        <span
-          aria-hidden="true"
-          className={cn(
-            "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
-            LEVEL_DOT[level],
-            LEVEL_RING[level],
-          )}
-        />
-        {source || message ? (
-          <div
-            className="pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md"
-            data-handoff-card
-          >
-            {source ? (
-              <p className="text-foreground">
-                <span className="font-semibold">{source}</span>
-                {message ? (
-                  <span className="text-muted-foreground"> · </span>
-                ) : null}
-                {message ? <span>{message}</span> : null}
-              </p>
-            ) : message ? (
-              <p className="text-foreground">{message}</p>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+      />
+      {source || message ? (
+        <div
+          className="pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md"
+          data-handoff-card
+        >
+          {source ? (
+            <p className="text-foreground">
+              <span className="font-semibold">{source}</span>
+              {message ? (
+                <span className="text-muted-foreground"> · </span>
+              ) : null}
+              {message ? <span>{message}</span> : null}
+            </p>
+          ) : message ? (
+            <p className="text-foreground">{message}</p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
 HandoffBeacon.displayName = "HandoffBeacon";
diff --git a/apps/registry/registry/default/heat-map-overlay/heat-map-overlay.tsx b/apps/registry/registry/default/heat-map-overlay/heat-map-overlay.tsx
index 878b873b..52eddeee 100644
--- a/apps/registry/registry/default/heat-map-overlay/heat-map-overlay.tsx
+++ b/apps/registry/registry/default/heat-map-overlay/heat-map-overlay.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
   useMemo,
@@ -290,60 +289,61 @@ function Stage({
  *
  * @public
  */
-export const HeatMapOverlay = forwardRef<HTMLElement, HeatMapOverlayProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      blur = 12,
-      children,
-      className,
-      data,
-      gradient = DEFAULT_GRADIENT,
-      labels,
-      opacity = 0.7,
-      radius = 30,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const gradientId = useId();
-    const blurId = useId();
+export const HeatMapOverlay = (
+  props: HeatMapOverlayProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    blur = 12,
+    children,
+    className,
+    data,
+    gradient = DEFAULT_GRADIENT,
+    labels,
+    opacity = 0.7,
+    radius = 30,
+    ref,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const gradientId = useId();
+  const blurId = useId();
 
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const projected = useMemo(() => projectPoints(data), [data]);
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const projected = useMemo(() => projectPoints(data), [data]);
 
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <Stage
-          backdrop={backdrop}
-          backdropAlt={backdropAlt}
-          blur={blur}
-          blurId={blurId}
-          data={projected}
-          gradient={gradient}
-          gradientId={gradientId}
-          opacity={opacity}
-          radius={radius}
-        />
-        {children ? (
-          <div className="absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur">
-            {children}
-          </div>
-        ) : null}
-        <DataSummary data={data} titleId={titleId} />
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <Stage
+        backdrop={backdrop}
+        backdropAlt={backdropAlt}
+        blur={blur}
+        blurId={blurId}
+        data={projected}
+        gradient={gradient}
+        gradientId={gradientId}
+        opacity={opacity}
+        radius={radius}
+      />
+      {children ? (
+        <div className="absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur">
+          {children}
+        </div>
+      ) : null}
+      <DataSummary data={data} titleId={titleId} />
+    </section>
+  );
+};
 HeatMapOverlay.displayName = "HeatMapOverlay";
diff --git a/apps/registry/registry/default/heat-overlay/heat-overlay.tsx b/apps/registry/registry/default/heat-overlay/heat-overlay.tsx
index 035e80b6..3ed509a4 100644
--- a/apps/registry/registry/default/heat-overlay/heat-overlay.tsx
+++ b/apps/registry/registry/default/heat-overlay/heat-overlay.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef, useId } from "react";
+import { type ComponentPropsWithoutRef, useId } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -124,51 +124,52 @@ const HeatBlob = (props: {
  *
  * @public
  */
-export const HeatOverlay = forwardRef<SVGSVGElement, HeatOverlayProps>(
-  (props, ref) => {
-    const {
-      className,
-      defaultTone = "warn",
-      intensity = 48,
-      labels,
-      points,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const gradientId = useId();
-    if (points.length === 0) {
-      return null;
-    }
-    return (
-      <svg
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute inset-0 z-10 h-full w-full",
-          className,
-        )}
-        data-heat-overlay
-        ref={ref}
-        role="img"
-        {...rest}
-      >
-        <defs>
-          <radialGradient cx="50%" cy="50%" id={gradientId} r="50%">
-            <stop offset="0%" stopColor="currentColor" stopOpacity="1" />
-            <stop offset="70%" stopColor="currentColor" stopOpacity="0.4" />
-            <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
-          </radialGradient>
-        </defs>
-        {points.map((point) => (
-          <HeatBlob
-            defaultTone={defaultTone}
-            gradientId={gradientId}
-            intensity={intensity}
-            key={point.id}
-            point={point}
-          />
-        ))}
-      </svg>
-    );
-  },
-);
+export const HeatOverlay = (
+  props: HeatOverlayProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    className,
+    defaultTone = "warn",
+    intensity = 48,
+    labels,
+    points,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const gradientId = useId();
+  if (points.length === 0) {
+    return null;
+  }
+  return (
+    <svg
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute inset-0 z-10 h-full w-full",
+        className,
+      )}
+      data-heat-overlay
+      ref={ref}
+      role="img"
+      {...rest}
+    >
+      <defs>
+        <radialGradient cx="50%" cy="50%" id={gradientId} r="50%">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />
+          <stop offset="70%" stopColor="currentColor" stopOpacity="0.4" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      {points.map((point) => (
+        <HeatBlob
+          defaultTone={defaultTone}
+          gradientId={gradientId}
+          intensity={intensity}
+          key={point.id}
+          point={point}
+        />
+      ))}
+    </svg>
+  );
+};
 HeatOverlay.displayName = "HeatOverlay";
diff --git a/apps/registry/registry/default/historic-timeline/historic-timeline.tsx b/apps/registry/registry/default/historic-timeline/historic-timeline.tsx
index 212c8d0a..489f04da 100644
--- a/apps/registry/registry/default/historic-timeline/historic-timeline.tsx
+++ b/apps/registry/registry/default/historic-timeline/historic-timeline.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -502,59 +497,60 @@ function Legend({ categories }: LegendProps): ReactNode {
  *
  * @public
  */
-export const HistoricTimeline = forwardRef<HTMLElement, HistoricTimelineProps>(
-  (props, ref) => {
-    const {
-      categories = [],
-      className,
-      endYear,
-      eras = [],
-      events = [],
-      labels,
-      periods = [],
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount],
-    );
-
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <Axis ticks={ticks} />
-        <EraLabels endYear={endYear} eras={eras} startYear={startYear} />
-        <PeriodLane
+export const HistoricTimeline = (
+  props: HistoricTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    categories = [],
+    className,
+    endYear,
+    eras = [],
+    events = [],
+    labels,
+    periods = [],
+    ref,
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount],
+  );
+
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <Axis ticks={ticks} />
+      <EraLabels endYear={endYear} eras={eras} startYear={startYear} />
+      <PeriodLane
+        categories={categories}
+        endYear={endYear}
+        periods={periods}
+        startYear={startYear}
+      />
+      <div className="relative">
+        <EraBands endYear={endYear} eras={eras} startYear={startYear} />
+        <EventLane
           categories={categories}
           endYear={endYear}
-          periods={periods}
+          events={events}
           startYear={startYear}
         />
-        <div className="relative">
-          <EraBands endYear={endYear} eras={eras} startYear={startYear} />
-          <EventLane
-            categories={categories}
-            endYear={endYear}
-            events={events}
-            startYear={startYear}
-          />
-        </div>
-        <Legend categories={categories} />
-      </section>
-    );
-  },
-);
+      </div>
+      <Legend categories={categories} />
+    </section>
+  );
+};
 HistoricTimeline.displayName = "HistoricTimeline";
diff --git a/apps/registry/registry/default/historical-figure-card/historical-figure-card.tsx b/apps/registry/registry/default/historical-figure-card/historical-figure-card.tsx
index f87a446a..22b906ce 100644
--- a/apps/registry/registry/default/historical-figure-card/historical-figure-card.tsx
+++ b/apps/registry/registry/default/historical-figure-card/historical-figure-card.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -426,10 +425,9 @@ function FigureLifeBlock({
   );
 }
 
-export const HistoricalFigureCard = forwardRef<
-  HTMLElement,
-  HistoricalFigureCardProps
->((props, ref) => {
+export const HistoricalFigureCard = (
+  props: HistoricalFigureCardProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     biography,
     birth,
@@ -443,6 +441,7 @@ export const HistoricalFigureCard = forwardRef<
     portrait,
     profileHref,
     quote,
+    ref,
     title,
     works,
     ...rest
@@ -502,5 +501,5 @@ export const HistoricalFigureCard = forwardRef<
       ) : null}
     </article>
   );
-});
+};
 HistoricalFigureCard.displayName = "HistoricalFigureCard";
diff --git a/apps/registry/registry/default/hover-card/hover-card.tsx b/apps/registry/registry/default/hover-card/hover-card.tsx
index e5a45a8c..eccd7a4a 100644
--- a/apps/registry/registry/default/hover-card/hover-card.tsx
+++ b/apps/registry/registry/default/hover-card/hover-card.tsx
@@ -1,19 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
 import { cn } from "@vllnt/ui";
-
 const HoverCard = HoverCardPrimitive.Root;
-
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
-const HoverCardContent = forwardRef<
-  React.ComponentRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ align = "center", className, sideOffset = 4, ...props }, ref) => (
+const HoverCardContent = ({
+  align = "center",
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof HoverCardPrimitive.Content>
+  >) => (
   <HoverCardPrimitive.Content
     align={align}
     className={cn(
@@ -24,7 +25,7 @@ const HoverCardContent = forwardRef<
     sideOffset={sideOffset}
     {...props}
   />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+);
 
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 export { HoverCard, HoverCardContent, HoverCardTrigger };
diff --git a/apps/registry/registry/default/infinite-plane/infinite-plane.tsx b/apps/registry/registry/default/infinite-plane/infinite-plane.tsx
index 6f3448df..b6dc7b17 100644
--- a/apps/registry/registry/default/infinite-plane/infinite-plane.tsx
+++ b/apps/registry/registry/default/infinite-plane/infinite-plane.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -107,37 +103,38 @@ const buildBackground = (input: {
  *
  * @public
  */
-export const InfinitePlane = forwardRef<HTMLDivElement, InfinitePlaneProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      labels,
-      pattern = "dot",
-      spacing = 32,
-      translate = { x: 0, y: 0 },
-      zoom = 1,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const background = buildBackground({ pattern, spacing, translate, zoom });
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative h-full w-full overflow-hidden bg-background",
-          className,
-        )}
-        data-infinite-plane
-        data-infinite-plane-pattern={pattern}
-        ref={ref}
-        role="region"
-        style={background}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
+export const InfinitePlane = (
+  props: InfinitePlaneProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    labels,
+    pattern = "dot",
+    ref,
+    spacing = 32,
+    translate = { x: 0, y: 0 },
+    zoom = 1,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const background = buildBackground({ pattern, spacing, translate, zoom });
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative h-full w-full overflow-hidden bg-background",
+        className,
+      )}
+      data-infinite-plane
+      data-infinite-plane-pattern={pattern}
+      ref={ref}
+      role="region"
+      style={background}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
 InfinitePlane.displayName = "InfinitePlane";
diff --git a/apps/registry/registry/default/input-otp/input-otp.tsx b/apps/registry/registry/default/input-otp/input-otp.tsx
index ab5ec2f5..11270154 100644
--- a/apps/registry/registry/default/input-otp/input-otp.tsx
+++ b/apps/registry/registry/default/input-otp/input-otp.tsx
@@ -1,16 +1,19 @@
 "use client";
 
-import { forwardRef, useContext } from "react";
+import { use } from "react";
 
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Dot } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
 
-const InputOTP = forwardRef<
-  React.ComponentRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+const InputOTP = ({
+  className,
+  containerClassName,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof OTPInput> &
+  React.RefAttributes<React.ComponentRef<typeof OTPInput>>) => (
   <OTPInput
     className={cn("disabled:cursor-not-allowed", className)}
     containerClassName={cn(
@@ -20,22 +23,28 @@ const InputOTP = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
 InputOTP.displayName = "InputOTP";
 
-const InputOTPGroup = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
+const InputOTPGroup = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> &
+  React.RefAttributes<React.ComponentRef<"div">>) => (
   <div className={cn("flex items-center", className)} ref={ref} {...props} />
-));
+);
 InputOTPGroup.displayName = "InputOTPGroup";
 
-const InputOTPSlot = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ className, index, ...props }, ref) => {
-  const inputOTPContext = useContext(OTPInputContext);
+const InputOTPSlot = ({
+  className,
+  index,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & {
+  index: number;
+} & React.RefAttributes<React.ComponentRef<"div">>) => {
+  const inputOTPContext = use(OTPInputContext);
   const slot = inputOTPContext.slots[index];
 
   if (!slot) {
@@ -62,17 +71,18 @@ const InputOTPSlot = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 InputOTPSlot.displayName = "InputOTPSlot";
 
-const InputOTPSeparator = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
+const InputOTPSeparator = ({
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> &
+  React.RefAttributes<React.ComponentRef<"div">>) => (
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>
-));
+);
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
diff --git a/apps/registry/registry/default/input/input.tsx b/apps/registry/registry/default/input/input.tsx
index ca9cf581..91b2a102 100644
--- a/apps/registry/registry/default/input/input.tsx
+++ b/apps/registry/registry/default/input/input.tsx
@@ -2,21 +2,24 @@ import * as React from "react";
 
 import { cn } from "@vllnt/ui";
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, reference) => {
-    return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={reference}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
+const Input = ({
+  className,
+  ref: reference,
+  type,
+  ...props
+}: React.ComponentProps<"input"> & React.RefAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      ref={reference}
+      type={type}
+      {...props}
+    />
+  );
+};
 Input.displayName = "Input";
 
 export { Input };
diff --git a/apps/registry/registry/default/interactive-timeline/interactive-timeline.tsx b/apps/registry/registry/default/interactive-timeline/interactive-timeline.tsx
index 150b98d8..600cf6ad 100644
--- a/apps/registry/registry/default/interactive-timeline/interactive-timeline.tsx
+++ b/apps/registry/registry/default/interactive-timeline/interactive-timeline.tsx
@@ -3,12 +3,11 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -196,7 +195,7 @@ type TimelineCtx = {
 const TimelineContext = createContext<null | TimelineCtx>(null);
 
 function useTimelineContext(): TimelineCtx {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("InteractiveTimeline subcomponent used outside its root.");
   }
@@ -647,10 +646,12 @@ function ScrollArea({
  *
  * @public
  */
-export const InteractiveTimelineToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const InteractiveTimelineToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-2 border-b border-border bg-muted/30 px-3 py-2",
@@ -662,7 +663,7 @@ export const InteractiveTimelineToolbar = forwardRef<
   >
     {children}
   </div>
-));
+);
 InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
 
 /**
@@ -670,10 +671,12 @@ InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
  *
  * @public
  */
-export const InteractiveTimelineZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, ...rest }, ref) => {
+export const InteractiveTimelineZoomIn = ({
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useTimelineContext();
   return (
     <button
@@ -690,7 +693,7 @@ export const InteractiveTimelineZoomIn = forwardRef<
       <span aria-hidden="true">+</span>
     </button>
   );
-});
+};
 InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
 
 /**
@@ -698,10 +701,12 @@ InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
  *
  * @public
  */
-export const InteractiveTimelineZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, ...rest }, ref) => {
+export const InteractiveTimelineZoomOut = ({
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useTimelineContext();
   return (
     <button
@@ -718,7 +723,7 @@ export const InteractiveTimelineZoomOut = forwardRef<
       <span aria-hidden="true">−</span>
     </button>
   );
-});
+};
 InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
 
 /**
@@ -727,10 +732,13 @@ InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
  *
  * @public
  */
-export const InteractiveTimelineToday = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ children, className, ...rest }, ref) => {
+export const InteractiveTimelineToday = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { centerToday, labels } = useTimelineContext();
   return (
     <button
@@ -747,7 +755,7 @@ export const InteractiveTimelineToday = forwardRef<
       {children ?? "Today"}
     </button>
   );
-});
+};
 InteractiveTimelineToday.displayName = "InteractiveTimelineToday";
 
 /**
@@ -759,10 +767,12 @@ export type InteractiveTimelineFilterProps = {
   categories: InteractiveTimelineCategory[];
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const InteractiveTimelineFilter = forwardRef<
-  HTMLDivElement,
-  InteractiveTimelineFilterProps
->(({ categories, className, ...rest }, ref) => {
+export const InteractiveTimelineFilter = ({
+  categories,
+  className,
+  ref,
+  ...rest
+}: InteractiveTimelineFilterProps & React.RefAttributes<HTMLDivElement>) => {
   const { toggleCategory, visibleCategories } = useTimelineContext();
   return (
     <div
@@ -794,7 +804,7 @@ export const InteractiveTimelineFilter = forwardRef<
       })}
     </div>
   );
-});
+};
 InteractiveTimelineFilter.displayName = "InteractiveTimelineFilter";
 
 const FALLBACK_TRACK: InteractiveTimelineTrack = {
@@ -1000,10 +1010,10 @@ function useTimelineFilter(
  *
  * @public
  */
-export const InteractiveTimeline = forwardRef<
-  HTMLElement,
-  InteractiveTimelineProps
->((props, ref) => {
+// eslint-disable-next-line max-lines-per-function
+export const InteractiveTimeline = (
+  props: InteractiveTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     categories = [],
     children,
@@ -1012,6 +1022,7 @@ export const InteractiveTimeline = forwardRef<
     events = [],
     labels,
     onEventClick = noop,
+    ref,
     startDate,
     tracks: trackProperty,
     ...rest
@@ -1077,5 +1088,5 @@ export const InteractiveTimeline = forwardRef<
       </section>
     </TimelineContext.Provider>
   );
-});
+};
 InteractiveTimeline.displayName = "InteractiveTimeline";
diff --git a/apps/registry/registry/default/jarvis-dock/jarvis-dock.tsx b/apps/registry/registry/default/jarvis-dock/jarvis-dock.tsx
index faf8f070..c8f22650 100644
--- a/apps/registry/registry/default/jarvis-dock/jarvis-dock.tsx
+++ b/apps/registry/registry/default/jarvis-dock/jarvis-dock.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -132,43 +128,43 @@ const ActionButton = (props: {
  *
  * @public
  */
-export const JarvisDock = forwardRef<HTMLElement, JarvisDockProps>(
-  (props, ref) => {
-    const { actions, className, labels, onOpenPalette, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const handlePalette = (): void => {
-      onOpenPalette?.();
-    };
-    return (
-      <nav
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
-          className,
-        )}
-        data-jarvis-dock
-        ref={ref}
-        {...rest}
-      >
-        {actions.map((action) => (
-          <ActionButton action={action} key={action.id} />
-        ))}
-        {onOpenPalette ? (
-          <>
-            <span aria-hidden="true" className="mx-1 h-8 w-px bg-border" />
-            <button
-              aria-label={resolvedLabels.paletteTrigger}
-              className="flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              data-jarvis-palette-trigger
-              onClick={handlePalette}
-              type="button"
-            >
-              <span aria-hidden="true">⌘</span>
-            </button>
-          </>
-        ) : null}
-      </nav>
-    );
-  },
-);
+export const JarvisDock = (
+  props: JarvisDockProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { actions, className, labels, onOpenPalette, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const handlePalette = (): void => {
+    onOpenPalette?.();
+  };
+  return (
+    <nav
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
+        className,
+      )}
+      data-jarvis-dock
+      ref={ref}
+      {...rest}
+    >
+      {actions.map((action) => (
+        <ActionButton action={action} key={action.id} />
+      ))}
+      {onOpenPalette ? (
+        <>
+          <span aria-hidden="true" className="mx-1 h-8 w-px bg-border" />
+          <button
+            aria-label={resolvedLabels.paletteTrigger}
+            className="flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            data-jarvis-palette-trigger
+            onClick={handlePalette}
+            type="button"
+          >
+            <span aria-hidden="true">⌘</span>
+          </button>
+        </>
+      ) : null}
+    </nav>
+  );
+};
 JarvisDock.displayName = "JarvisDock";
diff --git a/apps/registry/registry/default/kbd/kbd.tsx b/apps/registry/registry/default/kbd/kbd.tsx
index ffdf946c..476bfdfd 100644
--- a/apps/registry/registry/default/kbd/kbd.tsx
+++ b/apps/registry/registry/default/kbd/kbd.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useSyncExternalStore,
 } from "react";
@@ -123,52 +122,49 @@ export type KbdProps = {
  *
  * @public
  */
-export const Kbd = forwardRef<HTMLElement, KbdProps>(
-  ({ children, className, shortcut, size, ...rest }, ref) => {
-    const isMac = useIsMac();
-
-    if (children !== undefined) {
-      return (
-        <kbd
-          className={cn(kbdVariants({ size }), className)}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </kbd>
-      );
-    }
-
-    if (shortcut) {
-      const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
-      const ariaLabel = tokens
-        .map((token) => formatToken(token, isMac))
-        .join(" + ");
-      return (
-        <span aria-label={ariaLabel} className="inline-flex items-center gap-1">
-          {tokens.map((token, index) => (
-            <kbd
-              className={cn(kbdVariants({ size }), className)}
-              key={`${token}-${index.toString()}`}
-              ref={index === 0 ? ref : undefined}
-              {...(index === 0 ? rest : {})}
-            >
-              {formatToken(token, isMac)}
-            </kbd>
-          ))}
-        </span>
-      );
-    }
+export const Kbd = ({
+  children,
+  className,
+  ref,
+  shortcut,
+  size,
+  ...rest
+}: KbdProps & React.RefAttributes<HTMLElement>) => {
+  const isMac = useIsMac();
+
+  if (children !== undefined) {
+    return (
+      <kbd className={cn(kbdVariants({ size }), className)} ref={ref} {...rest}>
+        {children}
+      </kbd>
+    );
+  }
 
+  if (shortcut) {
+    const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
+    const ariaLabel = tokens
+      .map((token) => formatToken(token, isMac))
+      .join(" + ");
     return (
-      <kbd
-        className={cn(kbdVariants({ size }), className)}
-        ref={ref}
-        {...rest}
-      />
+      <span aria-label={ariaLabel} className="inline-flex items-center gap-1">
+        {tokens.map((token, index) => (
+          <kbd
+            className={cn(kbdVariants({ size }), className)}
+            key={`${token}-${index.toString()}`}
+            ref={index === 0 ? ref : undefined}
+            {...(index === 0 ? rest : {})}
+          >
+            {formatToken(token, isMac)}
+          </kbd>
+        ))}
+      </span>
     );
-  },
-);
+  }
+
+  return (
+    <kbd className={cn(kbdVariants({ size }), className)} ref={ref} {...rest} />
+  );
+};
 Kbd.displayName = "Kbd";
 
 export { kbdVariants };
diff --git a/apps/registry/registry/default/knowledge-check/knowledge-check.tsx b/apps/registry/registry/default/knowledge-check/knowledge-check.tsx
index 420488ab..bf09c00d 100644
--- a/apps/registry/registry/default/knowledge-check/knowledge-check.tsx
+++ b/apps/registry/registry/default/knowledge-check/knowledge-check.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -706,60 +705,61 @@ function PaneActions({
  *
  * @public
  */
-export const KnowledgeCheck = forwardRef<HTMLElement, KnowledgeCheckProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      onAnswer,
-      onComplete,
-      questions,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const groupName = useId();
-    const inputId = useId();
-    const controller = useKnowledgeCheckController({
-      onAnswer,
-      onComplete,
-      questions,
-    });
-
-    return (
-      <section
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {title ? (
-          <h3 className="text-base font-semibold tracking-tight text-foreground">
-            {title}
-          </h3>
-        ) : null}
-        {controller.isComplete && controller.score ? (
-          <ScoreSummary
-            labels={resolvedLabels}
-            onRetry={controller.handleReset}
-            score={controller.score}
-          />
-        ) : (
-          <QuestionPane
-            controller={controller}
-            groupName={groupName}
-            inputId={inputId}
-            labels={resolvedLabels}
-            questions={questions}
-          />
-        )}
-      </section>
-    );
-  },
-);
+export const KnowledgeCheck = (
+  props: KnowledgeCheckProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    labels,
+    onAnswer,
+    onComplete,
+    questions,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const groupName = useId();
+  const inputId = useId();
+  const controller = useKnowledgeCheckController({
+    onAnswer,
+    onComplete,
+    questions,
+  });
+
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {title ? (
+        <h3 className="text-base font-semibold tracking-tight text-foreground">
+          {title}
+        </h3>
+      ) : null}
+      {controller.isComplete && controller.score ? (
+        <ScoreSummary
+          labels={resolvedLabels}
+          onRetry={controller.handleReset}
+          score={controller.score}
+        />
+      ) : (
+        <QuestionPane
+          controller={controller}
+          groupName={groupName}
+          inputId={inputId}
+          labels={resolvedLabels}
+          questions={questions}
+        />
+      )}
+    </section>
+  );
+};
 KnowledgeCheck.displayName = "KnowledgeCheck";
diff --git a/apps/registry/registry/default/left-rail/left-rail.tsx b/apps/registry/registry/default/left-rail/left-rail.tsx
index 0816b306..4e9cf52f 100644
--- a/apps/registry/registry/default/left-rail/left-rail.tsx
+++ b/apps/registry/registry/default/left-rail/left-rail.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -9,31 +7,35 @@ export type LeftRailProps = React.ComponentPropsWithoutRef<"aside"> & {
   title?: ReactNode;
 };
 
-const LeftRail = forwardRef<HTMLElement, LeftRailProps>(
-  ({ children, className, footer, title, ...props }, ref) => (
-    <aside
-      className={cn(
-        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {title ? (
-        <div className="flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
-          {title}
-        </div>
-      ) : null}
-      <div className="flex w-full flex-1 flex-col items-center gap-2">
-        {children}
+const LeftRail = ({
+  children,
+  className,
+  footer,
+  ref,
+  title,
+  ...props
+}: LeftRailProps & React.RefAttributes<HTMLElement>) => (
+  <aside
+    className={cn(
+      "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {title ? (
+      <div className="flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
+        {title}
       </div>
-      {footer ? (
-        <div className="flex w-full flex-col items-center gap-2">{footer}</div>
-      ) : null}
-    </aside>
-  ),
+    ) : null}
+    <div className="flex w-full flex-1 flex-col items-center gap-2">
+      {children}
+    </div>
+    {footer ? (
+      <div className="flex w-full flex-col items-center gap-2">{footer}</div>
+    ) : null}
+  </aside>
 );
 
 LeftRail.displayName = "LeftRail";
-
 export { LeftRail };
diff --git a/apps/registry/registry/default/live-cursor/live-cursor.tsx b/apps/registry/registry/default/live-cursor/live-cursor.tsx
index 8ec1f295..976d2c02 100644
--- a/apps/registry/registry/default/live-cursor/live-cursor.tsx
+++ b/apps/registry/registry/default/live-cursor/live-cursor.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -59,55 +55,55 @@ export type LiveCursorProps = {
  *
  * @public
  */
-export const LiveCursor = forwardRef<HTMLDivElement, LiveCursorProps>(
-  (props, ref) => {
-    const { className, color, labels, name, status, x, y, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const resolvedColor = color ?? "var(--foreground)";
-    return (
-      <div
-        aria-label={
-          typeof name === "string"
-            ? `${resolvedLabels.region}: ${name}`
-            : resolvedLabels.region
-        }
-        className={cn(
-          "pointer-events-none absolute z-30 flex items-start gap-1",
-          className,
-        )}
-        data-live-cursor
-        ref={ref}
-        role="img"
-        style={{ left: x, top: y }}
-        {...rest}
+export const LiveCursor = (
+  props: LiveCursorProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, color, labels, name, ref, status, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const resolvedColor = color ?? "var(--foreground)";
+  return (
+    <div
+      aria-label={
+        typeof name === "string"
+          ? `${resolvedLabels.region}: ${name}`
+          : resolvedLabels.region
+      }
+      className={cn(
+        "pointer-events-none absolute z-30 flex items-start gap-1",
+        className,
+      )}
+      data-live-cursor
+      ref={ref}
+      role="img"
+      style={{ left: x, top: y }}
+      {...rest}
+    >
+      <svg
+        aria-hidden="true"
+        className="-ml-1 -mt-1 drop-shadow-sm"
+        data-live-cursor-pointer
+        fill={resolvedColor}
+        height={18}
+        viewBox="0 0 16 18"
+        width={16}
       >
-        <svg
-          aria-hidden="true"
-          className="-ml-1 -mt-1 drop-shadow-sm"
-          data-live-cursor-pointer
-          fill={resolvedColor}
-          height={18}
-          viewBox="0 0 16 18"
-          width={16}
+        <path d="M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" />
+      </svg>
+      {name === null || name === undefined ? null : (
+        <span
+          className="ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
+          data-live-cursor-chip
+          style={{ backgroundColor: resolvedColor }}
         >
-          <path d="M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" />
-        </svg>
-        {name === null || name === undefined ? null : (
-          <span
-            className="ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
-            data-live-cursor-chip
-            style={{ backgroundColor: resolvedColor }}
-          >
-            <span>{name}</span>
-            {status ? (
-              <span className="text-[9px] opacity-80" data-live-cursor-status>
-                {status}
-              </span>
-            ) : null}
-          </span>
-        )}
-      </div>
-    );
-  },
-);
+          <span>{name}</span>
+          {status ? (
+            <span className="text-[9px] opacity-80" data-live-cursor-status>
+              {status}
+            </span>
+          ) : null}
+        </span>
+      )}
+    </div>
+  );
+};
 LiveCursor.displayName = "LiveCursor";
diff --git a/apps/registry/registry/default/live-feed/live-feed.tsx b/apps/registry/registry/default/live-feed/live-feed.tsx
index 8f93fd7a..1c048116 100644
--- a/apps/registry/registry/default/live-feed/live-feed.tsx
+++ b/apps/registry/registry/default/live-feed/live-feed.tsx
@@ -169,68 +169,64 @@ function LiveFeedRow({
   );
 }
 
-export const LiveFeed = React.forwardRef<HTMLDivElement, LiveFeedProps>(
-  (
-    {
-      className,
-      description,
-      emptyLabel = "No events yet",
-      events,
-      maxItems = 50,
-      now,
-      tickMs = 30_000,
-      title = "Live feed",
-      ...props
-    },
-    ref,
-  ) => {
-    const liveNow = useLiveDate(now, tickMs);
-    const visibleEvents = React.useMemo(
-      () => sortEventsDesc(events).slice(0, maxItems),
-      [events, maxItems],
-    );
-
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
-          <div className="space-y-1">
-            <CardTitle className="text-base">{title}</CardTitle>
-            {description ? (
-              <CardDescription>{description}</CardDescription>
-            ) : null}
+export const LiveFeed = ({
+  className,
+  description,
+  emptyLabel = "No events yet",
+  events,
+  maxItems = 50,
+  now,
+  ref,
+  tickMs = 30_000,
+  title = "Live feed",
+  ...props
+}: LiveFeedProps & React.RefAttributes<HTMLDivElement>) => {
+  const liveNow = useLiveDate(now, tickMs);
+  const visibleEvents = React.useMemo(
+    () => sortEventsDesc(events).slice(0, maxItems),
+    [events, maxItems],
+  );
+
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
+        <div className="space-y-1">
+          <CardTitle className="text-base">{title}</CardTitle>
+          {description ? (
+            <CardDescription>{description}</CardDescription>
+          ) : null}
+        </div>
+        <Badge variant="outline">
+          <span
+            aria-hidden="true"
+            className="relative mr-1.5 inline-flex size-2"
+          >
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" />
+            <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+          </span>{" "}
+          Live
+        </Badge>
+      </CardHeader>
+      <CardContent className="pt-0">
+        {visibleEvents.length === 0 ? (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            {emptyLabel}
           </div>
-          <Badge variant="outline">
-            <span
-              aria-hidden="true"
-              className="relative mr-1.5 inline-flex size-2"
-            >
-              <span className="absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" />
-              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
-            </span>{" "}
-            Live
-          </Badge>
-        </CardHeader>
-        <CardContent className="pt-0">
-          {visibleEvents.length === 0 ? (
-            <div className="py-8 text-center text-sm text-muted-foreground">
-              {emptyLabel}
-            </div>
-          ) : (
-            <ul className="max-h-[360px] divide-y divide-border/60 overflow-y-auto">
-              {visibleEvents.map((event, index) => (
-                <LiveFeedRow
-                  event={event}
-                  isLatest={index === 0}
-                  key={event.id}
-                  now={liveNow}
-                />
-              ))}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-    );
-  },
-);
+        ) : (
+          <ul className="max-h-[360px] divide-y divide-border/60 overflow-y-auto">
+            {visibleEvents.map((event, index) => (
+              <LiveFeedRow
+                event={event}
+                isLatest={index === 0}
+                key={event.id}
+                now={liveNow}
+              />
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
 
 LiveFeed.displayName = "LiveFeed";
diff --git a/apps/registry/registry/default/map-2d/map-2d.tsx b/apps/registry/registry/default/map-2d/map-2d.tsx
index 820573b9..bab34aa5 100644
--- a/apps/registry/registry/default/map-2d/map-2d.tsx
+++ b/apps/registry/registry/default/map-2d/map-2d.tsx
@@ -3,11 +3,10 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -64,7 +63,7 @@ type MapCtx = {
 const MapContext = createContext<MapCtx | null>(null);
 
 function useMapContext(): MapCtx {
-  const ctx = useContext(MapContext);
+  const ctx = use(MapContext);
   if (!ctx) {
     throw new Error("Map2D subcomponent used outside its root.");
   }
@@ -160,10 +159,12 @@ function useMapState(arguments_: {
  *
  * @public
  */
-export const MapControls = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const MapControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Map controls"
     className={cn(
@@ -175,7 +176,7 @@ export const MapControls = forwardRef<
   >
     {children}
   </div>
-));
+);
 MapControls.displayName = "MapControls";
 
 type ControlButtonProps = {
@@ -184,22 +185,27 @@ type ControlButtonProps = {
   onActivate: () => void;
 } & Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">;
 
-const ControlButton = forwardRef<HTMLButtonElement, ControlButtonProps>(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => (
-    <button
-      aria-label={ariaLabel}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className,
-      )}
-      onClick={onActivate}
-      ref={ref}
-      type="button"
-      {...rest}
-    >
-      {glyph}
-    </button>
-  ),
+const ControlButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}: ControlButtonProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    aria-label={ariaLabel}
+    className={cn(
+      "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className,
+    )}
+    onClick={onActivate}
+    ref={ref}
+    type="button"
+    {...rest}
+  >
+    {glyph}
+  </button>
 );
 ControlButton.displayName = "ControlButton";
 
@@ -208,10 +214,11 @@ ControlButton.displayName = "ControlButton";
  *
  * @public
  */
-export const MapZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const MapZoomIn = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useMapContext();
   return (
     <ControlButton
@@ -222,7 +229,7 @@ export const MapZoomIn = forwardRef<
       {...rest}
     />
   );
-});
+};
 MapZoomIn.displayName = "MapZoomIn";
 
 /**
@@ -230,10 +237,11 @@ MapZoomIn.displayName = "MapZoomIn";
  *
  * @public
  */
-export const MapZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const MapZoomOut = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useMapContext();
   return (
     <ControlButton
@@ -244,7 +252,7 @@ export const MapZoomOut = forwardRef<
       {...rest}
     />
   );
-});
+};
 MapZoomOut.displayName = "MapZoomOut";
 
 /**
@@ -269,14 +277,16 @@ export type MapMarkerProps = {
  *
  * @public
  */
-export const MapMarkerIcon = forwardRef<
-  SVGGElement,
-  ComponentPropsWithoutRef<"g">
->(({ children, className, ...rest }, ref) => (
+export const MapMarkerIcon = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"g"> & React.RefAttributes<SVGGElement>) => (
   <g className={cn("text-primary", className)} ref={ref} {...rest}>
     {children}
   </g>
-));
+);
 MapMarkerIcon.displayName = "MapMarkerIcon";
 
 type MarkerVisualProps = {
@@ -304,53 +314,61 @@ function MarkerVisual({ children }: MarkerVisualProps): ReactNode {
  *
  * @public
  */
-export const MapMarker = forwardRef<HTMLButtonElement, MapMarkerProps>(
-  (props, ref) => {
-    const { children, className, onSelect, popup, position, title, ...rest } =
-      props;
-    const { project } = useMapContext();
-    const point = project(position);
-    const markerId = useId();
-    const popupId = `${markerId}-popup`;
-    const labelText =
-      title ??
-      (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
-
-    return (
-      <foreignObject height="48" width="48" x={point.x - 24} y={point.y - 24}>
-        <button
-          aria-describedby={popup ? popupId : undefined}
-          aria-label={labelText}
-          className={cn(
-            "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            className,
-          )}
-          data-marker-id={markerId}
-          onClick={onSelect}
-          ref={ref}
-          type="button"
-          {...rest}
+export const MapMarker = (
+  props: MapMarkerProps & React.RefAttributes<HTMLButtonElement>,
+) => {
+  const {
+    children,
+    className,
+    onSelect,
+    popup,
+    position,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  const markerId = useId();
+  const popupId = `${markerId}-popup`;
+  const labelText =
+    title ??
+    (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
+
+  return (
+    <foreignObject height="48" width="48" x={point.x - 24} y={point.y - 24}>
+      <button
+        aria-describedby={popup ? popupId : undefined}
+        aria-label={labelText}
+        className={cn(
+          "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className,
+        )}
+        data-marker-id={markerId}
+        onClick={onSelect}
+        ref={ref}
+        type="button"
+        {...rest}
+      >
+        <svg
+          className="pointer-events-none size-6 overflow-visible"
+          viewBox="-10 -10 20 20"
         >
-          <svg
-            className="pointer-events-none size-6 overflow-visible"
-            viewBox="-10 -10 20 20"
+          <MarkerVisual>{children}</MarkerVisual>
+        </svg>
+        {popup ? (
+          <span
+            className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block"
+            id={popupId}
+            role="tooltip"
           >
-            <MarkerVisual>{children}</MarkerVisual>
-          </svg>
-          {popup ? (
-            <span
-              className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block"
-              id={popupId}
-              role="tooltip"
-            >
-              {popup}
-            </span>
-          ) : null}
-        </button>
-      </foreignObject>
-    );
-  },
-);
+            {popup}
+          </span>
+        ) : null}
+      </button>
+    </foreignObject>
+  );
+};
 MapMarker.displayName = "MapMarker";
 
 /**
@@ -369,32 +387,27 @@ export type MapPopupProps = {
  *
  * @public
  */
-export const MapPopup = forwardRef<HTMLDivElement, MapPopupProps>(
-  (props, ref) => {
-    const { children, className, position, ...rest } = props;
-    const { project } = useMapContext();
-    const point = project(position);
-    return (
-      <foreignObject
-        height="200"
-        width="320"
-        x={point.x - 160}
-        y={point.y - 220}
+export const MapPopup = (
+  props: MapPopupProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { children, className, position, ref, ...rest } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  return (
+    <foreignObject height="200" width="320" x={point.x - 160} y={point.y - 220}>
+      <div
+        className={cn(
+          "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
+          className,
+        )}
+        ref={ref}
+        {...rest}
       >
-        <div
-          className={cn(
-            "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </div>
-      </foreignObject>
-    );
-  },
-);
+        {children}
+      </div>
+    </foreignObject>
+  );
+};
 MapPopup.displayName = "MapPopup";
 
 /**
@@ -433,11 +446,14 @@ export type MapLayerProps = {
  *
  * @public
  */
-export const MapLayer = forwardRef<SVGGElement, MapLayerProps>((props, ref) => {
+export const MapLayer = (
+  props: MapLayerProps & React.RefAttributes<SVGGElement>,
+) => {
   const {
     className,
     data,
     fill = "rgba(59, 130, 246, 0.15)",
+    ref,
     stroke = "currentColor",
     strokeWidth = 2,
     ...rest
@@ -470,7 +486,7 @@ export const MapLayer = forwardRef<SVGGElement, MapLayerProps>((props, ref) => {
       })}
     </g>
   );
-});
+};
 MapLayer.displayName = "MapLayer";
 
 type StageProps = {
@@ -672,7 +688,7 @@ function bucketChildren(children: ReactNode): ChildBuckets {
  *
  * @public
  */
-export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
+export const Map2D = (props: Map2DProps & React.RefAttributes<HTMLElement>) => {
   const {
     backdrop,
     backdropAlt,
@@ -680,6 +696,7 @@ export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
     children,
     className,
     labels,
+    ref,
     zoom: initialZoom = 1,
     ...rest
   } = props;
@@ -712,5 +729,5 @@ export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
       </section>
     </MapContext.Provider>
   );
-});
+};
 Map2D.displayName = "Map2D";
diff --git a/apps/registry/registry/default/map-timeline/map-timeline.tsx b/apps/registry/registry/default/map-timeline/map-timeline.tsx
index d42f8e3d..eb935be4 100644
--- a/apps/registry/registry/default/map-timeline/map-timeline.tsx
+++ b/apps/registry/registry/default/map-timeline/map-timeline.tsx
@@ -4,10 +4,9 @@ import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -113,7 +112,7 @@ type Ctx = {
 const TimelineContext = createContext<Ctx | null>(null);
 
 function useTimelineContext(): Ctx {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("MapTimeline subcomponent used outside its root.");
   }
@@ -201,48 +200,49 @@ function ringCentroid(ring: GeoPosition[]): { x: number; y: number } {
  *
  * @public
  */
-export const MapTimelineLayer = forwardRef<SVGGElement, MapTimelineLayerProps>(
-  (props, ref) => {
-    const {
-      color = "blue",
-      endYear,
-      geometry,
-      id,
-      label,
-      startYear,
-      ...rest
-    } = props;
-    const { year } = useTimelineContext();
-    if (year < startYear || year > endYear) return null;
-    const palette = PALETTE[color];
-    const rings = geometryRings(geometry);
-    const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
-    return (
-      <g data-layer-id={id} data-state="visible" ref={ref} {...rest}>
-        {rings.map((ring, index) => (
-          <path
-            d={`${ringToPath(ring)} Z`}
-            fill={palette.fill}
-            key={`${id ?? "layer"}-ring-${index.toString()}`}
-            stroke={palette.stroke}
-            strokeWidth={1.5}
-          />
-        ))}
-        {label ? (
-          <text
-            className="select-none fill-foreground text-[11px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            x={centroid.x}
-            y={centroid.y}
-          >
-            {label}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+export const MapTimelineLayer = (
+  props: MapTimelineLayerProps & React.RefAttributes<SVGGElement>,
+) => {
+  const {
+    color = "blue",
+    endYear,
+    geometry,
+    id,
+    label,
+    ref,
+    startYear,
+    ...rest
+  } = props;
+  const { year } = useTimelineContext();
+  if (year < startYear || year > endYear) return null;
+  const palette = PALETTE[color];
+  const rings = geometryRings(geometry);
+  const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
+  return (
+    <g data-layer-id={id} data-state="visible" ref={ref} {...rest}>
+      {rings.map((ring, index) => (
+        <path
+          d={`${ringToPath(ring)} Z`}
+          fill={palette.fill}
+          key={`${id ?? "layer"}-ring-${index.toString()}`}
+          stroke={palette.stroke}
+          strokeWidth={1.5}
+        />
+      ))}
+      {label ? (
+        <text
+          className="select-none fill-foreground text-[11px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          x={centroid.x}
+          y={centroid.y}
+        >
+          {label}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 MapTimelineLayer.displayName = "MapTimelineLayer";
 
 /**
@@ -272,64 +272,63 @@ export type MapTimelineEventProps = {
  *
  * @public
  */
-export const MapTimelineEvent = forwardRef<SVGGElement, MapTimelineEventProps>(
-  (props, ref) => {
-    const {
-      color = "red",
-      description,
-      id,
-      position,
-      title,
-      toleranceYears = 0,
-      year: eventYear,
-      ...rest
-    } = props;
-    const { year } = useTimelineContext();
-    const visible = Math.abs(year - eventYear) <= toleranceYears;
-    if (!visible) return null;
-    const palette = PALETTE[color];
-    const projected = projectEquirectangular(position);
-    return (
-      <g
-        data-event-id={id}
-        data-event-year={eventYear}
-        ref={ref}
-        transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
-        {...rest}
+export const MapTimelineEvent = (
+  props: MapTimelineEventProps & React.RefAttributes<SVGGElement>,
+) => {
+  const {
+    color = "red",
+    description,
+    id,
+    position,
+    ref,
+    title,
+    toleranceYears = 0,
+    year: eventYear,
+    ...rest
+  } = props;
+  const { year } = useTimelineContext();
+  const visible = Math.abs(year - eventYear) <= toleranceYears;
+  if (!visible) return null;
+  const palette = PALETTE[color];
+  const projected = projectEquirectangular(position);
+  return (
+    <g
+      data-event-id={id}
+      data-event-year={eventYear}
+      ref={ref}
+      transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
+      {...rest}
+    >
+      <circle
+        className={cn("stroke-background", palette.dot)}
+        r="6"
+        strokeWidth="2"
       >
-        <circle
-          className={cn("stroke-background", palette.dot)}
-          r="6"
-          strokeWidth="2"
+        {title ? <title>{typeof title === "string" ? title : ""}</title> : null}
+      </circle>
+      {title ? (
+        <text
+          className="select-none fill-foreground text-[10px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="-12"
         >
-          {title ? (
-            <title>{typeof title === "string" ? title : ""}</title>
-          ) : null}
-        </circle>
-        {title ? (
-          <text
-            className="select-none fill-foreground text-[10px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="-12"
-          >
-            {title}
-          </text>
-        ) : null}
-        {description ? (
-          <text
-            className="select-none fill-muted-foreground text-[9px]"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="20"
-          >
-            {description}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+          {title}
+        </text>
+      ) : null}
+      {description ? (
+        <text
+          className="select-none fill-muted-foreground text-[9px]"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="20"
+        >
+          {description}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 MapTimelineEvent.displayName = "MapTimelineEvent";
 
 /**
@@ -337,10 +336,12 @@ MapTimelineEvent.displayName = "MapTimelineEvent";
  *
  * @public
  */
-export const MapTimelineControls = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const MapTimelineControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex items-center gap-3 border-t border-border bg-muted/40 px-4 py-2",
@@ -351,7 +352,7 @@ export const MapTimelineControls = forwardRef<
   >
     {children}
   </div>
-));
+);
 MapTimelineControls.displayName = "MapTimelineControls";
 
 /**
@@ -359,13 +360,15 @@ MapTimelineControls.displayName = "MapTimelineControls";
  *
  * @public
  */
-export const MapTimelineSlider = forwardRef<
-  HTMLInputElement,
-  Omit<
-    ComponentPropsWithoutRef<"input">,
-    "max" | "min" | "onChange" | "type" | "value"
-  >
->(({ className, ...rest }, ref) => {
+export const MapTimelineSlider = ({
+  className,
+  ref,
+  ...rest
+}: Omit<
+  ComponentPropsWithoutRef<"input">,
+  "max" | "min" | "onChange" | "type" | "value"
+> &
+  React.RefAttributes<HTMLInputElement>) => {
   const { endYear, labels, setYear, startYear, year } = useTimelineContext();
   const sliderId = useId();
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -398,7 +401,7 @@ export const MapTimelineSlider = forwardRef<
       </span>
     </div>
   );
-});
+};
 MapTimelineSlider.displayName = "MapTimelineSlider";
 
 /**
@@ -406,10 +409,15 @@ MapTimelineSlider.displayName = "MapTimelineSlider";
  *
  * @public
  */
-export const MapTimelinePlayButton = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-pressed" | "onClick" | "type">
->(({ className, ...rest }, ref) => {
+export const MapTimelinePlayButton = ({
+  className,
+  ref,
+  ...rest
+}: Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-pressed" | "onClick" | "type"
+> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { isPlaying, labels, setIsPlaying } = useTimelineContext();
   const handleClick = (): void => {
     setIsPlaying(!isPlaying);
@@ -431,7 +439,7 @@ export const MapTimelinePlayButton = forwardRef<
       <span aria-hidden="true">{isPlaying ? "❚❚" : "▶"}</span>
     </button>
   );
-});
+};
 MapTimelinePlayButton.displayName = "MapTimelinePlayButton";
 
 /**
@@ -642,9 +650,19 @@ type ShellProps = {
   year: number;
 };
 
-const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
-  const { backdrop, backdropAlt, buckets, className, region, titleId, year } =
-    props;
+const Shell = function Shell(
+  props: ShellProps & React.RefAttributes<HTMLElement>,
+) {
+  const {
+    backdrop,
+    backdropAlt,
+    buckets,
+    className,
+    ref,
+    region,
+    titleId,
+    year,
+  } = props;
   return (
     <section
       aria-labelledby={titleId}
@@ -668,7 +686,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
       {buckets.footer}
     </section>
   );
-});
+};
 
 /**
  * Combined map + timeline. Pass {@link MapTimelineLayer} (era polygons),
@@ -704,72 +722,73 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
  *
  * @public
  */
-export const MapTimeline = forwardRef<HTMLElement, MapTimelineProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      children,
-      className,
-      endYear,
-      initialYear,
-      labels,
-      onYearChange,
-      speed = 25,
-      startYear,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-
-    const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
-      endYear,
-      initialYear,
-      onYearChange,
-      speed,
-      startYear,
-    });
+export const MapTimeline = (
+  props: MapTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    endYear,
+    initialYear,
+    labels,
+    onYearChange,
+    ref,
+    speed = 25,
+    startYear,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
 
-    usePlayback({
-      endYear,
-      isPlaying,
-      setIsPlaying,
-      setYear,
-      speed,
-      startYear,
-      year,
-    });
+  const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
+    endYear,
+    initialYear,
+    onYearChange,
+    speed,
+    startYear,
+  });
 
-    const ctx = useTimelineCtx({
-      endYear,
-      isPlaying,
-      labels: resolvedLabels,
-      setIsPlaying,
-      setYear,
-      speed,
-      startYear,
-      year,
-    });
-
-    const buckets = bucketChildren(children);
-    return (
-      <TimelineContext.Provider value={ctx}>
-        <Shell
-          backdrop={backdrop}
-          backdropAlt={backdropAlt}
-          buckets={buckets}
-          className={className}
-          ref={ref}
-          region={resolvedLabels.region}
-          titleId={titleId}
-          year={year}
-          {...rest}
-        />
-      </TimelineContext.Provider>
-    );
-  },
-);
+  usePlayback({
+    endYear,
+    isPlaying,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year,
+  });
+
+  const ctx = useTimelineCtx({
+    endYear,
+    isPlaying,
+    labels: resolvedLabels,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year,
+  });
+
+  const buckets = bucketChildren(children);
+  return (
+    <TimelineContext.Provider value={ctx}>
+      <Shell
+        backdrop={backdrop}
+        backdropAlt={backdropAlt}
+        buckets={buckets}
+        className={className}
+        ref={ref}
+        region={resolvedLabels.region}
+        titleId={titleId}
+        year={year}
+        {...rest}
+      />
+    </TimelineContext.Provider>
+  );
+};
 MapTimeline.displayName = "MapTimeline";
diff --git a/apps/registry/registry/default/market-treemap/market-treemap.tsx b/apps/registry/registry/default/market-treemap/market-treemap.tsx
index 36df4384..4bf141ec 100644
--- a/apps/registry/registry/default/market-treemap/market-treemap.tsx
+++ b/apps/registry/registry/default/market-treemap/market-treemap.tsx
@@ -93,10 +93,12 @@ function MarketTreemapTile({
   );
 }
 
-export const MarketTreemap = React.forwardRef<
-  HTMLDivElement,
-  MarketTreemapProps
->(({ className, items, ...props }, reference) => {
+export const MarketTreemap = ({
+  className,
+  items,
+  ref: reference,
+  ...props
+}: MarketTreemapProps & React.RefAttributes<HTMLDivElement>) => {
   if (items.length === 0) {
     return null;
   }
@@ -132,6 +134,6 @@ export const MarketTreemap = React.forwardRef<
       </div>
     </div>
   );
-});
+};
 
 MarketTreemap.displayName = "MarketTreemap";
diff --git a/apps/registry/registry/default/marquee/marquee.tsx b/apps/registry/registry/default/marquee/marquee.tsx
index 9caf9507..dd618a08 100644
--- a/apps/registry/registry/default/marquee/marquee.tsx
+++ b/apps/registry/registry/default/marquee/marquee.tsx
@@ -58,75 +58,69 @@ function getDuration(
   }
 }
 
-export const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
-  (
-    {
-      children,
-      className,
-      duration,
-      fade = true,
-      gap = "1rem",
-      pauseOnHover = false,
-      repeat = 1,
-      reverse = false,
-      speed = "normal",
-      style,
-      vertical = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedGap = getGapValue(gap);
-    const resolvedDuration = getDuration(duration, speed);
-    const trackItems = getTrackItems(children, repeat);
+export const Marquee = ({
+  children,
+  className,
+  duration,
+  fade = true,
+  gap = "1rem",
+  pauseOnHover = false,
+  ref,
+  repeat = 1,
+  reverse = false,
+  speed = "normal",
+  style,
+  vertical = false,
+  ...props
+}: MarqueeProps & React.RefAttributes<HTMLDivElement>) => {
+  const resolvedGap = getGapValue(gap);
+  const resolvedDuration = getDuration(duration, speed);
+  const trackItems = getTrackItems(children, repeat);
 
-    const animationStyle: React.CSSProperties = {
-      animationDirection: reverse ? "reverse" : "normal",
-      animationDuration: `${resolvedDuration}s`,
-      animationIterationCount: "infinite",
-      animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
-      animationTimingFunction: "linear",
-    };
-    const maskImage = getMaskImage(vertical);
+  const animationStyle: React.CSSProperties = {
+    animationDirection: reverse ? "reverse" : "normal",
+    animationDuration: `${resolvedDuration}s`,
+    animationIterationCount: "infinite",
+    animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
+    animationTimingFunction: "linear",
+  };
+  const maskImage = getMaskImage(vertical);
 
-    return (
+  return (
+    <div
+      className={cn(
+        "group relative overflow-hidden",
+        vertical ? "flex h-full flex-col" : "flex w-full flex-row",
+        className,
+      )}
+      ref={ref}
+      style={fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style}
+      {...props}
+    >
       <div
         className={cn(
-          "group relative overflow-hidden",
-          vertical ? "flex h-full flex-col" : "flex w-full flex-row",
-          className,
+          "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
+          pauseOnHover && "group-hover:[animation-play-state:paused]",
+          vertical ? "min-h-full flex-col" : "min-w-full flex-row",
         )}
-        ref={ref}
-        style={
-          fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style
-        }
-        {...props}
+        style={animationStyle}
       >
-        <div
-          className={cn(
-            "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
-            pauseOnHover && "group-hover:[animation-play-state:paused]",
-            vertical ? "min-h-full flex-col" : "min-w-full flex-row",
-          )}
-          style={animationStyle}
-        >
-          {[0, 1].map((groupIndex) => (
-            <div
-              aria-hidden={groupIndex === 1}
-              className={cn(
-                "flex shrink-0",
-                vertical ? "flex-col items-stretch" : "flex-row items-center",
-              )}
-              key={groupIndex}
-              style={{ gap: resolvedGap }}
-            >
-              {trackItems}
-            </div>
-          ))}
-        </div>
+        {[0, 1].map((groupIndex) => (
+          <div
+            aria-hidden={groupIndex === 1}
+            className={cn(
+              "flex shrink-0",
+              vertical ? "flex-col items-stretch" : "flex-row items-center",
+            )}
+            key={groupIndex}
+            style={{ gap: resolvedGap }}
+          >
+            {trackItems}
+          </div>
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 Marquee.displayName = "Marquee";
diff --git a/apps/registry/registry/default/menubar/menubar.tsx b/apps/registry/registry/default/menubar/menubar.tsx
index 8d0c00fc..23f77552 100644
--- a/apps/registry/registry/default/menubar/menubar.tsx
+++ b/apps/registry/registry/default/menubar/menubar.tsx
@@ -1,27 +1,22 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
-
 const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
-
 const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
-
 const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
-
 const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =
   MenubarPrimitive.RadioGroup;
 
-const Menubar = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Menubar = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Root>>) => (
   <MenubarPrimitive.Root
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
@@ -30,13 +25,16 @@ const Menubar = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
-const MenubarTrigger = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+const MenubarTrigger = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Trigger>>) => (
   <MenubarPrimitive.Trigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -45,15 +43,21 @@ const MenubarTrigger = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
-const MenubarSubTrigger = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, ref) => (
+const MenubarSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.SubTrigger>
+  >) => (
   <MenubarPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -66,13 +70,18 @@ const MenubarSubTrigger = forwardRef<
     {children}
     <ChevronRight className="ml-auto size-4" />
   </MenubarPrimitive.SubTrigger>
-));
+);
+
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
-const MenubarSubContent = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const MenubarSubContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.SubContent>
+  >) => (
   <MenubarPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -81,40 +90,44 @@ const MenubarSubContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
-const MenubarContent = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { align = "start", alignOffset = -4, className, sideOffset = 8, ...props },
-    ref,
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        align={align}
-        alignOffset={alignOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className,
-        )}
-        ref={ref}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  ),
+const MenubarContent = ({
+  align = "start",
+  alignOffset = -4,
+  className,
+  ref,
+  sideOffset = 8,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Content>>) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      align={align}
+      alignOffset={alignOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
 );
+
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
-const MenubarItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const MenubarItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Item>>) => (
   <MenubarPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -124,13 +137,20 @@ const MenubarItem = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
-const MenubarCheckboxItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, ref) => (
+const MenubarCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>
+  >) => (
   <MenubarPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -147,13 +167,19 @@ const MenubarCheckboxItem = forwardRef<
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-));
+);
+
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
-const MenubarRadioItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ children, className, ...props }, ref) => (
+const MenubarRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.RadioItem>
+  >) => (
   <MenubarPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -169,15 +195,18 @@ const MenubarRadioItem = forwardRef<
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-));
+);
+
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
-const MenubarLabel = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const MenubarLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Label>>) => (
   <MenubarPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
@@ -187,19 +216,25 @@ const MenubarLabel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
-const MenubarSeparator = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const MenubarSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.Separator>
+  >) => (
   <MenubarPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({
@@ -216,6 +251,7 @@ const MenubarShortcut = ({
     />
   );
 };
+
 MenubarShortcut.displayName = "MenubarShortcut";
 
 export {
diff --git a/apps/registry/registry/default/metric-cluster/metric-cluster.tsx b/apps/registry/registry/default/metric-cluster/metric-cluster.tsx
index a3660403..ee425644 100644
--- a/apps/registry/registry/default/metric-cluster/metric-cluster.tsx
+++ b/apps/registry/registry/default/metric-cluster/metric-cluster.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -136,52 +132,53 @@ const Row = (props: { entry: MetricClusterEntry }): React.ReactElement => {
  *
  * @public
  */
-export const MetricCluster = forwardRef<HTMLDivElement, MetricClusterProps>(
-  (props, ref) => {
-    const {
-      anchor = "top-right",
-      className,
-      labels,
-      metrics,
-      title,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
-          className,
-        )}
-        data-metric-cluster
-        data-metric-cluster-anchor={anchor}
-        ref={ref}
-        role="status"
-        style={{
-          left: x,
-          top: y,
-          transform: ANCHOR_TRANSFORM[anchor],
-        }}
-        {...rest}
-      >
-        {title ? (
-          <header
-            className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
-            data-metric-cluster-title
-          >
-            {title}
-          </header>
-        ) : null}
-        <ul className="space-y-0.5">
-          {metrics.map((entry) => (
-            <Row entry={entry} key={entry.id} />
-          ))}
-        </ul>
-      </div>
-    );
-  },
-);
+export const MetricCluster = (
+  props: MetricClusterProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    anchor = "top-right",
+    className,
+    labels,
+    metrics,
+    ref,
+    title,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+        className,
+      )}
+      data-metric-cluster
+      data-metric-cluster-anchor={anchor}
+      ref={ref}
+      role="status"
+      style={{
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor],
+      }}
+      {...rest}
+    >
+      {title ? (
+        <header
+          className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
+          data-metric-cluster-title
+        >
+          {title}
+        </header>
+      ) : null}
+      <ul className="space-y-0.5">
+        {metrics.map((entry) => (
+          <Row entry={entry} key={entry.id} />
+        ))}
+      </ul>
+    </div>
+  );
+};
 MetricCluster.displayName = "MetricCluster";
diff --git a/apps/registry/registry/default/metric-gauge/metric-gauge.tsx b/apps/registry/registry/default/metric-gauge/metric-gauge.tsx
index 01b22cc5..fed4e310 100644
--- a/apps/registry/registry/default/metric-gauge/metric-gauge.tsx
+++ b/apps/registry/registry/default/metric-gauge/metric-gauge.tsx
@@ -203,59 +203,55 @@ function GaugeLegend({ thresholds }: { thresholds: MetricGaugeThreshold[] }) {
   );
 }
 
-export const MetricGauge = React.forwardRef<HTMLDivElement, MetricGaugeProps>(
-  (
-    {
-      className,
-      description,
-      label,
-      max,
-      min = 0,
-      thresholds = DEFAULT_THRESHOLDS,
-      unit,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const safeValue = clamp(value, min, max);
-    const percent = max === min ? 0 : ((safeValue - min) / (max - min)) * 100;
-    const endAngle = -90 + 180 * (percent / 100);
-    const activeThreshold = getActiveThreshold(percent, thresholds);
+export const MetricGauge = ({
+  className,
+  description,
+  label,
+  max,
+  min = 0,
+  ref,
+  thresholds = DEFAULT_THRESHOLDS,
+  unit,
+  value,
+  ...props
+}: MetricGaugeProps & React.RefAttributes<HTMLDivElement>) => {
+  const safeValue = clamp(value, min, max);
+  const percent = max === min ? 0 : ((safeValue - min) / (max - min)) * 100;
+  const endAngle = -90 + 180 * (percent / 100);
+  const activeThreshold = getActiveThreshold(percent, thresholds);
 
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="space-y-2 pb-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <CardTitle className="text-base">{label}</CardTitle>
-              {description ? (
-                <CardDescription>{description}</CardDescription>
-              ) : null}
-            </div>
-            {activeThreshold ? (
-              <Badge variant="outline">{activeThreshold.label}</Badge>
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="space-y-2 pb-3">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <CardTitle className="text-base">{label}</CardTitle>
+            {description ? (
+              <CardDescription>{description}</CardDescription>
             ) : null}
           </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
           {activeThreshold ? (
-            <GaugeDial
-              activeThreshold={activeThreshold}
-              endAngle={endAngle}
-              label={label}
-              max={max}
-              min={min}
-              percent={percent}
-              safeValue={safeValue}
-              unit={unit}
-            />
+            <Badge variant="outline">{activeThreshold.label}</Badge>
           ) : null}
-          <GaugeLegend thresholds={thresholds} />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {activeThreshold ? (
+          <GaugeDial
+            activeThreshold={activeThreshold}
+            endAngle={endAngle}
+            label={label}
+            max={max}
+            min={min}
+            percent={percent}
+            safeValue={safeValue}
+            unit={unit}
+          />
+        ) : null}
+        <GaugeLegend thresholds={thresholds} />
+      </CardContent>
+    </Card>
+  );
+};
 
 MetricGauge.displayName = "MetricGauge";
diff --git a/apps/registry/registry/default/mini-map-panel/mini-map-panel.tsx b/apps/registry/registry/default/mini-map-panel/mini-map-panel.tsx
index bfc80f8d..5e292f3c 100644
--- a/apps/registry/registry/default/mini-map-panel/mini-map-panel.tsx
+++ b/apps/registry/registry/default/mini-map-panel/mini-map-panel.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
 
 export type MiniMapMarker = {
@@ -25,74 +23,76 @@ export type MiniMapPanelProps = React.ComponentPropsWithoutRef<"div"> & {
   };
 };
 
-const MiniMapPanel = forwardRef<HTMLDivElement, MiniMapPanelProps>(
-  (
-    { className, markers = [], title = "Overview", viewport, world, ...props },
-    ref,
-  ) => {
-    const viewportWidth = Math.max(
-      (viewport.width / viewport.zoom / world.width) * 100,
-      8,
-    );
-    const viewportHeight = Math.max(
-      (viewport.height / viewport.zoom / world.height) * 100,
-      8,
-    );
-    const viewportLeft = Math.min(
-      Math.max((viewport.x / world.width) * 100, 0),
-      100 - viewportWidth,
-    );
-    const viewportTop = Math.min(
-      Math.max((viewport.y / world.height) * 100, 0),
-      100 - viewportHeight,
-    );
+const MiniMapPanel = ({
+  className,
+  markers = [],
+  ref,
+  title = "Overview",
+  viewport,
+  world,
+  ...props
+}: MiniMapPanelProps & React.RefAttributes<HTMLDivElement>) => {
+  const viewportWidth = Math.max(
+    (viewport.width / viewport.zoom / world.width) * 100,
+    8,
+  );
+  const viewportHeight = Math.max(
+    (viewport.height / viewport.zoom / world.height) * 100,
+    8,
+  );
+  const viewportLeft = Math.min(
+    Math.max((viewport.x / world.width) * 100, 0),
+    100 - viewportWidth,
+  );
+  const viewportTop = Math.min(
+    Math.max((viewport.y / world.height) * 100, 0),
+    100 - viewportHeight,
+  );
 
-    return (
-      <div
-        className={cn(
-          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        <div className="mb-3 flex items-center justify-between">
-          <div>
-            <div className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
-              {title}
-            </div>
-            <div className="mt-1 text-xs text-muted-foreground">
-              Zoom {Math.round(viewport.zoom * 100)}%
-            </div>
+  return (
+    <div
+      className={cn(
+        "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <div>
+          <div className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
+            {title}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            Zoom {Math.round(viewport.zoom * 100)}%
           </div>
         </div>
-        <div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background">
-          {markers.map((marker) => (
-            <div
-              className="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground"
-              key={marker.id}
-              style={{
-                left: `${(marker.x / world.width) * 100}%`,
-                top: `${(marker.y / world.height) * 100}%`,
-              }}
-              title={marker.label}
-            />
-          ))}
+      </div>
+      <div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background">
+        {markers.map((marker) => (
           <div
-            className="absolute border border-foreground/80 bg-transparent"
+            className="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground"
+            key={marker.id}
             style={{
-              height: `${viewportHeight}%`,
-              left: `${viewportLeft}%`,
-              top: `${viewportTop}%`,
-              width: `${viewportWidth}%`,
+              left: `${(marker.x / world.width) * 100}%`,
+              top: `${(marker.y / world.height) * 100}%`,
             }}
+            title={marker.label}
           />
-        </div>
+        ))}
+        <div
+          className="absolute border border-foreground/80 bg-transparent"
+          style={{
+            height: `${viewportHeight}%`,
+            left: `${viewportLeft}%`,
+            top: `${viewportTop}%`,
+            width: `${viewportWidth}%`,
+          }}
+        />
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 MiniMapPanel.displayName = "MiniMapPanel";
-
 export { MiniMapPanel };
diff --git a/apps/registry/registry/default/model-comparison/model-comparison.tsx b/apps/registry/registry/default/model-comparison/model-comparison.tsx
index 57d215f9..5c6535df 100644
--- a/apps/registry/registry/default/model-comparison/model-comparison.tsx
+++ b/apps/registry/registry/default/model-comparison/model-comparison.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -157,57 +156,58 @@ function ComparisonHeader({
  *
  * @public
  */
-export const ModelComparison = forwardRef<HTMLElement, ModelComparisonProps>(
-  (props, ref) => {
-    const {
-      blindDefault = false,
-      children,
-      className,
-      hideBlindToggle = false,
-      labels,
-      prompt,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const [blind, setBlind] = useState(blindDefault);
+export const ModelComparison = (
+  props: ModelComparisonProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    blindDefault = false,
+    children,
+    className,
+    hideBlindToggle = false,
+    labels,
+    prompt,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const [blind, setBlind] = useState(blindDefault);
 
-    const contextValue = useMemo<ModelComparisonContextValue>(
-      () => ({ blind, labels: resolvedLabels }),
-      [blind, resolvedLabels],
-    );
+  const contextValue = useMemo<ModelComparisonContextValue>(
+    () => ({ blind, labels: resolvedLabels }),
+    [blind, resolvedLabels],
+  );
 
-    const handleToggleBlind = useCallback(() => {
-      setBlind((value) => !value);
-    }, []);
+  const handleToggleBlind = useCallback(() => {
+    setBlind((value) => !value);
+  }, []);
 
-    return (
-      <ModelComparisonContext.Provider value={contextValue}>
-        <section
-          className={cn(
-            "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          <ComparisonHeader
-            blind={blind}
-            hideBlindToggle={hideBlindToggle}
-            labels={resolvedLabels}
-            onToggleBlind={handleToggleBlind}
-            prompt={prompt}
-          />
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {children}
-          </div>
-        </section>
-      </ModelComparisonContext.Provider>
-    );
-  },
-);
+  return (
+    <ModelComparisonContext.Provider value={contextValue}>
+      <section
+        className={cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <ComparisonHeader
+          blind={blind}
+          hideBlindToggle={hideBlindToggle}
+          labels={resolvedLabels}
+          onToggleBlind={handleToggleBlind}
+          prompt={prompt}
+        />
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {children}
+        </div>
+      </section>
+    </ModelComparisonContext.Provider>
+  );
+};
 ModelComparison.displayName = "ModelComparison";
 
 /**
@@ -230,13 +230,12 @@ export type ModelComparisonColumnProps = {
  *
  * @public
  */
-export const ModelComparisonColumn = forwardRef<
-  HTMLElement,
-  ModelComparisonColumnProps
->((props, ref) => {
-  const { badge, children, className, label, model, ...rest } = props;
+export const ModelComparisonColumn = (
+  props: ModelComparisonColumnProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { badge, children, className, label, model, ref, ...rest } = props;
   const id = useId();
-  const { blind } = useContext(ModelComparisonContext);
+  const { blind } = use(ModelComparisonContext);
   const displayLabel = blind
     ? `${HIDDEN_LABEL_PREFIX} ${id.slice(-2)}`
     : (label ?? model);
@@ -264,7 +263,7 @@ export const ModelComparisonColumn = forwardRef<
       </div>
     </article>
   );
-});
+};
 ModelComparisonColumn.displayName = "ModelComparisonColumn";
 
 /**
@@ -287,12 +286,11 @@ export type ModelComparisonMetaProps = {
  *
  * @public
  */
-export const ModelComparisonMeta = forwardRef<
-  HTMLDListElement,
-  ModelComparisonMetaProps
->((props, ref) => {
-  const { className, cost, latency, tokens, ...rest } = props;
-  const { labels } = useContext(ModelComparisonContext);
+export const ModelComparisonMeta = (
+  props: ModelComparisonMetaProps & React.RefAttributes<HTMLDListElement>,
+) => {
+  const { className, cost, latency, ref, tokens, ...rest } = props;
+  const { labels } = use(ModelComparisonContext);
 
   const items: { caption: string; value: ReactNode }[] = [];
   if (tokens !== undefined && tokens !== null) {
@@ -328,7 +326,7 @@ export const ModelComparisonMeta = forwardRef<
       ))}
     </dl>
   );
-});
+};
 ModelComparisonMeta.displayName = "ModelComparisonMeta";
 
 /**
@@ -362,12 +360,11 @@ export type ModelComparisonVoteProps = {
  *
  * @public
  */
-export const ModelComparisonVote = forwardRef<
-  HTMLDivElement,
-  ModelComparisonVoteProps
->((props, ref) => {
-  const { buttonLabels, className, onVote, ...rest } = props;
-  const { labels: contextLabels } = useContext(ModelComparisonContext);
+export const ModelComparisonVote = (
+  props: ModelComparisonVoteProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { buttonLabels, className, onVote, ref, ...rest } = props;
+  const { labels: contextLabels } = use(ModelComparisonContext);
 
   const handleLeft = useCallback(() => {
     onVote?.("left");
@@ -401,5 +398,5 @@ export const ModelComparisonVote = forwardRef<
       </div>
     </div>
   );
-});
+};
 ModelComparisonVote.displayName = "ModelComparisonVote";
diff --git a/apps/registry/registry/default/multi-select-lasso/multi-select-lasso.tsx b/apps/registry/registry/default/multi-select-lasso/multi-select-lasso.tsx
index 99d34c9b..a8459339 100644
--- a/apps/registry/registry/default/multi-select-lasso/multi-select-lasso.tsx
+++ b/apps/registry/registry/default/multi-select-lasso/multi-select-lasso.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -85,11 +81,10 @@ const normalizeRect = (rect: LassoRect): LassoRect => {
  *
  * @public
  */
-export const MultiSelectLasso = forwardRef<
-  HTMLDivElement,
-  MultiSelectLassoProps
->((props, ref) => {
-  const { className, count, hint, labels, rect, ...rest } = props;
+export const MultiSelectLasso = (
+  props: MultiSelectLassoProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, count, hint, labels, rect, ref, ...rest } = props;
   if (!rect) {
     return null;
   }
@@ -135,5 +130,5 @@ export const MultiSelectLasso = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 MultiSelectLasso.displayName = "MultiSelectLasso";
diff --git a/apps/registry/registry/default/multi-select/multi-select.tsx b/apps/registry/registry/default/multi-select/multi-select.tsx
index e31b0220..5eeae384 100644
--- a/apps/registry/registry/default/multi-select/multi-select.tsx
+++ b/apps/registry/registry/default/multi-select/multi-select.tsx
@@ -236,129 +236,118 @@ function useMultiSelectState({
   };
 }
 
-const MultiSelectTrigger = React.forwardRef<
-  HTMLButtonElement,
-  MultiSelectTriggerProps
->(
-  (
-    {
+const MultiSelectTrigger = ({
+  className,
+  contentId,
+  disabled = false,
+  onKeyDown,
+  open,
+  placeholder = "Select options",
+  ref,
+  selectedOptions,
+  ...props
+}: MultiSelectTriggerProps & React.RefAttributes<HTMLButtonElement>) => (
+  <Button
+    aria-controls={contentId}
+    aria-expanded={open}
+    aria-haspopup="listbox"
+    className={cn(
+      "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
+      selectedOptions.length === 0 && "text-muted-foreground",
       className,
-      contentId,
-      disabled = false,
-      onKeyDown,
-      open,
-      placeholder = "Select options",
-      selectedOptions,
-      ...props
-    },
-    ref,
-  ) => (
-    <Button
-      aria-controls={contentId}
-      aria-expanded={open}
-      aria-haspopup="listbox"
-      className={cn(
-        "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
-        selectedOptions.length === 0 && "text-muted-foreground",
-        className,
-      )}
-      disabled={disabled}
-      onKeyDown={onKeyDown}
-      ref={ref}
-      role="combobox"
-      type="button"
-      variant="outline"
-      {...props}
-    >
-      <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left">
-        <TriggerContent
-          placeholder={placeholder}
-          selectedOptions={selectedOptions}
-        />
-      </span>
-      <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
-    </Button>
-  ),
+    )}
+    disabled={disabled}
+    onKeyDown={onKeyDown}
+    ref={ref}
+    role="combobox"
+    type="button"
+    variant="outline"
+    {...props}
+  >
+    <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left">
+      <TriggerContent
+        placeholder={placeholder}
+        selectedOptions={selectedOptions}
+      />
+    </span>
+    <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
+  </Button>
 );
 MultiSelectTrigger.displayName = "MultiSelectTrigger";
 
-const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
-  (
-    {
-      defaultValue = [],
-      emptyText = "No options found.",
-      onKeyDown,
-      onOpenChange,
-      onValueChange,
-      options,
-      searchable = false,
-      searchPlaceholder = "Search options...",
-      value,
-      ...props
+const MultiSelect = ({
+  defaultValue = [],
+  emptyText = "No options found.",
+  onKeyDown,
+  onOpenChange,
+  onValueChange,
+  options,
+  ref,
+  searchable = false,
+  searchPlaceholder = "Search options...",
+  value,
+  ...props
+}: MultiSelectProps & React.RefAttributes<HTMLButtonElement>) => {
+  const contentId = React.useId();
+  const { handleOpenChange, open, selectedValues, setSelectedValues } =
+    useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
+  const selectedOptions = React.useMemo(
+    () => options.filter((option) => selectedValues.includes(option.value)),
+    [options, selectedValues],
+  );
+
+  const handleSelect = React.useCallback(
+    (nextValue: string) => {
+      const nextSelectedValues = selectedValues.includes(nextValue)
+        ? selectedValues.filter((valueItem) => valueItem !== nextValue)
+        : [...selectedValues, nextValue];
+
+      setSelectedValues(nextSelectedValues);
     },
-    ref,
-  ) => {
-    const contentId = React.useId();
-    const { handleOpenChange, open, selectedValues, setSelectedValues } =
-      useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
-    const selectedOptions = React.useMemo(
-      () => options.filter((option) => selectedValues.includes(option.value)),
-      [options, selectedValues],
-    );
-
-    const handleSelect = React.useCallback(
-      (nextValue: string) => {
-        const nextSelectedValues = selectedValues.includes(nextValue)
-          ? selectedValues.filter((valueItem) => valueItem !== nextValue)
-          : [...selectedValues, nextValue];
-
-        setSelectedValues(nextSelectedValues);
-      },
-      [selectedValues, setSelectedValues],
-    );
-
-    const handleTriggerKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        onKeyDown?.(event);
-
-        if (event.defaultPrevented || props.disabled) {
-          return;
-        }
-
-        if (shouldOpenFromKey(event.key)) {
-          event.preventDefault();
-          handleOpenChange(true);
-        }
-      },
-      [handleOpenChange, onKeyDown, props.disabled],
-    );
-
-    return (
-      <Popover onOpenChange={handleOpenChange} open={open}>
-        <PopoverTrigger asChild>
-          <MultiSelectTrigger
-            {...props}
-            contentId={contentId}
-            onKeyDown={handleTriggerKeyDown}
-            open={open}
-            ref={ref}
-            selectedOptions={selectedOptions}
-          />
-        </PopoverTrigger>
-        <MultiSelectContent
+    [selectedValues, setSelectedValues],
+  );
+
+  const handleTriggerKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      onKeyDown?.(event);
+
+      if (event.defaultPrevented || props.disabled) {
+        return;
+      }
+
+      if (shouldOpenFromKey(event.key)) {
+        event.preventDefault();
+        handleOpenChange(true);
+      }
+    },
+    [handleOpenChange, onKeyDown, props.disabled],
+  );
+
+  return (
+    <Popover onOpenChange={handleOpenChange} open={open}>
+      <PopoverTrigger asChild>
+        <MultiSelectTrigger
+          {...props}
           contentId={contentId}
-          disabled={props.disabled || false}
-          emptyText={emptyText}
-          onSelect={handleSelect}
-          options={options}
-          searchable={searchable}
-          searchPlaceholder={searchPlaceholder}
-          selectedValues={selectedValues}
+          onKeyDown={handleTriggerKeyDown}
+          open={open}
+          ref={ref}
+          selectedOptions={selectedOptions}
         />
-      </Popover>
-    );
-  },
-);
+      </PopoverTrigger>
+      <MultiSelectContent
+        contentId={contentId}
+        disabled={props.disabled || false}
+        emptyText={emptyText}
+        onSelect={handleSelect}
+        options={options}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        selectedValues={selectedValues}
+      />
+    </Popover>
+  );
+};
 MultiSelect.displayName = "MultiSelect";
 
 export { MultiSelect };
diff --git a/apps/registry/registry/default/navigation-menu/navigation-menu.tsx b/apps/registry/registry/default/navigation-menu/navigation-menu.tsx
index 3ef167dc..d16a5391 100644
--- a/apps/registry/registry/default/navigation-menu/navigation-menu.tsx
+++ b/apps/registry/registry/default/navigation-menu/navigation-menu.tsx
@@ -1,17 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
 
-const NavigationMenu = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ children, className, ...props }, ref) => (
+const NavigationMenu = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Root>
+  >) => (
   <NavigationMenuPrimitive.Root
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
@@ -23,13 +25,18 @@ const NavigationMenu = forwardRef<
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-));
+);
+
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
+const NavigationMenuList = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.List>
+  >) => (
   <NavigationMenuPrimitive.List
     className={cn(
       "group flex flex-1 list-none items-center justify-center space-x-1",
@@ -38,19 +45,24 @@ const NavigationMenuList = forwardRef<
     ref={ref}
     {...props}
   />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+);
 
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
-const NavigationMenuTrigger = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const NavigationMenuTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>
+  >) => (
   <NavigationMenuPrimitive.Trigger
     className={cn(navigationMenuTriggerStyle(), "group", className)}
     ref={ref}
@@ -62,13 +74,18 @@ const NavigationMenuTrigger = forwardRef<
       className="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
     />
   </NavigationMenuPrimitive.Trigger>
-));
+);
+
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+const NavigationMenuContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Content>
+  >) => (
   <NavigationMenuPrimitive.Content
     className={cn(
       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
@@ -77,15 +94,19 @@ const NavigationMenuContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+);
 
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
+const NavigationMenuViewport = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>
+  >) => (
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
@@ -96,14 +117,19 @@ const NavigationMenuViewport = forwardRef<
       {...props}
     />
   </div>
-));
+);
+
 NavigationMenuViewport.displayName =
   NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
+const NavigationMenuIndicator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>
+  >) => (
   <NavigationMenuPrimitive.Indicator
     className={cn(
       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
@@ -114,7 +140,8 @@ const NavigationMenuIndicator = forwardRef<
   >
     <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-));
+);
+
 NavigationMenuIndicator.displayName =
   NavigationMenuPrimitive.Indicator.displayName;
 
diff --git a/apps/registry/registry/default/newsletter-signup/newsletter-signup.tsx b/apps/registry/registry/default/newsletter-signup/newsletter-signup.tsx
index 3cc40cea..865d0367 100644
--- a/apps/registry/registry/default/newsletter-signup/newsletter-signup.tsx
+++ b/apps/registry/registry/default/newsletter-signup/newsletter-signup.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   type SyntheticEvent,
   useCallback,
@@ -317,16 +316,16 @@ function useNewsletterSignupController(
   };
 }
 
-export const NewsletterSignup = forwardRef<
-  HTMLFormElement,
-  NewsletterSignupProps
->((props, ref) => {
+export const NewsletterSignup = (
+  props: NewsletterSignupProps & React.RefAttributes<HTMLFormElement>,
+) => {
   const {
     autoComplete = "email",
     className,
     labels,
     onStatusChange,
     onSubmit,
+    ref,
     validate,
     variant = "inline",
     ...rest
@@ -364,14 +363,14 @@ export const NewsletterSignup = forwardRef<
       status={controller.status}
     />
   );
-});
+};
 NewsletterSignup.displayName = "NewsletterSignup";
 
 type FormBodyProps = {
   autoComplete: string;
   className?: string;
   errorId: string;
-  formRef: React.ForwardedRef<HTMLFormElement>;
+  formRef?: React.Ref<HTMLFormElement>;
   inputId: string;
   inputRef: React.RefObject<HTMLInputElement | null>;
   labels: Required<NewsletterSignupLabels>;
diff --git a/apps/registry/registry/default/number-input/number-input.tsx b/apps/registry/registry/default/number-input/number-input.tsx
index b2486812..d31a6fd2 100644
--- a/apps/registry/registry/default/number-input/number-input.tsx
+++ b/apps/registry/registry/default/number-input/number-input.tsx
@@ -105,7 +105,7 @@ function NumberInputField({
   ...props
 }: React.ComponentPropsWithoutRef<"input"> & {
   onValueChange: (value?: number) => void;
-  reference: React.ForwardedRef<HTMLInputElement>;
+  reference?: React.Ref<HTMLInputElement>;
   resolvedValue?: number;
 }) {
   return (
@@ -133,21 +133,19 @@ function NumberInputField({
   );
 }
 
-function NumberInputComponent(
-  {
-    className,
-    defaultValue,
-    disabled,
-    max,
-    min,
-    onValueChange,
-    placeholder,
-    step = 1,
-    value,
-    ...props
-  }: NumberInputProps,
-  reference: React.ForwardedRef<HTMLInputElement>,
-) {
+function NumberInputComponent({
+  className,
+  defaultValue,
+  disabled,
+  max,
+  min,
+  onValueChange,
+  placeholder,
+  ref: reference,
+  step = 1,
+  value,
+  ...props
+}: NumberInputProps & React.RefAttributes<HTMLInputElement>) {
   const { commitValue, resolvedValue } = useNumberInputState(
     value,
     defaultValue,
@@ -203,7 +201,9 @@ function NumberInputComponent(
   );
 }
 
-const NumberInput = React.forwardRef(NumberInputComponent);
+const NumberInput = NumberInputComponent as typeof NumberInputComponent & {
+  displayName?: string;
+};
 NumberInput.displayName = "NumberInput";
 
 export { NumberInput };
diff --git a/apps/registry/registry/default/number-ticker/number-ticker.tsx b/apps/registry/registry/default/number-ticker/number-ticker.tsx
index 6deaaf85..93897e55 100644
--- a/apps/registry/registry/default/number-ticker/number-ticker.tsx
+++ b/apps/registry/registry/default/number-ticker/number-ticker.tsx
@@ -27,77 +27,70 @@ function getNumberTickerFormatter(
   return formatter;
 }
 
-export const NumberTicker = React.forwardRef<
-  HTMLSpanElement,
-  NumberTickerProps
->(
-  (
-    {
-      className,
-      delay = 0,
-      duration = 1.2,
-      formatOptions,
-      from = 0,
-      locale,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = React.useState(from);
-
-    React.useEffect(() => {
-      const reducedMotion =
-        typeof window !== "undefined" &&
-        typeof window.matchMedia === "function" &&
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-      if (reducedMotion || duration <= 0) {
-        setCurrentValue(value);
-        return;
-      }
-
-      let animationFrame = 0;
-      let timeoutId = 0;
-      const startDelay = Math.max(0, delay * 1000);
-      const durationMs = duration * 1000;
-
-      timeoutId = window.setTimeout(() => {
-        const startTime = performance.now();
-
-        const tick = (timestamp: number) => {
-          const elapsed = timestamp - startTime;
-          const progress = Math.min(elapsed / durationMs, 1);
-          const nextValue = from + (value - from) * progress;
-
-          setCurrentValue(nextValue);
-
-          if (progress < 1) {
-            animationFrame = window.requestAnimationFrame(tick);
-          }
-        };
-
-        animationFrame = window.requestAnimationFrame(tick);
-      }, startDelay);
-
-      return () => {
-        window.clearTimeout(timeoutId);
-        window.cancelAnimationFrame(animationFrame);
+export const NumberTicker = ({
+  className,
+  delay = 0,
+  duration = 1.2,
+  formatOptions,
+  from = 0,
+  locale,
+  ref,
+  value,
+  ...props
+}: NumberTickerProps & React.RefAttributes<HTMLSpanElement>) => {
+  const [currentValue, setCurrentValue] = React.useState(from);
+
+  React.useEffect(() => {
+    const reducedMotion =
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (reducedMotion || duration <= 0) {
+      setCurrentValue(value);
+      return;
+    }
+
+    let animationFrame = 0;
+    let timeoutId = 0;
+    const startDelay = Math.max(0, delay * 1000);
+    const durationMs = duration * 1000;
+
+    timeoutId = window.setTimeout(() => {
+      const startTime = performance.now();
+
+      const tick = (timestamp: number) => {
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / durationMs, 1);
+        const nextValue = from + (value - from) * progress;
+
+        setCurrentValue(nextValue);
+
+        if (progress < 1) {
+          animationFrame = window.requestAnimationFrame(tick);
+        }
       };
-    }, [delay, duration, from, value]);
-
-    const formatter = getNumberTickerFormatter(locale, formatOptions);
-
-    return (
-      <span
-        className={cn("tabular-nums tracking-tight", className)}
-        ref={ref}
-        {...props}
-      >
-        {formatter.format(currentValue)}
-      </span>
-    );
-  },
-);
+
+      animationFrame = window.requestAnimationFrame(tick);
+    }, startDelay);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [delay, duration, from, value]);
+
+  const formatter = getNumberTickerFormatter(locale, formatOptions);
+
+  return (
+    <span
+      className={cn("tabular-nums tracking-tight", className)}
+      ref={ref}
+      {...props}
+    >
+      {formatter.format(currentValue)}
+    </span>
+  );
+};
 
 NumberTicker.displayName = "NumberTicker";
diff --git a/apps/registry/registry/default/object-card/object-card.tsx b/apps/registry/registry/default/object-card/object-card.tsx
index 424ef34b..6b4367dc 100644
--- a/apps/registry/registry/default/object-card/object-card.tsx
+++ b/apps/registry/registry/default/object-card/object-card.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -134,52 +132,47 @@ function ObjectCardActions({ actions }: Pick<ObjectCardProps, "actions">) {
   );
 }
 
-const ObjectCard = forwardRef<HTMLElement, ObjectCardProps>(
-  (
-    {
-      actions,
-      children,
+const ObjectCard = ({
+  actions,
+  children,
+  className,
+  footer,
+  kind = "Object",
+  metrics = [],
+  ports,
+  ref,
+  state = "idle",
+  summary,
+  title,
+  ...props
+}: ObjectCardProps & React.RefAttributes<HTMLElement>) => (
+  <article
+    className={cn(
+      "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
       className,
-      footer,
-      kind = "Object",
-      metrics = [],
-      ports,
-      state = "idle",
-      summary,
-      title,
-      ...props
-    },
-    ref,
-  ) => (
-    <article
-      className={cn(
-        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
-        className,
-      )}
-      data-state={state}
-      ref={ref}
-      {...props}
-    >
-      <div className="pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" />
-      <ObjectCardHeader
-        kind={kind}
-        ports={ports}
-        state={state}
-        summary={summary}
-        title={title}
-      />
-      <ObjectCardMetrics metrics={metrics} />
-      {children ? <div className="space-y-3">{children}</div> : null}
-      <ObjectCardActions actions={actions} />
-      {footer ? (
-        <div className="border-t border-border/60 pt-3 text-sm text-muted-foreground">
-          {footer}
-        </div>
-      ) : null}
-    </article>
-  ),
+    )}
+    data-state={state}
+    ref={ref}
+    {...props}
+  >
+    <div className="pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" />
+    <ObjectCardHeader
+      kind={kind}
+      ports={ports}
+      state={state}
+      summary={summary}
+      title={title}
+    />
+    <ObjectCardMetrics metrics={metrics} />
+    {children ? <div className="space-y-3">{children}</div> : null}
+    <ObjectCardActions actions={actions} />
+    {footer ? (
+      <div className="border-t border-border/60 pt-3 text-sm text-muted-foreground">
+        {footer}
+      </div>
+    ) : null}
+  </article>
 );
 
 ObjectCard.displayName = "ObjectCard";
-
 export { ObjectCard };
diff --git a/apps/registry/registry/default/object-handle/object-handle.tsx b/apps/registry/registry/default/object-handle/object-handle.tsx
index 5deb5ec0..238d0696 100644
--- a/apps/registry/registry/default/object-handle/object-handle.tsx
+++ b/apps/registry/registry/default/object-handle/object-handle.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -12,32 +10,35 @@ export type ObjectHandleProps = Omit<
   label?: ReactNode;
 };
 
-const ObjectHandle = forwardRef<HTMLButtonElement, ObjectHandleProps>(
-  ({ className, hint, label = "Move", ...props }, ref) => (
-    <button
-      className={cn(
-        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
-        className,
-      )}
-      ref={ref}
-      type="button"
-      {...props}
+const ObjectHandle = ({
+  className,
+  hint,
+  label = "Move",
+  ref,
+  ...props
+}: ObjectHandleProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    className={cn(
+      "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
+      className,
+    )}
+    ref={ref}
+    type="button"
+    {...props}
+  >
+    <span
+      aria-hidden="true"
+      className="grid grid-cols-2 gap-0.5 text-[8px] leading-none"
     >
-      <span
-        aria-hidden="true"
-        className="grid grid-cols-2 gap-0.5 text-[8px] leading-none"
-      >
-        <span>•</span>
-        <span>•</span>
-        <span>•</span>
-        <span>•</span>
-      </span>
-      <span>{label}</span>
-      {hint ? <span className="text-muted-foreground/80">{hint}</span> : null}
-    </button>
-  ),
+      <span>•</span>
+      <span>•</span>
+      <span>•</span>
+      <span>•</span>
+    </span>
+    <span>{label}</span>
+    {hint ? <span className="text-muted-foreground/80">{hint}</span> : null}
+  </button>
 );
 
 ObjectHandle.displayName = "ObjectHandle";
-
 export { ObjectHandle };
diff --git a/apps/registry/registry/default/object-inspector/object-inspector.tsx b/apps/registry/registry/default/object-inspector/object-inspector.tsx
index 208608b6..89d9cbef 100644
--- a/apps/registry/registry/default/object-inspector/object-inspector.tsx
+++ b/apps/registry/registry/default/object-inspector/object-inspector.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -173,56 +169,57 @@ const Header = (props: {
  *
  * @public
  */
-export const ObjectInspector = forwardRef<HTMLElement, ObjectInspectorProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      kind,
-      labels,
-      status = "idle",
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (!kind || !title) {
-      return (
-        <section
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
-            className,
-          )}
-          data-object-inspector
-          data-object-state="empty"
-          ref={ref}
-          {...rest}
-        >
-          <span aria-hidden="true" className="text-lg">
-            ◇
-          </span>
-          <span>{resolvedLabels.empty}</span>
-        </section>
-      );
-    }
+export const ObjectInspector = (
+  props: ObjectInspectorProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    kind,
+    labels,
+    ref,
+    status = "idle",
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (!kind || !title) {
     return (
       <section
         aria-label={resolvedLabels.region}
         className={cn(
-          "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+          "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
           className,
         )}
         data-object-inspector
-        data-object-kind={kind}
-        data-object-status={status}
+        data-object-state="empty"
         ref={ref}
         {...rest}
       >
-        <Header kind={kind} status={status} subtitle={subtitle} title={title} />
-        {children ? <div className="space-y-2">{children}</div> : null}
+        <span aria-hidden="true" className="text-lg">
+          ◇
+        </span>
+        <span>{resolvedLabels.empty}</span>
       </section>
     );
-  },
-);
+  }
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+        className,
+      )}
+      data-object-inspector
+      data-object-kind={kind}
+      data-object-status={status}
+      ref={ref}
+      {...rest}
+    >
+      <Header kind={kind} status={status} subtitle={subtitle} title={title} />
+      {children ? <div className="space-y-2">{children}</div> : null}
+    </section>
+  );
+};
 ObjectInspector.displayName = "ObjectInspector";
diff --git a/apps/registry/registry/default/order-book/order-book.tsx b/apps/registry/registry/default/order-book/order-book.tsx
index 61be5763..70e70aea 100644
--- a/apps/registry/registry/default/order-book/order-book.tsx
+++ b/apps/registry/registry/default/order-book/order-book.tsx
@@ -104,58 +104,61 @@ function BookSide({
   );
 }
 
-export const OrderBook = React.forwardRef<HTMLDivElement, OrderBookProps>(
-  ({ asks, bids, className, precision = 2, ...props }, reference) => {
-    if (asks.length === 0 && bids.length === 0) {
-      return null;
-    }
+export const OrderBook = ({
+  asks,
+  bids,
+  className,
+  precision = 2,
+  ref: reference,
+  ...props
+}: OrderBookProps & React.RefAttributes<HTMLDivElement>) => {
+  if (asks.length === 0 && bids.length === 0) {
+    return null;
+  }
 
-    const askLevels = withCumulativeTotal(asks);
-    const bidLevels = withCumulativeTotal(bids);
-    const bestAsk = askLevels[0];
-    const bestBid = bidLevels[0];
-    const spread =
-      bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
+  const askLevels = withCumulativeTotal(asks);
+  const bidLevels = withCumulativeTotal(bids);
+  const bestAsk = askLevels[0];
+  const bestBid = bidLevels[0];
+  const spread =
+    bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
 
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              Level II
-            </p>
-            <h2 className="text-lg font-semibold text-foreground">
-              Order book
-            </h2>
-          </div>
-          <div className="rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums">
-            Spread {formatNumber(spread, precision)}
-          </div>
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            Level II
+          </p>
+          <h2 className="text-lg font-semibold text-foreground">Order book</h2>
         </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <BookSide
-            accent="ask"
-            levels={askLevels}
-            precision={precision}
-            title="Asks"
-          />
-          <BookSide
-            accent="bid"
-            levels={bidLevels}
-            precision={precision}
-            title="Bids"
-          />
+        <div className="rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums">
+          Spread {formatNumber(spread, precision)}
         </div>
       </div>
-    );
-  },
-);
+      <div className="grid gap-4 lg:grid-cols-2">
+        <BookSide
+          accent="ask"
+          levels={askLevels}
+          precision={precision}
+          title="Asks"
+        />
+        <BookSide
+          accent="bid"
+          levels={bidLevels}
+          precision={precision}
+          title="Bids"
+        />
+      </div>
+    </div>
+  );
+};
 
 OrderBook.displayName = "OrderBook";
diff --git a/apps/registry/registry/default/parallel-timeline/parallel-timeline.tsx b/apps/registry/registry/default/parallel-timeline/parallel-timeline.tsx
index 456a04a9..c09ed2c4 100644
--- a/apps/registry/registry/default/parallel-timeline/parallel-timeline.tsx
+++ b/apps/registry/registry/default/parallel-timeline/parallel-timeline.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -373,54 +368,55 @@ function TrackRow({ endYear, startYear, track }: TrackRowProps): ReactNode {
  *
  * @public
  */
-export const ParallelTimeline = forwardRef<HTMLElement, ParallelTimelineProps>(
-  (props, ref) => {
-    const {
-      className,
-      endYear,
-      eras = [],
-      labels,
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      tracks,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount],
-    );
+export const ParallelTimeline = (
+  props: ParallelTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    endYear,
+    eras = [],
+    labels,
+    ref,
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    tracks,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount],
+  );
 
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <div className="flex items-stretch gap-3 border-b border-border">
-          <div aria-hidden="true" className="w-32 shrink-0" />
-          <Axis ticks={ticks} />
-        </div>
-        <div className="relative">
-          <EraBands endYear={endYear} eras={eras} startYear={startYear} />
-          {tracks.map((track) => (
-            <TrackRow
-              endYear={endYear}
-              key={track.id}
-              startYear={startYear}
-              track={track}
-            />
-          ))}
-        </div>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <div className="flex items-stretch gap-3 border-b border-border">
+        <div aria-hidden="true" className="w-32 shrink-0" />
+        <Axis ticks={ticks} />
+      </div>
+      <div className="relative">
+        <EraBands endYear={endYear} eras={eras} startYear={startYear} />
+        {tracks.map((track) => (
+          <TrackRow
+            endYear={endYear}
+            key={track.id}
+            startYear={startYear}
+            track={track}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
 ParallelTimeline.displayName = "ParallelTimeline";
diff --git a/apps/registry/registry/default/password-input/password-input.tsx b/apps/registry/registry/default/password-input/password-input.tsx
index b5b807ba..834f829c 100644
--- a/apps/registry/registry/default/password-input/password-input.tsx
+++ b/apps/registry/registry/default/password-input/password-input.tsx
@@ -14,43 +14,39 @@ export type PasswordInputProps = Omit<
   showLabel?: string;
 };
 
-const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  (
-    {
-      className,
-      hideLabel = "Hide password",
-      showLabel = "Show password",
-      ...props
-    },
-    reference,
-  ) => {
-    const [visible, setVisible] = React.useState(false);
+const PasswordInput = ({
+  className,
+  hideLabel = "Hide password",
+  ref: reference,
+  showLabel = "Show password",
+  ...props
+}: PasswordInputProps & React.RefAttributes<HTMLInputElement>) => {
+  const [visible, setVisible] = React.useState(false);
 
-    return (
-      <div className="relative">
-        <input
-          className={cn(
-            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            className,
-          )}
-          ref={reference}
-          type={visible ? "text" : "password"}
-          {...props}
-        />
-        <button
-          aria-label={visible ? hideLabel : showLabel}
-          className="absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground"
-          onClick={() => {
-            setVisible((previous) => !previous);
-          }}
-          type="button"
-        >
-          {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-        </button>
-      </div>
-    );
-  },
-);
+  return (
+    <div className="relative">
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={reference}
+        type={visible ? "text" : "password"}
+        {...props}
+      />
+      <button
+        aria-label={visible ? hideLabel : showLabel}
+        className="absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground"
+        onClick={() => {
+          setVisible((previous) => !previous);
+        }}
+        type="button"
+      >
+        {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+      </button>
+    </div>
+  );
+};
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };
diff --git a/apps/registry/registry/default/plan-badge/plan-badge.tsx b/apps/registry/registry/default/plan-badge/plan-badge.tsx
index 08934da6..d4400777 100644
--- a/apps/registry/registry/default/plan-badge/plan-badge.tsx
+++ b/apps/registry/registry/default/plan-badge/plan-badge.tsx
@@ -50,30 +50,35 @@ function getPlanClasses(tier: PlanBadgeTier, state: PlanBadgeState): string {
   }
 }
 
-export const PlanBadge = React.forwardRef<HTMLSpanElement, PlanBadgeProps>(
-  ({ className, label, state = "current", tier, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
-          getPlanClasses(tier, state),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
-        <span>{label ?? getPlanLabel(tier)}</span>
-        {state === "trial" ? (
-          <span className="text-current/80">Trial</span>
-        ) : null}
-        {state === "legacy" ? (
-          <span className="text-current/80">Legacy</span>
-        ) : null}
-      </span>
-    );
-  },
-);
+export const PlanBadge = ({
+  className,
+  label,
+  ref: reference,
+  state = "current",
+  tier,
+  ...props
+}: PlanBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
+        getPlanClasses(tier, state),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span>{label ?? getPlanLabel(tier)}</span>
+      {state === "trial" ? (
+        <span className="text-current/80">Trial</span>
+      ) : null}
+      {state === "legacy" ? (
+        <span className="text-current/80">Legacy</span>
+      ) : null}
+    </span>
+  );
+};
 
 PlanBadge.displayName = "PlanBadge";
diff --git a/apps/registry/registry/default/playback-ghost/playback-ghost.tsx b/apps/registry/registry/default/playback-ghost/playback-ghost.tsx
index 9cf6816d..fa4326f1 100644
--- a/apps/registry/registry/default/playback-ghost/playback-ghost.tsx
+++ b/apps/registry/registry/default/playback-ghost/playback-ghost.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -105,57 +101,58 @@ const clamp01 = (v: number): number => {
  *
  * @public
  */
-export const PlaybackGhost = forwardRef<HTMLDivElement, PlaybackGhostProps>(
-  (props, ref) => {
-    const {
-      className,
-      kind,
-      label,
-      labels,
-      opacity = 0.4,
-      size = 40,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeOpacity = clamp01(opacity);
-    const safeSize = size < 16 ? 16 : size;
-    const ariaLabel = kind
-      ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}`
-      : resolvedLabels.region;
-    return (
-      <div
-        aria-label={ariaLabel}
-        className={cn(
-          "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
-          className,
-        )}
-        data-playback-ghost
-        data-playback-kind={kind ?? "unknown"}
-        ref={ref}
-        role="img"
-        style={{
-          left: x,
-          minHeight: safeSize,
-          minWidth: safeSize,
-          opacity: safeOpacity,
-          top: y,
-        }}
-        {...rest}
-      >
-        {kind ? (
-          <span aria-hidden="true" className="text-muted-foreground">
-            {KIND_GLYPH[kind]}
-          </span>
-        ) : null}
-        {label ? (
-          <span className="truncate" data-playback-ghost-label>
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const PlaybackGhost = (
+  props: PlaybackGhostProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    kind,
+    label,
+    labels,
+    opacity = 0.4,
+    ref,
+    size = 40,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeOpacity = clamp01(opacity);
+  const safeSize = size < 16 ? 16 : size;
+  const ariaLabel = kind
+    ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}`
+    : resolvedLabels.region;
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
+        className,
+      )}
+      data-playback-ghost
+      data-playback-kind={kind ?? "unknown"}
+      ref={ref}
+      role="img"
+      style={{
+        left: x,
+        minHeight: safeSize,
+        minWidth: safeSize,
+        opacity: safeOpacity,
+        top: y,
+      }}
+      {...rest}
+    >
+      {kind ? (
+        <span aria-hidden="true" className="text-muted-foreground">
+          {KIND_GLYPH[kind]}
+        </span>
+      ) : null}
+      {label ? (
+        <span className="truncate" data-playback-ghost-label>
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 PlaybackGhost.displayName = "PlaybackGhost";
diff --git a/apps/registry/registry/default/policy-delivery-panel/policy-delivery-panel.tsx b/apps/registry/registry/default/policy-delivery-panel/policy-delivery-panel.tsx
index 9fcaa5f8..487ff1ed 100644
--- a/apps/registry/registry/default/policy-delivery-panel/policy-delivery-panel.tsx
+++ b/apps/registry/registry/default/policy-delivery-panel/policy-delivery-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -153,11 +149,17 @@ const Row = (props: { policy: PolicyEntry }): React.ReactElement => {
  *
  * @public
  */
-export const PolicyDeliveryPanel = forwardRef<
-  HTMLElement,
-  PolicyDeliveryPanelProps
->((props, ref) => {
-  const { className, labels, policies, title = "Policies", ...rest } = props;
+export const PolicyDeliveryPanel = (
+  props: PolicyDeliveryPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    labels,
+    policies,
+    ref,
+    title = "Policies",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -193,5 +195,5 @@ export const PolicyDeliveryPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 PolicyDeliveryPanel.displayName = "PolicyDeliveryPanel";
diff --git a/apps/registry/registry/default/popover/popover.tsx b/apps/registry/registry/default/popover/popover.tsx
index 4e90f0ae..a585766b 100644
--- a/apps/registry/registry/default/popover/popover.tsx
+++ b/apps/registry/registry/default/popover/popover.tsx
@@ -1,21 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "@vllnt/ui";
-
 const Popover = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
-
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-const PopoverContent = forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = "center", className, sideOffset = 4, ...props }, ref) => (
+const PopoverContent = ({
+  align = "center",
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof PopoverPrimitive.Content>>) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       align={align}
@@ -28,7 +26,7 @@ const PopoverContent = forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+);
 
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
diff --git a/apps/registry/registry/default/presence-stack/presence-stack.tsx b/apps/registry/registry/default/presence-stack/presence-stack.tsx
index 165d7d70..b79c0aab 100644
--- a/apps/registry/registry/default/presence-stack/presence-stack.tsx
+++ b/apps/registry/registry/default/presence-stack/presence-stack.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -122,46 +118,47 @@ const Avatar = (props: { user: PresenceUser }): React.ReactElement => {
  *
  * @public
  */
-export const PresenceStack = forwardRef<HTMLDivElement, PresenceStackProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      max = 5,
-      onOverflowActivate,
-      users,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const visible = max >= users.length ? users : users.slice(0, max);
-    const hidden = users.length - visible.length;
-    const handleOverflow = (): void => {
-      onOverflowActivate?.();
-    };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn("inline-flex items-center pl-2", className)}
-        data-presence-stack
-        ref={ref}
-        role="group"
-        {...rest}
-      >
-        {visible.map((user) => (
-          <Avatar key={user.id} user={user} />
-        ))}
-        {hidden > 0
-          ? renderOverflow({
-              count: hidden,
-              handleClick: handleOverflow,
-              handlerProvided: Boolean(onOverflowActivate),
-              labels: resolvedLabels,
-            })
-          : null}
-      </div>
-    );
-  },
-);
+export const PresenceStack = (
+  props: PresenceStackProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    labels,
+    max = 5,
+    onOverflowActivate,
+    ref,
+    users,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = max >= users.length ? users : users.slice(0, max);
+  const hidden = users.length - visible.length;
+  const handleOverflow = (): void => {
+    onOverflowActivate?.();
+  };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn("inline-flex items-center pl-2", className)}
+      data-presence-stack
+      ref={ref}
+      role="group"
+      {...rest}
+    >
+      {visible.map((user) => (
+        <Avatar key={user.id} user={user} />
+      ))}
+      {hidden > 0
+        ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels,
+          })
+        : null}
+    </div>
+  );
+};
 PresenceStack.displayName = "PresenceStack";
 
 const renderOverflow = (input: {
diff --git a/apps/registry/registry/default/presence-sync-indicator/presence-sync-indicator.tsx b/apps/registry/registry/default/presence-sync-indicator/presence-sync-indicator.tsx
index 0cf4f2d8..a228d22e 100644
--- a/apps/registry/registry/default/presence-sync-indicator/presence-sync-indicator.tsx
+++ b/apps/registry/registry/default/presence-sync-indicator/presence-sync-indicator.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -90,11 +86,10 @@ export type PresenceSyncIndicatorProps = {
  *
  * @public
  */
-export const PresenceSyncIndicator = forwardRef<
-  HTMLDivElement,
-  PresenceSyncIndicatorProps
->((props, ref) => {
-  const { className, label, labels, state, status, ...rest } = props;
+export const PresenceSyncIndicator = (
+  props: PresenceSyncIndicatorProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, label, labels, ref, state, status, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const text = label ?? STATE_LABEL[state];
   return (
@@ -126,5 +121,5 @@ export const PresenceSyncIndicator = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
diff --git a/apps/registry/registry/default/pricing-table/pricing-table.tsx b/apps/registry/registry/default/pricing-table/pricing-table.tsx
index e1932319..5b93eca6 100644
--- a/apps/registry/registry/default/pricing-table/pricing-table.tsx
+++ b/apps/registry/registry/default/pricing-table/pricing-table.tsx
@@ -3,7 +3,6 @@
 import {
   type ButtonHTMLAttributes,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -231,45 +230,44 @@ function PlanCta({ cta, highlighted }: PlanCtaProps): ReactNode {
  *
  * @public
  */
-export const PricingPlan = forwardRef<HTMLDivElement, PricingPlanProps>(
-  (props, ref) => {
-    const {
-      badge,
-      className,
-      cta,
-      description,
-      features,
-      highlighted = false,
-      name,
-      period,
-      price,
-      ...rest
-    } = props;
-    return (
-      <div
-        className={cn(
-          "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
-          highlighted
-            ? "border-primary shadow-md ring-1 ring-primary/20"
-            : "border-border",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {badge ? (
-          <PlanBadgePill badge={badge} highlighted={highlighted} />
-        ) : null}
-        <PlanHeader description={description} name={name} />
-        <PlanPrice period={period} price={price} />
-        {features && features.length > 0 ? (
-          <PlanFeatures features={features} />
-        ) : null}
-        {cta ? <PlanCta cta={cta} highlighted={highlighted} /> : null}
-      </div>
-    );
-  },
-);
+export const PricingPlan = (
+  props: PricingPlanProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    badge,
+    className,
+    cta,
+    description,
+    features,
+    highlighted = false,
+    name,
+    period,
+    price,
+    ref,
+    ...rest
+  } = props;
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
+        highlighted
+          ? "border-primary shadow-md ring-1 ring-primary/20"
+          : "border-border",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {badge ? <PlanBadgePill badge={badge} highlighted={highlighted} /> : null}
+      <PlanHeader description={description} name={name} />
+      <PlanPrice period={period} price={price} />
+      {features && features.length > 0 ? (
+        <PlanFeatures features={features} />
+      ) : null}
+      {cta ? <PlanCta cta={cta} highlighted={highlighted} /> : null}
+    </div>
+  );
+};
 PricingPlan.displayName = "PricingPlan";
 
 /**
@@ -382,45 +380,46 @@ function PeriodToggle({
  *
  * @public
  */
-export const PricingTable = forwardRef<HTMLDivElement, PricingTableProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultPeriod = "monthly",
-      onPeriodChange,
-      period: controlledPeriod,
-      periodLabels,
-      showPeriodToggle = false,
-      ...rest
-    } = props;
+export const PricingTable = (
+  props: PricingTableProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultPeriod = "monthly",
+    onPeriodChange,
+    period: controlledPeriod,
+    periodLabels,
+    ref,
+    showPeriodToggle = false,
+    ...rest
+  } = props;
 
-    const [uncontrolledPeriod, setUncontrolledPeriod] =
-      useState<PricingPeriod>(defaultPeriod);
-    const period = controlledPeriod ?? uncontrolledPeriod;
+  const [uncontrolledPeriod, setUncontrolledPeriod] =
+    useState<PricingPeriod>(defaultPeriod);
+  const period = controlledPeriod ?? uncontrolledPeriod;
 
-    const handlePeriodChange = useCallback(
-      (next: PricingPeriod) => {
-        if (controlledPeriod === undefined) setUncontrolledPeriod(next);
-        onPeriodChange?.(next);
-      },
-      [controlledPeriod, onPeriodChange],
-    );
+  const handlePeriodChange = useCallback(
+    (next: PricingPeriod) => {
+      if (controlledPeriod === undefined) setUncontrolledPeriod(next);
+      onPeriodChange?.(next);
+    },
+    [controlledPeriod, onPeriodChange],
+  );
 
-    return (
-      <div className={cn("flex flex-col gap-6", className)} ref={ref} {...rest}>
-        {showPeriodToggle ? (
-          <PeriodToggle
-            labels={periodLabels ?? {}}
-            onChange={handlePeriodChange}
-            period={period}
-          />
-        ) : null}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {children}
-        </div>
+  return (
+    <div className={cn("flex flex-col gap-6", className)} ref={ref} {...rest}>
+      {showPeriodToggle ? (
+        <PeriodToggle
+          labels={periodLabels ?? {}}
+          onChange={handlePeriodChange}
+          period={period}
+        />
+      ) : null}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 PricingTable.displayName = "PricingTable";
diff --git a/apps/registry/registry/default/primary-source-viewer/primary-source-viewer.tsx b/apps/registry/registry/default/primary-source-viewer/primary-source-viewer.tsx
index a19b8f88..9803a6f6 100644
--- a/apps/registry/registry/default/primary-source-viewer/primary-source-viewer.tsx
+++ b/apps/registry/registry/default/primary-source-viewer/primary-source-viewer.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -117,7 +116,7 @@ type ViewerCtx = {
 const ViewerContext = createContext<null | ViewerCtx>(null);
 
 function useViewerContext(): ViewerCtx {
-  const ctx = useContext(ViewerContext);
+  const ctx = use(ViewerContext);
   if (!ctx) {
     throw new Error("PrimarySourceViewer subcomponent used outside its root.");
   }
@@ -162,10 +161,12 @@ function useViewerState(
  *
  * @public
  */
-export const PrimarySourceToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 px-4 py-2",
@@ -177,7 +178,7 @@ export const PrimarySourceToolbar = forwardRef<
   >
     {children}
   </div>
-));
+);
 PrimarySourceToolbar.displayName = "PrimarySourceToolbar";
 
 type ToolbarButtonProps = {
@@ -186,22 +187,27 @@ type ToolbarButtonProps = {
   onActivate: () => void;
 } & Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">;
 
-const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => (
-    <button
-      aria-label={ariaLabel}
-      className={cn(
-        "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className,
-      )}
-      onClick={onActivate}
-      ref={ref}
-      type="button"
-      {...rest}
-    >
-      {glyph}
-    </button>
-  ),
+const ToolbarButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    aria-label={ariaLabel}
+    className={cn(
+      "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className,
+    )}
+    onClick={onActivate}
+    ref={ref}
+    type="button"
+    {...rest}
+  >
+    {glyph}
+  </button>
 );
 ToolbarButton.displayName = "ToolbarButton";
 
@@ -210,10 +216,11 @@ ToolbarButton.displayName = "ToolbarButton";
  *
  * @public
  */
-export const PrimarySourceZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceZoomIn = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useViewerContext();
   return (
     <ToolbarButton
@@ -224,7 +231,7 @@ export const PrimarySourceZoomIn = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
 
 /**
@@ -232,10 +239,11 @@ PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
  *
  * @public
  */
-export const PrimarySourceZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceZoomOut = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useViewerContext();
   return (
     <ToolbarButton
@@ -246,7 +254,7 @@ export const PrimarySourceZoomOut = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
 
 /**
@@ -254,10 +262,11 @@ PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
  *
  * @public
  */
-export const PrimarySourceRotate = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceRotate = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, rotate } = useViewerContext();
   return (
     <ToolbarButton
@@ -268,7 +277,7 @@ export const PrimarySourceRotate = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceRotate.displayName = "PrimarySourceRotate";
 
 /**
@@ -310,10 +319,12 @@ export type PrimarySourceAnnotationProps = {
  *
  * @public
  */
-export const PrimarySourceAnnotations = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceAnnotations = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Annotations"
     className={cn("pointer-events-none absolute inset-0 z-10", className)}
@@ -322,7 +333,7 @@ export const PrimarySourceAnnotations = forwardRef<
   >
     {children}
   </div>
-));
+);
 PrimarySourceAnnotations.displayName = "PrimarySourceAnnotations";
 
 type AnnotationTooltipProps = {
@@ -365,16 +376,16 @@ function AnnotationTooltip({
  *
  * @public
  */
-export const PrimarySourceAnnotation = forwardRef<
-  HTMLButtonElement,
-  PrimarySourceAnnotationProps
->((props, ref) => {
+export const PrimarySourceAnnotation = (
+  props: PrimarySourceAnnotationProps & React.RefAttributes<HTMLButtonElement>,
+) => {
   const {
     category,
     className,
     color = "amber",
     id,
     note,
+    ref,
     region,
     ...rest
   } = props;
@@ -412,7 +423,7 @@ export const PrimarySourceAnnotation = forwardRef<
       />
     </button>
   );
-});
+};
 PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
 
 /**
@@ -420,10 +431,12 @@ PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
  *
  * @public
  */
-export const PrimarySourceTranscription = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"aside">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceTranscription = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"aside"> & React.RefAttributes<HTMLDivElement>) => (
   <aside
     aria-label="Transcription"
     className={cn(
@@ -438,7 +451,7 @@ export const PrimarySourceTranscription = forwardRef<
     </h3>
     <div className="space-y-2 text-foreground">{children}</div>
   </aside>
-));
+);
 PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
 
 /**
@@ -446,10 +459,12 @@ PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
  *
  * @public
  */
-export const PrimarySourceContext = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"footer">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceContext = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"footer"> & React.RefAttributes<HTMLElement>) => (
   <footer
     className={cn(
       "grid gap-6 border-t border-border bg-muted/30 p-4 md:grid-cols-2",
@@ -460,7 +475,7 @@ export const PrimarySourceContext = forwardRef<
   >
     {children}
   </footer>
-));
+);
 PrimarySourceContext.displayName = "PrimarySourceContext";
 
 /**
@@ -469,10 +484,12 @@ PrimarySourceContext.displayName = "PrimarySourceContext";
  *
  * @public
  */
-export const PrimarySourceMetadata = forwardRef<
-  HTMLDListElement,
-  ComponentPropsWithoutRef<"dl">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceMetadata = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"dl"> & React.RefAttributes<HTMLDListElement>) => (
   <dl
     aria-label="Metadata"
     className={cn(
@@ -484,7 +501,7 @@ export const PrimarySourceMetadata = forwardRef<
   >
     {children}
   </dl>
-));
+);
 PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
 
 /**
@@ -492,10 +509,12 @@ PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
  *
  * @public
  */
-export const PrimarySourceQuestions = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceQuestions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Discussion questions"
     className={cn("space-y-2 text-sm", className)}
@@ -507,7 +526,7 @@ export const PrimarySourceQuestions = forwardRef<
     </h3>
     <div className="space-y-1 text-foreground">{children}</div>
   </div>
-));
+);
 PrimarySourceQuestions.displayName = "PrimarySourceQuestions";
 
 type ChildBuckets = {
@@ -639,16 +658,16 @@ export type PrimarySourceViewerProps = {
  *
  * @public
  */
-export const PrimarySourceViewer = forwardRef<
-  HTMLElement,
-  PrimarySourceViewerProps
->((props, ref) => {
+export const PrimarySourceViewer = (
+  props: PrimarySourceViewerProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     children,
     className,
     labels,
     origin,
     period,
+    ref,
     source,
     title,
     ...rest
@@ -697,5 +716,5 @@ export const PrimarySourceViewer = forwardRef<
       </section>
     </ViewerContext.Provider>
   );
-});
+};
 PrimarySourceViewer.displayName = "PrimarySourceViewer";
diff --git a/apps/registry/registry/default/prompt-templates/prompt-templates.tsx b/apps/registry/registry/default/prompt-templates/prompt-templates.tsx
index 96e09498..d2244684 100644
--- a/apps/registry/registry/default/prompt-templates/prompt-templates.tsx
+++ b/apps/registry/registry/default/prompt-templates/prompt-templates.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -595,37 +594,37 @@ function TemplateGrid({ controller, labels }: GridProps): ReactNode {
   );
 }
 
-export const PromptTemplates = forwardRef<HTMLElement, PromptTemplatesProps>(
-  (props, ref) => {
-    const { categories, className, labels, onSelect, templates, ...rest } =
-      props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const controller = usePromptTemplatesController(templates, onSelect);
+export const PromptTemplates = (
+  props: PromptTemplatesProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { categories, className, labels, onSelect, ref, templates, ...rest } =
+    props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const controller = usePromptTemplatesController(templates, onSelect);
 
-    return (
-      <section
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <FilterBar
-          categories={categories ?? []}
-          labels={resolvedLabels}
-          onCategoryChange={controller.handleCategoryChange}
-          onQueryChange={controller.handleQueryChange}
-          query={controller.query}
-          searchId={controller.searchId}
-          selectedCategory={controller.selectedCategory}
-        />
-        <TemplateGrid controller={controller} labels={resolvedLabels} />
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <FilterBar
+        categories={categories ?? []}
+        labels={resolvedLabels}
+        onCategoryChange={controller.handleCategoryChange}
+        onQueryChange={controller.handleQueryChange}
+        query={controller.query}
+        searchId={controller.searchId}
+        selectedCategory={controller.selectedCategory}
+      />
+      <TemplateGrid controller={controller} labels={resolvedLabels} />
+    </section>
+  );
+};
 PromptTemplates.displayName = "PromptTemplates";
diff --git a/apps/registry/registry/default/property-section/property-section.tsx b/apps/registry/registry/default/property-section/property-section.tsx
index 8fa983e4..29034d52 100644
--- a/apps/registry/registry/default/property-section/property-section.tsx
+++ b/apps/registry/registry/default/property-section/property-section.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -139,31 +135,32 @@ const Body = (props: {
  *
  * @public
  */
-export const PropertySection = forwardRef<HTMLElement, PropertySectionProps>(
-  (props, ref) => {
-    const {
-      className,
-      collapsible = false,
-      entries,
-      labels,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "rounded-lg border bg-background text-foreground",
-          className,
-        )}
-        data-property-section
-        ref={ref}
-        {...rest}
-      >
-        <Body collapsible={collapsible} entries={entries} title={title} />
-      </section>
-    );
-  },
-);
+export const PropertySection = (
+  props: PropertySectionProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    collapsible = false,
+    entries,
+    labels,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "rounded-lg border bg-background text-foreground",
+        className,
+      )}
+      data-property-section
+      ref={ref}
+      {...rest}
+    >
+      <Body collapsible={collapsible} entries={entries} title={title} />
+    </section>
+  );
+};
 PropertySection.displayName = "PropertySection";
diff --git a/apps/registry/registry/default/radio-group/radio-group.tsx b/apps/registry/registry/default/radio-group/radio-group.tsx
index acaa3e28..f73dfef7 100644
--- a/apps/registry/registry/default/radio-group/radio-group.tsx
+++ b/apps/registry/registry/default/radio-group/radio-group.tsx
@@ -1,16 +1,15 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
 
-const RadioGroup = forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+const RadioGroup = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof RadioGroupPrimitive.Root>>) => {
   return (
     <RadioGroupPrimitive.Root
       className={cn("grid gap-2", className)}
@@ -18,13 +17,16 @@ const RadioGroup = forwardRef<
       ref={ref}
     />
   );
-});
+};
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioGroupItem = forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+const RadioGroupItem = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof RadioGroupPrimitive.Item>>) => {
   return (
     <RadioGroupPrimitive.Item
       className={cn(
@@ -39,7 +41,7 @@ const RadioGroupItem = forwardRef<
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+};
 
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };
diff --git a/apps/registry/registry/default/relationship-inspector/relationship-inspector.tsx b/apps/registry/registry/default/relationship-inspector/relationship-inspector.tsx
index 98bdc85c..25986c7d 100644
--- a/apps/registry/registry/default/relationship-inspector/relationship-inspector.tsx
+++ b/apps/registry/registry/default/relationship-inspector/relationship-inspector.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -171,11 +167,17 @@ const Group = (props: {
  *
  * @public
  */
-export const RelationshipInspector = forwardRef<
-  HTMLElement,
-  RelationshipInspectorProps
->((props, ref) => {
-  const { className, edges, labels, title = "Relationships", ...rest } = props;
+export const RelationshipInspector = (
+  props: RelationshipInspectorProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    edges,
+    labels,
+    ref,
+    title = "Relationships",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const inbound = edges.filter((edge) => edge.direction === "inbound");
   const outbound = edges.filter((edge) => edge.direction === "outbound");
@@ -210,5 +212,5 @@ export const RelationshipInspector = forwardRef<
       )}
     </section>
   );
-});
+};
 RelationshipInspector.displayName = "RelationshipInspector";
diff --git a/apps/registry/registry/default/right-dock/right-dock.tsx b/apps/registry/registry/default/right-dock/right-dock.tsx
index f15d5cc7..0e41187c 100644
--- a/apps/registry/registry/default/right-dock/right-dock.tsx
+++ b/apps/registry/registry/default/right-dock/right-dock.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -10,32 +8,37 @@ export type RightDockProps = React.ComponentPropsWithoutRef<"aside"> & {
   title?: ReactNode;
 };
 
-const RightDock = forwardRef<HTMLElement, RightDockProps>(
-  ({ children, className, footer, header, title, ...props }, ref) => (
-    <aside
-      className={cn(
-        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {header || title ? (
-        <div className="border-b border-border/60 px-4 py-3">
-          {title ? (
-            <div className="text-sm font-medium text-foreground">{title}</div>
-          ) : null}
-          {header ? <div className="mt-2">{header}</div> : null}
-        </div>
-      ) : null}
-      <div className="flex-1 overflow-auto p-4">{children}</div>
-      {footer ? (
-        <div className="border-t border-border/60 p-4">{footer}</div>
-      ) : null}
-    </aside>
-  ),
+const RightDock = ({
+  children,
+  className,
+  footer,
+  header,
+  ref,
+  title,
+  ...props
+}: RightDockProps & React.RefAttributes<HTMLElement>) => (
+  <aside
+    className={cn(
+      "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {header || title ? (
+      <div className="border-b border-border/60 px-4 py-3">
+        {title ? (
+          <div className="text-sm font-medium text-foreground">{title}</div>
+        ) : null}
+        {header ? <div className="mt-2">{header}</div> : null}
+      </div>
+    ) : null}
+    <div className="flex-1 overflow-auto p-4">{children}</div>
+    {footer ? (
+      <div className="border-t border-border/60 p-4">{footer}</div>
+    ) : null}
+  </aside>
 );
 
 RightDock.displayName = "RightDock";
-
 export { RightDock };
diff --git a/apps/registry/registry/default/role-badge/role-badge.tsx b/apps/registry/registry/default/role-badge/role-badge.tsx
index 4b125ffe..33e4722e 100644
--- a/apps/registry/registry/default/role-badge/role-badge.tsx
+++ b/apps/registry/registry/default/role-badge/role-badge.tsx
@@ -39,23 +39,27 @@ function getRoleClasses(accountRole: RoleBadgeRole): string {
   }
 }
 
-export const RoleBadge = React.forwardRef<HTMLSpanElement, RoleBadgeProps>(
-  ({ accountRole, className, label, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getRoleClasses(accountRole),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        {label ?? getRoleLabel(accountRole)}
-      </span>
-    );
-  },
-);
+export const RoleBadge = ({
+  accountRole,
+  className,
+  label,
+  ref: reference,
+  ...props
+}: RoleBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getRoleClasses(accountRole),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      {label ?? getRoleLabel(accountRole)}
+    </span>
+  );
+};
 
 RoleBadge.displayName = "RoleBadge";
diff --git a/apps/registry/registry/default/route-map/route-map.tsx b/apps/registry/registry/default/route-map/route-map.tsx
index 488b9afa..4bef8ecd 100644
--- a/apps/registry/registry/default/route-map/route-map.tsx
+++ b/apps/registry/registry/default/route-map/route-map.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
   useMemo,
@@ -452,7 +451,9 @@ function Stage(props: StageProps): ReactNode {
  *
  * @public
  */
-export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
+export const RouteMap = (
+  props: RouteMapProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     animated = false,
     animationDurationSeconds = 4,
@@ -463,6 +464,7 @@ export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
     color = "red",
     labels,
     lineStyle = "solid",
+    ref,
     showProgressIndicator = false,
     waypoints,
     ...rest
@@ -508,5 +510,5 @@ export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
       <DataSummary titleId={titleId} waypoints={waypoints} />
     </section>
   );
-});
+};
 RouteMap.displayName = "RouteMap";
diff --git a/apps/registry/registry/default/routing-assignment-panel/routing-assignment-panel.tsx b/apps/registry/registry/default/routing-assignment-panel/routing-assignment-panel.tsx
index 54fa6726..ac25e5bc 100644
--- a/apps/registry/registry/default/routing-assignment-panel/routing-assignment-panel.tsx
+++ b/apps/registry/registry/default/routing-assignment-panel/routing-assignment-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -173,11 +169,17 @@ const Row = (props: { assignment: RoutingAssignment }): React.ReactElement => {
  *
  * @public
  */
-export const RoutingAssignmentPanel = forwardRef<
-  HTMLElement,
-  RoutingAssignmentPanelProps
->((props, ref) => {
-  const { assignments, className, labels, title = "Routing", ...rest } = props;
+export const RoutingAssignmentPanel = (
+  props: RoutingAssignmentPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    assignments,
+    className,
+    labels,
+    ref,
+    title = "Routing",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -213,5 +215,5 @@ export const RoutingAssignmentPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 RoutingAssignmentPanel.displayName = "RoutingAssignmentPanel";
diff --git a/apps/registry/registry/default/run-timeline/run-timeline.tsx b/apps/registry/registry/default/run-timeline/run-timeline.tsx
index d6a708b4..9897bc0f 100644
--- a/apps/registry/registry/default/run-timeline/run-timeline.tsx
+++ b/apps/registry/registry/default/run-timeline/run-timeline.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -307,54 +303,55 @@ const resolveLanes = (
  *
  * @public
  */
-export const RunTimeline = forwardRef<HTMLElement, RunTimelineProps>(
-  (props, ref) => {
-    const {
-      className,
-      cursor,
-      end,
-      formatValue,
-      labels,
-      lanes,
-      phases,
-      start,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeEnd = end <= start ? start + 1 : end;
-    const resolvedLanes = resolveLanes(lanes);
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn("flex w-full flex-col gap-2", className)}
-        data-run-timeline
-        ref={ref}
-        {...rest}
-      >
-        <Endpoints
+export const RunTimeline = (
+  props: RunTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    cursor,
+    end,
+    formatValue,
+    labels,
+    lanes,
+    phases,
+    ref,
+    start,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeEnd = end <= start ? start + 1 : end;
+  const resolvedLanes = resolveLanes(lanes);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn("flex w-full flex-col gap-2", className)}
+      data-run-timeline
+      ref={ref}
+      {...rest}
+    >
+      <Endpoints
+        cursor={cursor}
+        end={safeEnd}
+        format={formatValue}
+        start={start}
+      />
+      {phases.length === 0 ? (
+        <p
+          className="rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground"
+          data-run-timeline-state="empty"
+        >
+          {resolvedLabels.empty}
+        </p>
+      ) : (
+        <TrackBody
           cursor={cursor}
           end={safeEnd}
-          format={formatValue}
+          lanes={resolvedLanes}
+          phases={phases}
           start={start}
         />
-        {phases.length === 0 ? (
-          <p
-            className="rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground"
-            data-run-timeline-state="empty"
-          >
-            {resolvedLabels.empty}
-          </p>
-        ) : (
-          <TrackBody
-            cursor={cursor}
-            end={safeEnd}
-            lanes={resolvedLanes}
-            phases={phases}
-            start={start}
-          />
-        )}
-      </section>
-    );
-  },
-);
+      )}
+    </section>
+  );
+};
 RunTimeline.displayName = "RunTimeline";
diff --git a/apps/registry/registry/default/runtime-overview-panel/runtime-overview-panel.tsx b/apps/registry/registry/default/runtime-overview-panel/runtime-overview-panel.tsx
index 7422b2db..f1a23357 100644
--- a/apps/registry/registry/default/runtime-overview-panel/runtime-overview-panel.tsx
+++ b/apps/registry/registry/default/runtime-overview-panel/runtime-overview-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -141,11 +137,10 @@ const Tile = (props: { metric: RuntimeMetric }): React.ReactElement => {
  *
  * @public
  */
-export const RuntimeOverviewPanel = forwardRef<
-  HTMLElement,
-  RuntimeOverviewPanelProps
->((props, ref) => {
-  const { className, labels, metrics, title = "Runtime", ...rest } = props;
+export const RuntimeOverviewPanel = (
+  props: RuntimeOverviewPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, labels, metrics, ref, title = "Runtime", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -179,5 +174,5 @@ export const RuntimeOverviewPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 RuntimeOverviewPanel.displayName = "RuntimeOverviewPanel";
diff --git a/apps/registry/registry/default/scope-selector/scope-selector.tsx b/apps/registry/registry/default/scope-selector/scope-selector.tsx
index 0d9c2b83..8bc8e98d 100644
--- a/apps/registry/registry/default/scope-selector/scope-selector.tsx
+++ b/apps/registry/registry/default/scope-selector/scope-selector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Check, ChevronRight, Search } from "lucide-react";
 
@@ -445,52 +445,48 @@ function useScopeSelectorState({
   };
 }
 
-const ScopeSelector = forwardRef<HTMLButtonElement, ScopeSelectorProps>(
-  (
-    {
-      className,
-      defaultValue,
-      disabled,
-      emptyMessage = "No scopes available.",
-      nodes,
-      onValueChange,
-      placeholder = "Select scope",
-      searchPlaceholder = "Search scopes...",
-      value,
-    },
-    ref,
-  ) => {
-    const state = useScopeSelectorState({
-      defaultValue,
-      nodes,
-      onValueChange,
-      value,
-    });
+const ScopeSelector = ({
+  className,
+  defaultValue,
+  disabled,
+  emptyMessage = "No scopes available.",
+  nodes,
+  onValueChange,
+  placeholder = "Select scope",
+  ref,
+  searchPlaceholder = "Search scopes...",
+  value,
+}: ScopeSelectorProps & React.RefAttributes<HTMLButtonElement>) => {
+  const state = useScopeSelectorState({
+    defaultValue,
+    nodes,
+    onValueChange,
+    value,
+  });
 
-    return (
-      <Popover onOpenChange={state.handleOpenChange} open={state.open}>
-        <PopoverTrigger asChild>
-          <Button
-            className={cn("w-full justify-between", className)}
-            disabled={disabled}
-            ref={ref}
-            variant="outline"
-          >
-            <span className="truncate text-left">
-              {state.selectedPathLabel ?? placeholder}
-            </span>
-            <ChevronRight className="size-4 shrink-0 rotate-90 text-muted-foreground" />
-          </Button>
-        </PopoverTrigger>
-        <ScopeSelectorPopoverBody
-          emptyMessage={emptyMessage}
-          searchPlaceholder={searchPlaceholder}
-          state={state}
-        />
-      </Popover>
-    );
-  },
-);
+  return (
+    <Popover onOpenChange={state.handleOpenChange} open={state.open}>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn("w-full justify-between", className)}
+          disabled={disabled}
+          ref={ref}
+          variant="outline"
+        >
+          <span className="truncate text-left">
+            {state.selectedPathLabel ?? placeholder}
+          </span>
+          <ChevronRight className="size-4 shrink-0 rotate-90 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <ScopeSelectorPopoverBody
+        emptyMessage={emptyMessage}
+        searchPlaceholder={searchPlaceholder}
+        state={state}
+      />
+    </Popover>
+  );
+};
 
 ScopeSelector.displayName = "ScopeSelector";
 
diff --git a/apps/registry/registry/default/scroll-area/scroll-area.tsx b/apps/registry/registry/default/scroll-area/scroll-area.tsx
index 48881d0b..76c463de 100644
--- a/apps/registry/registry/default/scroll-area/scroll-area.tsx
+++ b/apps/registry/registry/default/scroll-area/scroll-area.tsx
@@ -1,15 +1,15 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 import { cn } from "@vllnt/ui";
 
-const ScrollArea = forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ children, className, ...props }, ref) => (
+const ScrollArea = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof ScrollAreaPrimitive.Root>>) => (
   <ScrollAreaPrimitive.Root
     className={cn("relative overflow-hidden", className)}
     ref={ref}
@@ -21,13 +21,21 @@ const ScrollArea = forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-));
+);
+
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+  >) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     className={cn(
       "flex touch-none select-none transition-colors",
@@ -43,7 +51,7 @@ const ScrollBar = forwardRef<
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+);
 
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 export { ScrollArea, ScrollBar };
diff --git a/apps/registry/registry/default/segmented-control/segmented-control.tsx b/apps/registry/registry/default/segmented-control/segmented-control.tsx
index b505c68d..b66fe5f1 100644
--- a/apps/registry/registry/default/segmented-control/segmented-control.tsx
+++ b/apps/registry/registry/default/segmented-control/segmented-control.tsx
@@ -54,29 +54,39 @@ export type SegmentedControlItemProps = React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof segmentedControlItemVariants>;
 
-const SegmentedControl = React.forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
-  SegmentedControlProps
->(({ className, size, ...props }, ref) => (
+const SegmentedControl = ({
+  className,
+  ref,
+  size,
+  ...props
+}: SegmentedControlProps &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Root>
+  >) => (
   <ToggleGroupPrimitive.Root
     className={cn(segmentedControlVariants({ size }), className)}
     ref={ref}
     type="single"
     {...props}
   />
-));
+);
 SegmentedControl.displayName = "SegmentedControl";
 
-const SegmentedControlItem = React.forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
-  SegmentedControlItemProps
->(({ className, size, ...props }, ref) => (
+const SegmentedControlItem = ({
+  className,
+  ref,
+  size,
+  ...props
+}: SegmentedControlItemProps &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Item>
+  >) => (
   <ToggleGroupPrimitive.Item
     className={cn(segmentedControlItemVariants({ size }), className)}
     ref={ref}
     {...props}
   />
-));
+);
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
 export {
diff --git a/apps/registry/registry/default/select/select.tsx b/apps/registry/registry/default/select/select.tsx
index dc92b446..bc8928ee 100644
--- a/apps/registry/registry/default/select/select.tsx
+++ b/apps/registry/registry/default/select/select.tsx
@@ -1,22 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
-
 const Select = SelectPrimitive.Root;
-
 const SelectGroup = SelectPrimitive.Group;
-
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const SelectTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Trigger>>) => (
   <SelectPrimitive.Trigger
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -30,13 +27,18 @@ const SelectTrigger = forwardRef<
       <ChevronDown className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
+);
+
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>
+  >) => (
   <SelectPrimitive.ScrollUpButton
     className={cn(
       "flex cursor-default items-center justify-center py-1",
@@ -47,13 +49,18 @@ const SelectScrollUpButton = forwardRef<
   >
     <ChevronUp className="size-4" />
   </SelectPrimitive.ScrollUpButton>
-));
+);
+
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>
+  >) => (
   <SelectPrimitive.ScrollDownButton
     className={cn(
       "flex cursor-default items-center justify-center py-1",
@@ -64,14 +71,19 @@ const SelectScrollDownButton = forwardRef<
   >
     <ChevronDown className="size-4" />
   </SelectPrimitive.ScrollDownButton>
-));
+);
+
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
-const SelectContent = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = "popper", ...props }, ref) => (
+const SelectContent = ({
+  children,
+  className,
+  position = "popper",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Content>>) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -97,25 +109,32 @@ const SelectContent = forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
+);
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Label>>) => (
   <SelectPrimitive.Label
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
+const SelectItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Item>>) => (
   <SelectPrimitive.Item
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -129,22 +148,27 @@ const SelectItem = forwardRef<
         <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
+);
+
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.Separator>
+  >) => (
   <SelectPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
diff --git a/apps/registry/registry/default/selection-halo/selection-halo.tsx b/apps/registry/registry/default/selection-halo/selection-halo.tsx
index e9e9a280..ec284f72 100644
--- a/apps/registry/registry/default/selection-halo/selection-halo.tsx
+++ b/apps/registry/registry/default/selection-halo/selection-halo.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -67,60 +63,61 @@ export type SelectionHaloProps = {
  *
  * @public
  */
-export const SelectionHalo = forwardRef<HTMLDivElement, SelectionHaloProps>(
-  (props, ref) => {
-    const {
-      bounds,
-      className,
-      label,
-      labels,
-      pulsing = false,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
-          pulsing ? "animate-pulse" : "",
-          className,
-        )}
-        data-pulsing={pulsing ? "true" : undefined}
-        data-selection-halo
-        ref={ref}
-        style={{
-          height: `${bounds.height.toString()}px`,
-          left: `${bounds.x.toString()}px`,
-          top: `${bounds.y.toString()}px`,
-          width: `${bounds.width.toString()}px`,
-        }}
-        {...rest}
-      >
-        {(["nw", "ne", "se", "sw"] as const).map((corner) => (
-          <span
-            aria-hidden="true"
-            className={cn(
-              "absolute size-2 rounded-sm border-2 border-primary bg-background",
-              corner === "nw" && "-left-1 -top-1",
-              corner === "ne" && "-right-1 -top-1",
-              corner === "se" && "-bottom-1 -right-1",
-              corner === "sw" && "-bottom-1 -left-1",
-            )}
-            data-handle-corner={corner}
-            key={corner}
-          />
-        ))}
-        {label ? (
-          <span
-            className="absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm"
-            data-selection-label
-          >
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const SelectionHalo = (
+  props: SelectionHaloProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    bounds,
+    className,
+    label,
+    labels,
+    pulsing = false,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
+        pulsing ? "animate-pulse" : "",
+        className,
+      )}
+      data-pulsing={pulsing ? "true" : undefined}
+      data-selection-halo
+      ref={ref}
+      style={{
+        height: `${bounds.height.toString()}px`,
+        left: `${bounds.x.toString()}px`,
+        top: `${bounds.y.toString()}px`,
+        width: `${bounds.width.toString()}px`,
+      }}
+      {...rest}
+    >
+      {(["nw", "ne", "se", "sw"] as const).map((corner) => (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "absolute size-2 rounded-sm border-2 border-primary bg-background",
+            corner === "nw" && "-left-1 -top-1",
+            corner === "ne" && "-right-1 -top-1",
+            corner === "se" && "-bottom-1 -right-1",
+            corner === "sw" && "-bottom-1 -left-1",
+          )}
+          data-handle-corner={corner}
+          key={corner}
+        />
+      ))}
+      {label ? (
+        <span
+          className="absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm"
+          data-selection-label
+        >
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 SelectionHalo.displayName = "SelectionHalo";
diff --git a/apps/registry/registry/default/selection-presence/selection-presence.tsx b/apps/registry/registry/default/selection-presence/selection-presence.tsx
index 727b0bfe..37df1383 100644
--- a/apps/registry/registry/default/selection-presence/selection-presence.tsx
+++ b/apps/registry/registry/default/selection-presence/selection-presence.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -67,11 +63,10 @@ export type SelectionPresenceProps = {
  *
  * @public
  */
-export const SelectionPresence = forwardRef<
-  HTMLDivElement,
-  SelectionPresenceProps
->((props, ref) => {
-  const { className, color, height, labels, name, width, x, y, ...rest } =
+export const SelectionPresence = (
+  props: SelectionPresenceProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, color, height, labels, name, ref, width, x, y, ...rest } =
     props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const accent = color ?? "var(--foreground)";
@@ -110,5 +105,5 @@ export const SelectionPresence = forwardRef<
       )}
     </div>
   );
-});
+};
 SelectionPresence.displayName = "SelectionPresence";
diff --git a/apps/registry/registry/default/separator/separator.tsx b/apps/registry/registry/default/separator/separator.tsx
index 4403da30..1892c7a0 100644
--- a/apps/registry/registry/default/separator/separator.tsx
+++ b/apps/registry/registry/default/separator/separator.tsx
@@ -1,32 +1,28 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 import { cn } from "@vllnt/ui";
 
-const Separator = forwardRef<
-  React.ComponentRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, decorative = true, orientation = "horizontal", ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-      )}
-      decorative={decorative}
-      orientation={orientation}
-      ref={ref}
-      {...props}
-    />
-  ),
+const Separator = ({
+  className,
+  decorative = true,
+  orientation = "horizontal",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof SeparatorPrimitive.Root>>) => (
+  <SeparatorPrimitive.Root
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    decorative={decorative}
+    orientation={orientation}
+    ref={ref}
+    {...props}
+  />
 );
-Separator.displayName = SeparatorPrimitive.Root.displayName;
 
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 export { Separator };
diff --git a/apps/registry/registry/default/sheet/sheet.tsx b/apps/registry/registry/default/sheet/sheet.tsx
index 862478e3..b24b6fc4 100644
--- a/apps/registry/registry/default/sheet/sheet.tsx
+++ b/apps/registry/registry/default/sheet/sheet.tsx
@@ -1,25 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
-
 const Sheet = SheetPrimitive.Root;
-
 const SheetTrigger = SheetPrimitive.Trigger;
-
 const SheetClose = SheetPrimitive.Close;
-
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const SheetOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Overlay>>) => (
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -28,7 +23,8 @@ const SheetOverlay = forwardRef<
     {...props}
     ref={ref}
   />
-));
+);
+
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
@@ -55,10 +51,14 @@ type SheetContentProps = {} & React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof sheetVariants>;
 
-const SheetContent = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ children, className, side = "right", ...props }, ref) => (
+const SheetContent = ({
+  children,
+  className,
+  ref,
+  side = "right",
+  ...props
+}: SheetContentProps &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Content>>) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -73,7 +73,8 @@ const SheetContent = forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-));
+);
+
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
@@ -88,6 +89,7 @@ const SheetHeader = ({
     {...props}
   />
 );
+
 SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
@@ -102,30 +104,39 @@ const SheetFooter = ({
     {...props}
   />
 );
+
 SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+const SheetTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Title>>) => (
   <SheetPrimitive.Title
     className={cn("text-lg font-semibold text-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+const SheetDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SheetPrimitive.Description>
+  >) => (
   <SheetPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
diff --git a/apps/registry/registry/default/sidebar-provider/sidebar-provider.tsx b/apps/registry/registry/default/sidebar-provider/sidebar-provider.tsx
index 9e1d15df..6f2f27cc 100644
--- a/apps/registry/registry/default/sidebar-provider/sidebar-provider.tsx
+++ b/apps/registry/registry/default/sidebar-provider/sidebar-provider.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  type ReactNode,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, type ReactNode, use, useMemo, useState } from "react";
 
 type SidebarContextType = {
   open: boolean;
@@ -16,7 +10,7 @@ type SidebarContextType = {
 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 
 export function useSidebar() {
-  const context = useContext(SidebarContext);
+  const context = use(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within SidebarProvider");
   }
diff --git a/apps/registry/registry/default/slider/slider.tsx b/apps/registry/registry/default/slider/slider.tsx
index 930d1e47..6b87c06d 100644
--- a/apps/registry/registry/default/slider/slider.tsx
+++ b/apps/registry/registry/default/slider/slider.tsx
@@ -1,15 +1,14 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@vllnt/ui";
 
-const Slider = forwardRef<
-  React.ComponentRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Slider = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof SliderPrimitive.Root>>) => (
   <SliderPrimitive.Root
     className={cn(
       "relative flex w-full touch-none select-none items-center",
@@ -23,7 +22,7 @@ const Slider = forwardRef<
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+);
 
+Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };
diff --git a/apps/registry/registry/default/snap-guides/snap-guides.tsx b/apps/registry/registry/default/snap-guides/snap-guides.tsx
index 46f175eb..1a0c3143 100644
--- a/apps/registry/registry/default/snap-guides/snap-guides.tsx
+++ b/apps/registry/registry/default/snap-guides/snap-guides.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -69,43 +69,43 @@ export type SnapGuidesProps = {
  *
  * @public
  */
-export const SnapGuides = forwardRef<HTMLDivElement, SnapGuidesProps>(
-  (props, ref) => {
-    const { className, guides, labels, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn("pointer-events-none absolute inset-0 z-30", className)}
-        data-snap-guide-count={guides.length}
-        ref={ref}
-        {...rest}
-      >
-        {guides.map((guide) => {
-          const isVertical = guide.orientation === "vertical";
-          const offset = isVertical ? guide.x : guide.y;
-          return (
-            <span
-              aria-hidden="true"
-              className={cn(
-                "absolute border-primary/70",
-                isVertical
-                  ? "inset-y-0 w-px border-l border-dashed"
-                  : "inset-x-0 h-px border-t border-dashed",
-              )}
-              data-snap-guide-id={guide.id}
-              data-snap-orientation={guide.orientation}
-              key={guide.id}
-              style={
-                isVertical
-                  ? { left: `${offset.toString()}px` }
-                  : { top: `${offset.toString()}px` }
-              }
-            />
-          );
-        })}
-      </div>
-    );
-  },
-);
+export const SnapGuides = (
+  props: SnapGuidesProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, guides, labels, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn("pointer-events-none absolute inset-0 z-30", className)}
+      data-snap-guide-count={guides.length}
+      ref={ref}
+      {...rest}
+    >
+      {guides.map((guide) => {
+        const isVertical = guide.orientation === "vertical";
+        const offset = isVertical ? guide.x : guide.y;
+        return (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "absolute border-primary/70",
+              isVertical
+                ? "inset-y-0 w-px border-l border-dashed"
+                : "inset-x-0 h-px border-t border-dashed",
+            )}
+            data-snap-guide-id={guide.id}
+            data-snap-orientation={guide.orientation}
+            key={guide.id}
+            style={
+              isVertical
+                ? { left: `${offset.toString()}px` }
+                : { top: `${offset.toString()}px` }
+            }
+          />
+        );
+      })}
+    </div>
+  );
+};
 SnapGuides.displayName = "SnapGuides";
diff --git a/apps/registry/registry/default/sparkline-grid/sparkline-grid.tsx b/apps/registry/registry/default/sparkline-grid/sparkline-grid.tsx
index 6f20712d..cc8358f6 100644
--- a/apps/registry/registry/default/sparkline-grid/sparkline-grid.tsx
+++ b/apps/registry/registry/default/sparkline-grid/sparkline-grid.tsx
@@ -37,10 +37,14 @@ const gridColumns = {
   4: "md:grid-cols-2 xl:grid-cols-4",
 };
 
-export const SparklineGrid = React.forwardRef<
-  HTMLDivElement,
-  SparklineGridProps
->(({ className, columns = 2, items, ...props }, reference) => {
+// eslint-disable-next-line max-lines-per-function
+export const SparklineGrid = ({
+  className,
+  columns = 2,
+  items,
+  ref: reference,
+  ...props
+}: SparklineGridProps & React.RefAttributes<HTMLDivElement>) => {
   if (items.length === 0) {
     return null;
   }
@@ -106,6 +110,6 @@ export const SparklineGrid = React.forwardRef<
       })}
     </div>
   );
-});
+};
 
 SparklineGrid.displayName = "SparklineGrid";
diff --git a/apps/registry/registry/default/stat-card/stat-card.tsx b/apps/registry/registry/default/stat-card/stat-card.tsx
index b7c8c6cb..16169a92 100644
--- a/apps/registry/registry/default/stat-card/stat-card.tsx
+++ b/apps/registry/registry/default/stat-card/stat-card.tsx
@@ -75,63 +75,59 @@ function TrendIcon({ trend }: { trend: StatCardTrend }) {
   return <ArrowRight className="size-3.5" />;
 }
 
-const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
-  (
-    {
-      change,
-      className,
-      description,
-      icon,
-      label,
-      meta,
-      tone,
-      trend = "neutral",
-      value,
-      ...props
-    },
-    reference,
-  ) => (
-    <Card
-      className={cn(statCardVariants({ tone }), className)}
-      ref={reference}
-      {...props}
-    >
-      <div className={accentVariants({ tone })} />
-      <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
-        <div className="space-y-1">
-          <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
-            {label}
-          </CardDescription>
-          <div className="text-3xl font-semibold tracking-tight">{value}</div>
+const StatCard = ({
+  change,
+  className,
+  description,
+  icon,
+  label,
+  meta,
+  ref: reference,
+  tone,
+  trend = "neutral",
+  value,
+  ...props
+}: StatCardProps & React.RefAttributes<HTMLDivElement>) => (
+  <Card
+    className={cn(statCardVariants({ tone }), className)}
+    ref={reference}
+    {...props}
+  >
+    <div className={accentVariants({ tone })} />
+    <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
+      <div className="space-y-1">
+        <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
+          {label}
+        </CardDescription>
+        <div className="text-3xl font-semibold tracking-tight">{value}</div>
+      </div>
+      {icon ? (
+        <div className="rounded-lg border bg-muted/50 p-2 text-muted-foreground">
+          {icon}
         </div>
-        {icon ? (
-          <div className="rounded-lg border bg-muted/50 p-2 text-muted-foreground">
-            {icon}
+      ) : null}
+    </CardHeader>
+    {description || change || meta ? (
+      <CardContent className="space-y-3">
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+        {change || meta ? (
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            {change ? (
+              <div className={changeVariants({ trend })}>
+                <TrendIcon trend={trend} />
+                <span>{change}</span>
+              </div>
+            ) : null}
+            {meta ? (
+              <div className="text-xs text-muted-foreground">{meta}</div>
+            ) : null}
           </div>
         ) : null}
-      </CardHeader>
-      {description || change || meta ? (
-        <CardContent className="space-y-3">
-          {description ? (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          ) : null}
-          {change || meta ? (
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              {change ? (
-                <div className={changeVariants({ trend })}>
-                  <TrendIcon trend={trend} />
-                  <span>{change}</span>
-                </div>
-              ) : null}
-              {meta ? (
-                <div className="text-xs text-muted-foreground">{meta}</div>
-              ) : null}
-            </div>
-          ) : null}
-        </CardContent>
-      ) : null}
-    </Card>
-  ),
+      </CardContent>
+    ) : null}
+  </Card>
 );
 
 StatCard.displayName = "StatCard";
diff --git a/apps/registry/registry/default/state-badge-overlay/state-badge-overlay.tsx b/apps/registry/registry/default/state-badge-overlay/state-badge-overlay.tsx
index 0caa79e6..06621359 100644
--- a/apps/registry/registry/default/state-badge-overlay/state-badge-overlay.tsx
+++ b/apps/registry/registry/default/state-badge-overlay/state-badge-overlay.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -121,15 +117,15 @@ export type StateBadgeOverlayProps = {
  *
  * @public
  */
-export const StateBadgeOverlay = forwardRef<
-  HTMLDivElement,
-  StateBadgeOverlayProps
->((props, ref) => {
+export const StateBadgeOverlay = (
+  props: StateBadgeOverlayProps & React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     anchor = "top-right",
     className,
     label,
     labels,
+    ref,
     state,
     x,
     y,
@@ -165,5 +161,5 @@ export const StateBadgeOverlay = forwardRef<
       {text}
     </div>
   );
-});
+};
 StateBadgeOverlay.displayName = "StateBadgeOverlay";
diff --git a/apps/registry/registry/default/status-board/status-board.tsx b/apps/registry/registry/default/status-board/status-board.tsx
index 38021ecb..07a2fa41 100644
--- a/apps/registry/registry/default/status-board/status-board.tsx
+++ b/apps/registry/registry/default/status-board/status-board.tsx
@@ -173,38 +173,34 @@ function StatusBoardCard({ item }: { item: StatusBoardItem }) {
   );
 }
 
-export const StatusBoard = React.forwardRef<HTMLDivElement, StatusBoardProps>(
-  (
-    {
-      className,
-      columns = 3,
-      description,
-      items,
-      title = "Status board",
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div className={cn("space-y-4", className)} ref={ref} {...props}>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-1">
-            <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-            {description ? (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-          <StatusBoardSummary items={items} />
+export const StatusBoard = ({
+  className,
+  columns = 3,
+  description,
+  items,
+  ref,
+  title = "Status board",
+  ...props
+}: StatusBoardProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div className={cn("space-y-4", className)} ref={ref} {...props}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
         </div>
+        <StatusBoardSummary items={items} />
+      </div>
 
-        <div className={cn("grid gap-4", getColumnsClassName(columns))}>
-          {items.map((item) => (
-            <StatusBoardCard item={item} key={item.label} />
-          ))}
-        </div>
+      <div className={cn("grid gap-4", getColumnsClassName(columns))}>
+        {items.map((item) => (
+          <StatusBoardCard item={item} key={item.label} />
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 StatusBoard.displayName = "StatusBoard";
diff --git a/apps/registry/registry/default/status-indicator/status-indicator.tsx b/apps/registry/registry/default/status-indicator/status-indicator.tsx
index d900eba8..116ba944 100644
--- a/apps/registry/registry/default/status-indicator/status-indicator.tsx
+++ b/apps/registry/registry/default/status-indicator/status-indicator.tsx
@@ -148,46 +148,42 @@ export type StatusIndicatorProps = React.HTMLAttributes<HTMLSpanElement> &
     showDot?: boolean;
   };
 
-const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(
-  (
-    {
-      children,
-      className,
-      label,
-      pulse = false,
-      showDot = true,
-      size,
-      tone,
-      variant,
-      ...props
-    },
-    reference,
-  ) => {
-    const content = children ?? label;
+const StatusIndicator = ({
+  children,
+  className,
+  label,
+  pulse = false,
+  ref: reference,
+  showDot = true,
+  size,
+  tone,
+  variant,
+  ...props
+}: StatusIndicatorProps & React.RefAttributes<HTMLSpanElement>) => {
+  const content = children ?? label;
 
-    return (
-      <span
-        className={cn(
-          statusIndicatorVariants({ size, tone, variant }),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        {showDot ? (
-          <span
-            aria-hidden="true"
-            className={cn(
-              dotVariants({ size, tone }),
-              pulse ? "animate-pulse" : undefined,
-            )}
-          />
-        ) : null}
-        {content}
-      </span>
-    );
-  },
-);
+  return (
+    <span
+      className={cn(
+        statusIndicatorVariants({ size, tone, variant }),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      {showDot ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            dotVariants({ size, tone }),
+            pulse ? "animate-pulse" : undefined,
+          )}
+        />
+      ) : null}
+      {content}
+    </span>
+  );
+};
 
 StatusIndicator.displayName = "StatusIndicator";
 
diff --git a/apps/registry/registry/default/sticky-metric/sticky-metric.tsx b/apps/registry/registry/default/sticky-metric/sticky-metric.tsx
index 426924e3..5d819d33 100644
--- a/apps/registry/registry/default/sticky-metric/sticky-metric.tsx
+++ b/apps/registry/registry/default/sticky-metric/sticky-metric.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -103,57 +99,58 @@ export type StickyMetricProps = {
  *
  * @public
  */
-export const StickyMetric = forwardRef<HTMLDivElement, StickyMetricProps>(
-  (props, ref) => {
-    const {
-      anchor = "top-right",
-      className,
-      detail,
-      label,
-      labels,
-      tone = "neutral",
-      value,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
-          className,
-        )}
-        data-sticky-anchor={anchor}
-        data-sticky-metric
-        data-sticky-tone={tone}
-        ref={ref}
-        role="status"
-        style={{
-          left: x,
-          top: y,
-          transform: ANCHOR_OFFSET[anchor].transform,
-        }}
-        {...rest}
-      >
+export const StickyMetric = (
+  props: StickyMetricProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    anchor = "top-right",
+    className,
+    detail,
+    label,
+    labels,
+    ref,
+    tone = "neutral",
+    value,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
+        className,
+      )}
+      data-sticky-anchor={anchor}
+      data-sticky-metric
+      data-sticky-tone={tone}
+      ref={ref}
+      role="status"
+      style={{
+        left: x,
+        top: y,
+        transform: ANCHOR_OFFSET[anchor].transform,
+      }}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
+        className={cn("size-1.5 rounded-full", TONE_DOT[tone])}
+        data-sticky-metric-dot
+      />
+      <span className="font-medium text-muted-foreground">{label}</span>
+      <span className="font-semibold text-foreground">{value}</span>
+      {detail ? (
         <span
-          aria-hidden="true"
-          className={cn("size-1.5 rounded-full", TONE_DOT[tone])}
-          data-sticky-metric-dot
-        />
-        <span className="font-medium text-muted-foreground">{label}</span>
-        <span className="font-semibold text-foreground">{value}</span>
-        {detail ? (
-          <span
-            className="text-[10px] text-muted-foreground"
-            data-sticky-metric-detail
-          >
-            {detail}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+          className="text-[10px] text-muted-foreground"
+          data-sticky-metric-detail
+        >
+          {detail}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 StickyMetric.displayName = "StickyMetric";
diff --git a/apps/registry/registry/default/story-map/story-map.tsx b/apps/registry/registry/default/story-map/story-map.tsx
index bd28c5d7..a7680af3 100644
--- a/apps/registry/registry/default/story-map/story-map.tsx
+++ b/apps/registry/registry/default/story-map/story-map.tsx
@@ -4,12 +4,11 @@ import {
   Children,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   isValidElement,
   type ReactElement,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -105,7 +104,7 @@ type Ctx = {
 const StoryMapContext = createContext<Ctx | null>(null);
 
 function useStoryMapContext(): Ctx {
-  const ctx = useContext(StoryMapContext);
+  const ctx = use(StoryMapContext);
   if (!ctx) {
     throw new Error("StoryMap subcomponent used outside its root.");
   }
@@ -190,65 +189,66 @@ function ChapterHeader({ subtitle, title }: ChapterHeaderProps): ReactNode {
  *
  * @public
  */
-export const StoryMapChapter = forwardRef<HTMLElement, StoryMapChapterProps>(
-  (props, forwardedRef) => {
-    const {
-      center,
-      children,
-      className,
-      color = "red",
-      id,
-      media,
-      subtitle,
-      title,
-      zoom = 2,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const chapterId = id ?? generatedId;
-    const localRef = useRef<HTMLElement | null>(null);
-    const { registerChapter, registerMarker, unregisterMarker } =
-      useStoryMapContext();
-
-    useEffect(() => {
-      registerMarker({ center, color, id: chapterId, zoom });
-      return () => {
-        unregisterMarker(chapterId);
-      };
-    }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
-
-    const refCallback = useCallback(
-      (node: HTMLElement | null) => {
-        localRef.current = node;
-        registerChapter(chapterId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [chapterId, forwardedRef, registerChapter],
-    );
+export const StoryMapChapter = (
+  props: StoryMapChapterProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    center,
+    children,
+    className,
+    color = "red",
+    id,
+    media,
+    ref: forwardedRef,
+    subtitle,
+    title,
+    zoom = 2,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const chapterId = id ?? generatedId;
+  const localRef = useRef<HTMLElement | null>(null);
+  const { registerChapter, registerMarker, unregisterMarker } =
+    useStoryMapContext();
 
-    return (
-      <article
-        className={cn(
-          "flex min-h-screen flex-col justify-center gap-3 py-12",
-          className,
-        )}
-        data-chapter-id={chapterId}
-        id={chapterId}
-        ref={refCallback}
-        {...rest}
-      >
-        <ChapterHeader subtitle={subtitle} title={title} />
-        {media ? <ChapterMedia media={media} /> : null}
-        {children ? (
-          <div className="space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground">
-            {children}
-          </div>
-        ) : null}
-      </article>
-    );
-  },
-);
+  useEffect(() => {
+    registerMarker({ center, color, id: chapterId, zoom });
+    return () => {
+      unregisterMarker(chapterId);
+    };
+  }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
+
+  const refCallback = useCallback(
+    (node: HTMLElement | null) => {
+      localRef.current = node;
+      registerChapter(chapterId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [chapterId, forwardedRef, registerChapter],
+  );
+
+  return (
+    <article
+      className={cn(
+        "flex min-h-screen flex-col justify-center gap-3 py-12",
+        className,
+      )}
+      data-chapter-id={chapterId}
+      id={chapterId}
+      ref={refCallback}
+      {...rest}
+    >
+      <ChapterHeader subtitle={subtitle} title={title} />
+      {media ? <ChapterMedia media={media} /> : null}
+      {children ? (
+        <div className="space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground">
+          {children}
+        </div>
+      ) : null}
+    </article>
+  );
+};
 StoryMapChapter.displayName = "StoryMapChapter";
 
 type Marker = RegisterArguments;
@@ -464,7 +464,9 @@ type ShellProps = {
   titleId: string;
 };
 
-const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
+const Shell = function Shell(
+  props: ShellProps & React.RefAttributes<HTMLElement>,
+) {
   const {
     activeId,
     backdrop,
@@ -474,6 +476,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
     labels,
     markers,
     orderedIds,
+    ref,
     titleId,
   } = props;
   return (
@@ -524,7 +527,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
       </div>
     </section>
   );
-});
+};
 
 /**
  * Scroll-driven narrative map. Place {@link StoryMapChapter} children
@@ -554,8 +557,11 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
  *
  * @public
  */
-export const StoryMap = forwardRef<HTMLElement, StoryMapProps>((props, ref) => {
-  const { backdrop, backdropAlt, children, className, labels, ...rest } = props;
+export const StoryMap = (
+  props: StoryMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { backdrop, backdropAlt, children, className, labels, ref, ...rest } =
+    props;
   const titleId = useId();
   const resolvedLabels = useMemo(
     () => ({ ...DEFAULT_LABELS, ...labels }),
@@ -605,5 +611,5 @@ export const StoryMap = forwardRef<HTMLElement, StoryMapProps>((props, ref) => {
       </Shell>
     </StoryMapContext.Provider>
   );
-});
+};
 StoryMap.displayName = "StoryMap";
diff --git a/apps/registry/registry/default/subscription-card/subscription-card.tsx b/apps/registry/registry/default/subscription-card/subscription-card.tsx
index c1c65cb9..c60feff0 100644
--- a/apps/registry/registry/default/subscription-card/subscription-card.tsx
+++ b/apps/registry/registry/default/subscription-card/subscription-card.tsx
@@ -147,74 +147,68 @@ function SubscriptionActions({
   );
 }
 
-export const SubscriptionCard = React.forwardRef<
-  React.ComponentRef<typeof Card>,
-  SubscriptionCardProps
->(
-  (
-    {
-      className,
-      note,
-      plan,
-      priceLabel,
-      primaryActionLabel,
-      renewalLabel,
-      seatsLabel,
-      secondaryActionLabel,
-      status,
-      usageLabel,
-      ...props
-    },
-    reference,
-  ) => {
-    return (
-      <Card
-        className={cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <CardHeader className="space-y-4 pb-4">
-          <div className="flex items-start justify-between gap-3">
-            <div className="space-y-1">
-              <CardTitle className="text-lg">Subscription</CardTitle>
-              <CardDescription>
-                Billing overview for the current workspace plan.
-              </CardDescription>
-            </div>
-            <span
-              className={cn(
-                "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
-                getStatusClasses(status),
-              )}
-            >
-              {getStatusLabel(status)}
-            </span>
+export const SubscriptionCard = ({
+  className,
+  note,
+  plan,
+  priceLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewalLabel,
+  seatsLabel,
+  secondaryActionLabel,
+  status,
+  usageLabel,
+  ...props
+}: SubscriptionCardProps &
+  React.RefAttributes<React.ComponentRef<typeof Card>>) => {
+  return (
+    <Card
+      className={cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <CardHeader className="space-y-4 pb-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle className="text-lg">Subscription</CardTitle>
+            <CardDescription>
+              Billing overview for the current workspace plan.
+            </CardDescription>
           </div>
-          <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
-            <div>
-              <p className="text-sm font-medium">Current plan</p>
-              <p className="text-xs text-muted-foreground">{renewalLabel}</p>
-            </div>
-            <PlanBadge state={getPlanState(status)} tier={plan} />
+          <span
+            className={cn(
+              "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
+              getStatusClasses(status),
+            )}
+          >
+            {getStatusLabel(status)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
+          <div>
+            <p className="text-sm font-medium">Current plan</p>
+            <p className="text-xs text-muted-foreground">{renewalLabel}</p>
           </div>
-        </CardHeader>
-        <SubscriptionDetails
-          note={note}
-          priceLabel={priceLabel}
-          renewalLabel={renewalLabel}
-          seatsLabel={seatsLabel}
-          usageLabel={usageLabel}
-        />
-        <SubscriptionActions
-          primaryActionLabel={primaryActionLabel}
-          secondaryActionLabel={secondaryActionLabel}
-        />
-      </Card>
-    );
-  },
-);
+          <PlanBadge state={getPlanState(status)} tier={plan} />
+        </div>
+      </CardHeader>
+      <SubscriptionDetails
+        note={note}
+        priceLabel={priceLabel}
+        renewalLabel={renewalLabel}
+        seatsLabel={seatsLabel}
+        usageLabel={usageLabel}
+      />
+      <SubscriptionActions
+        primaryActionLabel={primaryActionLabel}
+        secondaryActionLabel={secondaryActionLabel}
+      />
+    </Card>
+  );
+};
 
 SubscriptionCard.displayName = "SubscriptionCard";
diff --git a/apps/registry/registry/default/table/table.tsx b/apps/registry/registry/default/table/table.tsx
index b83fee17..818d002b 100644
--- a/apps/registry/registry/default/table/table.tsx
+++ b/apps/registry/registry/default/table/table.tsx
@@ -1,11 +1,11 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
 
-const Table = forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+const Table = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableElement> &
+  React.RefAttributes<HTMLTableElement>) => (
   <div className="relative w-full overflow-auto">
     <table
       className={cn("w-full caption-bottom text-sm", className)}
@@ -13,33 +13,42 @@ const Table = forwardRef<
       {...props}
     />
   </div>
-));
+);
+
 Table.displayName = "Table";
 
-const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableHeader = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <thead className={cn("[&_tr]:border-b", className)} ref={ref} {...props} />
-));
+);
+
 TableHeader.displayName = "TableHeader";
 
-const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableBody = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <tbody
     className={cn("[&_tr:last-child]:border-0", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableBody.displayName = "TableBody";
 
-const TableFooter = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableFooter = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <tfoot
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
@@ -48,13 +57,16 @@ const TableFooter = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableFooter.displayName = "TableFooter";
 
-const TableRow = forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+const TableRow = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableRowElement> &
+  React.RefAttributes<HTMLTableRowElement>) => (
   <tr
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
@@ -63,13 +75,16 @@ const TableRow = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableRow.displayName = "TableRow";
 
-const TableHead = forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableHead = ({
+  className,
+  ref,
+  ...props
+}: React.ThHTMLAttributes<HTMLTableCellElement> &
+  React.RefAttributes<HTMLTableCellElement>) => (
   <th
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
@@ -78,31 +93,38 @@ const TableHead = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableHead.displayName = "TableHead";
 
-const TableCell = forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableCell = ({
+  className,
+  ref,
+  ...props
+}: React.TdHTMLAttributes<HTMLTableCellElement> &
+  React.RefAttributes<HTMLTableCellElement>) => (
   <td
     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableCell.displayName = "TableCell";
 
-const TableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
+const TableCaption = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement> &
+  React.RefAttributes<HTMLTableCaptionElement>) => (
   <caption
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableCaption.displayName = "TableCaption";
 
 export {
diff --git a/apps/registry/registry/default/tabs/tabs.tsx b/apps/registry/registry/default/tabs/tabs.tsx
index 428731a3..2425407f 100644
--- a/apps/registry/registry/default/tabs/tabs.tsx
+++ b/apps/registry/registry/default/tabs/tabs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, use, useMemo, useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -15,7 +15,7 @@ type TabsContextValue = {
 const TabsContext = createContext<null | TabsContextValue>(null);
 
 function useTabsContext(): TabsContextValue {
-  const context = useContext(TabsContext);
+  const context = use(TabsContext);
   if (!context) {
     throw new Error("Tab components must be used within a Tabs component");
   }
diff --git a/apps/registry/registry/default/tags-input/tags-input.tsx b/apps/registry/registry/default/tags-input/tags-input.tsx
index 351152fb..8ad6fb08 100644
--- a/apps/registry/registry/default/tags-input/tags-input.tsx
+++ b/apps/registry/registry/default/tags-input/tags-input.tsx
@@ -168,66 +168,62 @@ export type TagsInputProps = Omit<
   value?: string[];
 };
 
-const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
-  (
-    {
-      className,
-      defaultValue = [],
-      disabled = false,
-      onBlur,
-      onKeyDown,
-      onValueChange,
-      placeholder = "Add a tag",
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [inputValue, setInputValue] = React.useState("");
-    const { tags, updateTags } = useTagsInputState({
-      defaultValue,
-      onValueChange,
-      value,
-    });
-    const { handleKeyDown, removeTag } = useTagsInputHandlers({
-      disabled,
-      inputValue,
-      onKeyDown,
-      setInputValue,
-      tags,
-      updateTags,
-    });
-
-    return (
-      <div
-        aria-disabled={disabled || undefined}
-        className={cn(
-          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          disabled && "cursor-not-allowed opacity-50",
-          className,
-        )}
-        data-disabled={disabled ? "true" : undefined}
-        role="group"
-      >
-        <TagList disabled={disabled} onRemove={removeTag} tags={tags} />
-        <input
-          {...props}
-          className="min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed"
-          disabled={disabled}
-          onBlur={onBlur}
-          onChange={(event) => {
-            setInputValue(event.target.value);
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          ref={ref}
-          type="text"
-          value={inputValue}
-        />
-      </div>
-    );
-  },
-);
+const TagsInput = ({
+  className,
+  defaultValue = [],
+  disabled = false,
+  onBlur,
+  onKeyDown,
+  onValueChange,
+  placeholder = "Add a tag",
+  ref,
+  value,
+  ...props
+}: TagsInputProps & React.RefAttributes<HTMLInputElement>) => {
+  const [inputValue, setInputValue] = React.useState("");
+  const { tags, updateTags } = useTagsInputState({
+    defaultValue,
+    onValueChange,
+    value,
+  });
+  const { handleKeyDown, removeTag } = useTagsInputHandlers({
+    disabled,
+    inputValue,
+    onKeyDown,
+    setInputValue,
+    tags,
+    updateTags,
+  });
+
+  return (
+    <div
+      aria-disabled={disabled || undefined}
+      className={cn(
+        "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      data-disabled={disabled ? "true" : undefined}
+      role="group"
+    >
+      <TagList disabled={disabled} onRemove={removeTag} tags={tags} />
+      <input
+        {...props}
+        className="min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed"
+        disabled={disabled}
+        onBlur={onBlur}
+        onChange={(event) => {
+          setInputValue(event.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        ref={ref}
+        type="text"
+        value={inputValue}
+      />
+    </div>
+  );
+};
 TagsInput.displayName = "TagsInput";
 
 export { TagsInput };
diff --git a/apps/registry/registry/default/textarea/textarea.tsx b/apps/registry/registry/default/textarea/textarea.tsx
index ab54a552..c289835b 100644
--- a/apps/registry/registry/default/textarea/textarea.tsx
+++ b/apps/registry/registry/default/textarea/textarea.tsx
@@ -1,23 +1,22 @@
-import { forwardRef } from "react";
-
 import { cn } from "@vllnt/ui";
-
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
+const Textarea = ({
+  className,
+  ref,
+  ...props
+}: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+};
 
+Textarea.displayName = "Textarea";
 export { Textarea };
diff --git a/apps/registry/registry/default/thread-bubble/thread-bubble.tsx b/apps/registry/registry/default/thread-bubble/thread-bubble.tsx
index 61a18455..c5b31ff3 100644
--- a/apps/registry/registry/default/thread-bubble/thread-bubble.tsx
+++ b/apps/registry/registry/default/thread-bubble/thread-bubble.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -112,70 +108,79 @@ const Message = (props: { message: ThreadMessage }): React.ReactElement => {
  *
  * @public
  */
-export const ThreadBubble = forwardRef<HTMLElement, ThreadBubbleProps>(
-  (props, ref) => {
-    const { className, footer, labels, messages, onResolve, title, ...rest } =
-      props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const handleResolve = (): void => {
-      onResolve?.();
-    };
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
-          className,
-        )}
-        data-thread-bubble
-        ref={ref}
-        {...rest}
-      >
-        {title || onResolve ? (
-          <header className="flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground">
-            {title ? (
-              <span className="truncate font-semibold" data-thread-bubble-title>
-                {title}
-              </span>
-            ) : (
-              <span aria-hidden="true" />
-            )}
-            {onResolve ? (
-              <button
-                className="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                data-thread-bubble-resolve
-                onClick={handleResolve}
-                type="button"
-              >
-                Resolve
-              </button>
-            ) : null}
-          </header>
-        ) : null}
-        {messages.length === 0 ? (
-          <p
-            className="px-1 py-2 text-center text-[11px] text-muted-foreground"
-            data-thread-bubble-state="empty"
-          >
-            {resolvedLabels.empty}
-          </p>
-        ) : (
-          <ul className="space-y-2 overflow-y-auto" data-thread-bubble-list>
-            {messages.map((message) => (
-              <Message key={message.id} message={message} />
-            ))}
-          </ul>
-        )}
-        {footer ? (
-          <footer
-            className="border-t border-border pt-2"
-            data-thread-bubble-footer
-          >
-            {footer}
-          </footer>
-        ) : null}
-      </section>
-    );
-  },
-);
+// eslint-disable-next-line max-lines-per-function
+export const ThreadBubble = (
+  props: ThreadBubbleProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    footer,
+    labels,
+    messages,
+    onResolve,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const handleResolve = (): void => {
+    onResolve?.();
+  };
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+        className,
+      )}
+      data-thread-bubble
+      ref={ref}
+      {...rest}
+    >
+      {title || onResolve ? (
+        <header className="flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground">
+          {title ? (
+            <span className="truncate font-semibold" data-thread-bubble-title>
+              {title}
+            </span>
+          ) : (
+            <span aria-hidden="true" />
+          )}
+          {onResolve ? (
+            <button
+              className="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-thread-bubble-resolve
+              onClick={handleResolve}
+              type="button"
+            >
+              Resolve
+            </button>
+          ) : null}
+        </header>
+      ) : null}
+      {messages.length === 0 ? (
+        <p
+          className="px-1 py-2 text-center text-[11px] text-muted-foreground"
+          data-thread-bubble-state="empty"
+        >
+          {resolvedLabels.empty}
+        </p>
+      ) : (
+        <ul className="space-y-2 overflow-y-auto" data-thread-bubble-list>
+          {messages.map((message) => (
+            <Message key={message.id} message={message} />
+          ))}
+        </ul>
+      )}
+      {footer ? (
+        <footer
+          className="border-t border-border pt-2"
+          data-thread-bubble-footer
+        >
+          {footer}
+        </footer>
+      ) : null}
+    </section>
+  );
+};
 ThreadBubble.displayName = "ThreadBubble";
diff --git a/apps/registry/registry/default/threshold-ring/threshold-ring.tsx b/apps/registry/registry/default/threshold-ring/threshold-ring.tsx
index 8932005e..d8321a3d 100644
--- a/apps/registry/registry/default/threshold-ring/threshold-ring.tsx
+++ b/apps/registry/registry/default/threshold-ring/threshold-ring.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -170,71 +166,72 @@ const Tick = (props: { geom: Geometry }): null | React.ReactElement => {
  *
  * @public
  */
-export const ThresholdRing = forwardRef<SVGSVGElement, ThresholdRingProps>(
-  (props, ref) => {
-    const {
-      centerLabel,
-      className,
-      labels,
-      max = 1,
-      size = 64,
-      stroke = 6,
-      threshold,
-      tone = "neutral",
-      value,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const geom = computeGeometry({ max, size, stroke, threshold, value });
-    const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
-    return (
-      <svg
-        aria-label={resolvedLabels.region}
-        className={cn("inline-block", className)}
-        data-threshold-ring
-        data-threshold-tone={tone}
-        height={geom.size}
-        ref={ref}
-        role="img"
-        viewBox={`0 0 ${geom.size} ${geom.size}`}
-        width={geom.size}
-        {...rest}
-      >
-        <circle
-          className="stroke-muted"
-          cx={geom.cx}
-          cy={geom.cy}
-          fill="none"
-          r={geom.r}
-          strokeWidth={geom.stroke}
-        />
-        <circle
-          className={cn("transition-all duration-300", TONE_STROKE[tone])}
-          cx={geom.cx}
-          cy={geom.cy}
-          data-threshold-ring-arc
-          fill="none"
-          r={geom.r}
-          strokeDasharray={dash}
-          strokeLinecap="round"
-          strokeWidth={geom.stroke}
-          transform={`rotate(-90 ${geom.cx} ${geom.cy})`}
-        />
-        <Tick geom={geom} />
-        {centerLabel ? (
-          <text
-            className="fill-foreground text-[10px] font-semibold"
-            data-threshold-ring-label
-            dominantBaseline="central"
-            textAnchor="middle"
-            x={geom.cx}
-            y={geom.cy}
-          >
-            {centerLabel}
-          </text>
-        ) : null}
-      </svg>
-    );
-  },
-);
+export const ThresholdRing = (
+  props: ThresholdRingProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    centerLabel,
+    className,
+    labels,
+    max = 1,
+    ref,
+    size = 64,
+    stroke = 6,
+    threshold,
+    tone = "neutral",
+    value,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const geom = computeGeometry({ max, size, stroke, threshold, value });
+  const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
+  return (
+    <svg
+      aria-label={resolvedLabels.region}
+      className={cn("inline-block", className)}
+      data-threshold-ring
+      data-threshold-tone={tone}
+      height={geom.size}
+      ref={ref}
+      role="img"
+      viewBox={`0 0 ${geom.size} ${geom.size}`}
+      width={geom.size}
+      {...rest}
+    >
+      <circle
+        className="stroke-muted"
+        cx={geom.cx}
+        cy={geom.cy}
+        fill="none"
+        r={geom.r}
+        strokeWidth={geom.stroke}
+      />
+      <circle
+        className={cn("transition-all duration-300", TONE_STROKE[tone])}
+        cx={geom.cx}
+        cy={geom.cy}
+        data-threshold-ring-arc
+        fill="none"
+        r={geom.r}
+        strokeDasharray={dash}
+        strokeLinecap="round"
+        strokeWidth={geom.stroke}
+        transform={`rotate(-90 ${geom.cx} ${geom.cy})`}
+      />
+      <Tick geom={geom} />
+      {centerLabel ? (
+        <text
+          className="fill-foreground text-[10px] font-semibold"
+          data-threshold-ring-label
+          dominantBaseline="central"
+          textAnchor="middle"
+          x={geom.cx}
+          y={geom.cy}
+        >
+          {centerLabel}
+        </text>
+      ) : null}
+    </svg>
+  );
+};
 ThresholdRing.displayName = "ThresholdRing";
diff --git a/apps/registry/registry/default/ticker-tape/ticker-tape.tsx b/apps/registry/registry/default/ticker-tape/ticker-tape.tsx
index 8be973e4..a48b3921 100644
--- a/apps/registry/registry/default/ticker-tape/ticker-tape.tsx
+++ b/apps/registry/registry/default/ticker-tape/ticker-tape.tsx
@@ -84,47 +84,49 @@ function TickerTapeRow({ items }: { items: TickerTapeItem[] }) {
   );
 }
 
-export const TickerTape = React.forwardRef<HTMLDivElement, TickerTapeProps>(
-  (
-    { className, items, pauseOnHover = true, speedSeconds = 28, ...props },
-    reference,
-  ) => {
-    if (items.length === 0) {
-      return null;
-    }
+export const TickerTape = ({
+  className,
+  items,
+  pauseOnHover = true,
+  ref: reference,
+  speedSeconds = 28,
+  ...props
+}: TickerTapeProps & React.RefAttributes<HTMLDivElement>) => {
+  if (items.length === 0) {
+    return null;
+  }
 
-    return (
+  return (
+    <div
+      aria-label="TickerTape"
+      className={cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
+        className,
+      )}
+      ref={reference}
+      role="region"
+      {...props}
+    >
+      <style>{tickerTapeKeyframes}</style>
       <div
-        aria-label="TickerTape"
         className={cn(
-          "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
-          className,
+          "flex w-max items-stretch",
+          pauseOnHover && "hover:[animation-play-state:paused]",
         )}
-        ref={reference}
-        role="region"
-        {...props}
+        style={{
+          animationDuration: `${speedSeconds}s`,
+          animationIterationCount: "infinite",
+          animationName: "ticker-tape-scroll",
+          animationTimingFunction: "linear",
+        }}
       >
-        <style>{tickerTapeKeyframes}</style>
-        <div
-          className={cn(
-            "flex w-max items-stretch",
-            pauseOnHover && "hover:[animation-play-state:paused]",
-          )}
-          style={{
-            animationDuration: `${speedSeconds}s`,
-            animationIterationCount: "infinite",
-            animationName: "ticker-tape-scroll",
-            animationTimingFunction: "linear",
-          }}
-        >
+        <TickerTapeRow items={items} />
+        <div aria-hidden="true">
           <TickerTapeRow items={items} />
-          <div aria-hidden="true">
-            <TickerTapeRow items={items} />
-          </div>
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 TickerTape.displayName = "TickerTape";
diff --git a/apps/registry/registry/default/timeline-scrubber/timeline-scrubber.tsx b/apps/registry/registry/default/timeline-scrubber/timeline-scrubber.tsx
index 2fe1f903..0988db11 100644
--- a/apps/registry/registry/default/timeline-scrubber/timeline-scrubber.tsx
+++ b/apps/registry/registry/default/timeline-scrubber/timeline-scrubber.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
 } from "react";
@@ -224,16 +223,16 @@ const TickMark = (props: {
  *
  * @public
  */
-export const TimelineScrubber = forwardRef<
-  HTMLDivElement,
-  TimelineScrubberProps
->((props, ref) => {
+export const TimelineScrubber = (
+  props: TimelineScrubberProps & React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     className,
     end,
     formatValue,
     labels,
     onValueChange,
+    ref,
     start,
     step = 1,
     ticks,
@@ -286,5 +285,5 @@ export const TimelineScrubber = forwardRef<
       />
     </div>
   );
-});
+};
 TimelineScrubber.displayName = "TimelineScrubber";
diff --git a/apps/registry/registry/default/timeline/timeline.tsx b/apps/registry/registry/default/timeline/timeline.tsx
index 3cfc064e..016a75ef 100644
--- a/apps/registry/registry/default/timeline/timeline.tsx
+++ b/apps/registry/registry/default/timeline/timeline.tsx
@@ -3,9 +3,8 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
-  useContext,
+  use,
   useMemo,
 } from "react";
 
@@ -109,7 +108,7 @@ const TimelineContext = createContext<TimelineContextValue>({
  * @public
  */
 export function useTimelineOrientation(): TimelineOrientation {
-  return useContext(TimelineContext).orientation;
+  return use(TimelineContext).orientation;
 }
 
 const timelineVariants = cva("flex", {
@@ -152,27 +151,31 @@ export type TimelineProps = ComponentPropsWithoutRef<"ol"> &
  *
  * @public
  */
-export const Timeline = forwardRef<HTMLOListElement, TimelineProps>(
-  ({ children, className, orientation, ...rest }, ref) => {
-    const resolvedOrientation: TimelineOrientation = orientation ?? "vertical";
-    const contextValue = useMemo<TimelineContextValue>(
-      () => ({ orientation: resolvedOrientation }),
-      [resolvedOrientation],
-    );
-    return (
-      <TimelineContext.Provider value={contextValue}>
-        <ol
-          className={cn(timelineVariants({ orientation }), className)}
-          data-orientation={resolvedOrientation}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </ol>
-      </TimelineContext.Provider>
-    );
-  },
-);
+export const Timeline = ({
+  children,
+  className,
+  orientation,
+  ref,
+  ...rest
+}: TimelineProps & React.RefAttributes<HTMLOListElement>) => {
+  const resolvedOrientation: TimelineOrientation = orientation ?? "vertical";
+  const contextValue = useMemo<TimelineContextValue>(
+    () => ({ orientation: resolvedOrientation }),
+    [resolvedOrientation],
+  );
+  return (
+    <TimelineContext.Provider value={contextValue}>
+      <ol
+        className={cn(timelineVariants({ orientation }), className)}
+        data-orientation={resolvedOrientation}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </ol>
+    </TimelineContext.Provider>
+  );
+};
 Timeline.displayName = "Timeline";
 
 /**
@@ -320,50 +323,49 @@ function ItemBody({
  *
  * @public
  */
-export const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color,
-      date,
-      description,
-      icon,
-      isLast = false,
-      status = "upcoming",
-      title,
-      ...rest
-    } = props;
-    const orientation = useTimelineOrientation();
-    return (
-      <li
-        className={cn(
-          "relative",
-          orientation === "horizontal"
-            ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1"
-            : "flex items-start gap-3 pb-6 last:pb-0",
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        {...rest}
+export const TimelineItem = (
+  props: TimelineItemProps & React.RefAttributes<HTMLLIElement>,
+) => {
+  const {
+    children,
+    className,
+    color,
+    date,
+    description,
+    icon,
+    isLast = false,
+    ref,
+    status = "upcoming",
+    title,
+    ...rest
+  } = props;
+  const orientation = useTimelineOrientation();
+  return (
+    <li
+      className={cn(
+        "relative",
+        orientation === "horizontal"
+          ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1"
+          : "flex items-start gap-3 pb-6 last:pb-0",
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      {...rest}
+    >
+      {isLast ? null : <Connector orientation={orientation} status={status} />}
+      <Marker color={color} icon={icon} status={status} />
+      <ItemBody
+        date={date}
+        description={description}
+        orientation={orientation}
+        title={title}
       >
-        {isLast ? null : (
-          <Connector orientation={orientation} status={status} />
-        )}
-        <Marker color={color} icon={icon} status={status} />
-        <ItemBody
-          date={date}
-          description={description}
-          orientation={orientation}
-          title={title}
-        >
-          {children}
-        </ItemBody>
-      </li>
-    );
-  },
-);
+        {children}
+      </ItemBody>
+    </li>
+  );
+};
 TimelineItem.displayName = "TimelineItem";
 
 export { timelineVariants };
diff --git a/apps/registry/registry/default/toast/toast.tsx b/apps/registry/registry/default/toast/toast.tsx
index debebea7..5fdc206a 100644
--- a/apps/registry/registry/default/toast/toast.tsx
+++ b/apps/registry/registry/default/toast/toast.tsx
@@ -28,22 +28,30 @@ const toastVariants = cva(
   },
 );
 
-const Toast = React.forwardRef<
-  HTMLDivElement,
-  ToastProps & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, reference) => (
+const Toast = ({
+  className,
+  ref: reference,
+  variant,
+  ...props
+}: ToastProps &
+  VariantProps<typeof toastVariants> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(toastVariants({ variant }), className)}
     ref={reference}
     {...props}
   />
-));
+);
 Toast.displayName = "Toast";
 
-const ToastAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<"button"> & { altText?: string }
->(({ altText, className, ...props }, reference) => (
+const ToastAction = ({
+  altText,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<"button"> & {
+  altText?: string;
+} & React.RefAttributes<HTMLButtonElement>) => (
   <button
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
@@ -53,13 +61,15 @@ const ToastAction = React.forwardRef<
     type="button"
     {...props}
   />
-));
+);
 ToastAction.displayName = "ToastAction";
 
-const ToastClose = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<"button">
->(({ className, ...props }, reference) => (
+const ToastClose = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<"button"> &
+  React.RefAttributes<HTMLButtonElement>) => (
   <button
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
@@ -72,31 +82,35 @@ const ToastClose = React.forwardRef<
   >
     <span className="sr-only">Close</span>✕
   </button>
-));
+);
 ToastClose.displayName = "ToastClose";
 
-const ToastTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const ToastTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm font-semibold", className)}
     ref={reference}
     {...props}
   />
-));
+);
 ToastTitle.displayName = "ToastTitle";
 
-const ToastDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const ToastDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm opacity-90", className)}
     ref={reference}
     {...props}
   />
-));
+);
 ToastDescription.displayName = "ToastDescription";
 
 export { Toast, ToastAction, ToastClose, ToastDescription, ToastTitle };
diff --git a/apps/registry/registry/default/toggle-group/toggle-group.tsx b/apps/registry/registry/default/toggle-group/toggle-group.tsx
index 6a155285..dc03fbf9 100644
--- a/apps/registry/registry/default/toggle-group/toggle-group.tsx
+++ b/apps/registry/registry/default/toggle-group/toggle-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import type { VariantProps } from "class-variance-authority";
@@ -13,11 +13,18 @@ const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
   variant: "default",
 });
 
-const ToggleGroup = forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ children, className, size, variant, ...props }, ref) => {
+const ToggleGroup = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Root>
+  >) => {
   const contextValue = useMemo(() => ({ size, variant }), [size, variant]);
 
   return (
@@ -31,16 +38,23 @@ const ToggleGroup = forwardRef<
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
   );
-});
+};
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ children, className, size, variant, ...props }, ref) => {
-  const context = useContext(ToggleGroupContext);
+const ToggleGroupItem = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Item>
+  >) => {
+  const context = use(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -57,7 +71,7 @@ const ToggleGroupItem = forwardRef<
       {children}
     </ToggleGroupPrimitive.Item>
   );
-});
+};
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
diff --git a/apps/registry/registry/default/toggle/toggle.tsx b/apps/registry/registry/default/toggle/toggle.tsx
index 2220201b..e1f51195 100644
--- a/apps/registry/registry/default/toggle/toggle.tsx
+++ b/apps/registry/registry/default/toggle/toggle.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -29,18 +26,21 @@ const toggleVariants = cva(
   },
 );
 
-const Toggle = forwardRef<
-  React.ComponentRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, size, variant, ...props }, ref) => (
+const Toggle = ({
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<React.ComponentRef<typeof TogglePrimitive.Root>>) => (
   <TogglePrimitive.Root
     className={cn(toggleVariants({ className, size, variant }))}
     ref={ref}
     {...props}
   />
-));
+);
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
-
 export { Toggle, toggleVariants };
diff --git a/apps/registry/registry/default/tooltip/tooltip.tsx b/apps/registry/registry/default/tooltip/tooltip.tsx
index 99f8e58c..e61f3bae 100644
--- a/apps/registry/registry/default/tooltip/tooltip.tsx
+++ b/apps/registry/registry/default/tooltip/tooltip.tsx
@@ -1,21 +1,18 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@vllnt/ui";
-
 const TooltipProvider = TooltipPrimitive.Provider;
-
 const Tooltip = TooltipPrimitive.Root;
-
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = forwardRef<
-  React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent = ({
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof TooltipPrimitive.Content>>) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       className={cn(
@@ -27,7 +24,7 @@ const TooltipContent = forwardRef<
       {...props}
     />
   </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+);
 
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/apps/registry/registry/default/top-bar/top-bar.tsx b/apps/registry/registry/default/top-bar/top-bar.tsx
index d0f387c5..c7979825 100644
--- a/apps/registry/registry/default/top-bar/top-bar.tsx
+++ b/apps/registry/registry/default/top-bar/top-bar.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
@@ -11,50 +9,51 @@ export type TopBarProps = React.ComponentPropsWithoutRef<"header"> & {
   trailing?: ReactNode;
 };
 
-const TopBar = forwardRef<HTMLElement, TopBarProps>(
-  (
-    { children, className, leading, subtitle, title, trailing, ...props },
-    ref,
-  ) => (
-    <header
-      className={cn(
-        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-3">
-        {leading ? (
-          <div className="flex shrink-0 items-center gap-2">{leading}</div>
-        ) : null}
-        {title || subtitle ? (
-          <div className="min-w-0">
-            {title ? (
-              <div className="truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground">
-                {title}
-              </div>
-            ) : null}
-            {subtitle ? (
-              <div className="truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-                {subtitle}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      {children ? (
-        <div className="flex flex-1 items-center justify-center">
-          {children}
+const TopBar = ({
+  children,
+  className,
+  leading,
+  ref,
+  subtitle,
+  title,
+  trailing,
+  ...props
+}: TopBarProps & React.RefAttributes<HTMLElement>) => (
+  <header
+    className={cn(
+      "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      {leading ? (
+        <div className="flex shrink-0 items-center gap-2">{leading}</div>
+      ) : null}
+      {title || subtitle ? (
+        <div className="min-w-0">
+          {title ? (
+            <div className="truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground">
+              {title}
+            </div>
+          ) : null}
+          {subtitle ? (
+            <div className="truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+              {subtitle}
+            </div>
+          ) : null}
         </div>
       ) : null}
-      <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
-        {trailing}
-      </div>
-    </header>
-  ),
+    </div>
+    {children ? (
+      <div className="flex flex-1 items-center justify-center">{children}</div>
+    ) : null}
+    <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+      {trailing}
+    </div>
+  </header>
 );
 
 TopBar.displayName = "TopBar";
-
 export { TopBar };
diff --git a/apps/registry/registry/default/transaction-list/transaction-list.tsx b/apps/registry/registry/default/transaction-list/transaction-list.tsx
index 4bb2c209..9fd36315 100644
--- a/apps/registry/registry/default/transaction-list/transaction-list.tsx
+++ b/apps/registry/registry/default/transaction-list/transaction-list.tsx
@@ -1,8 +1,4 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 import { Badge } from "@vllnt/ui";
@@ -201,59 +197,60 @@ export type TransactionListProps = {
   transactions: Transaction[];
 } & ComponentPropsWithoutRef<"div">;
 
-type TransactionListComponent = ReturnType<
-  typeof forwardRef<HTMLDivElement, TransactionListProps>
-> & {
+type TransactionListComponent = ((
+  props: TransactionListProps & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement) & {
   Pinned: typeof TransactionListPinned;
   SubscriptionRow: typeof TransactionListSubscriptionRow;
 };
 
-const TransactionListBase = forwardRef<HTMLDivElement, TransactionListProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      currency,
-      emptyMessage,
-      labels,
-      locale,
-      transactions,
-      ...rest
-    } = props;
-    const isEmpty = transactions.length === 0;
-    const hasPinned = Boolean(children);
-    return (
-      <div
-        className={cn(
-          "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-        {isEmpty && !hasPinned && emptyMessage ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            {emptyMessage}
-          </p>
-        ) : null}
-        {isEmpty ? null : (
-          <ul className="flex flex-col gap-1.5">
-            {transactions.map((transaction) => (
-              <TransactionListItem
-                currency={currency}
-                key={transaction.id}
-                labels={labels}
-                locale={locale}
-                transaction={transaction}
-              />
-            ))}
-          </ul>
-        )}
-      </div>
-    );
-  },
-);
+const TransactionListBase = (
+  props: TransactionListProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    currency,
+    emptyMessage,
+    labels,
+    locale,
+    ref,
+    transactions,
+    ...rest
+  } = props;
+  const isEmpty = transactions.length === 0;
+  const hasPinned = Boolean(children);
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+      {isEmpty && !hasPinned && emptyMessage ? (
+        <p className="py-6 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </p>
+      ) : null}
+      {isEmpty ? null : (
+        <ul className="flex flex-col gap-1.5">
+          {transactions.map((transaction) => (
+            <TransactionListItem
+              currency={currency}
+              key={transaction.id}
+              labels={labels}
+              locale={locale}
+              transaction={transaction}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
 TransactionListBase.displayName = "TransactionList";
 
 /**
@@ -269,14 +266,16 @@ export type TransactionListPinnedProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const TransactionListPinned = forwardRef<
-  HTMLDivElement,
-  TransactionListPinnedProps
->(({ children, className, ...rest }, ref) => (
+export const TransactionListPinned = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: TransactionListPinnedProps & React.RefAttributes<HTMLDivElement>) => (
   <div className={cn("flex flex-col gap-1.5", className)} ref={ref} {...rest}>
     {children}
   </div>
-));
+);
 TransactionListPinned.displayName = "TransactionList.Pinned";
 
 type TransactionListItemProps = {
@@ -386,10 +385,10 @@ function SubscriptionMeta({
  *
  * @public
  */
-export const TransactionListSubscriptionRow = forwardRef<
-  HTMLDivElement,
-  TransactionListSubscriptionRowProps
->((props, ref) => {
+export const TransactionListSubscriptionRow = (
+  props: TransactionListSubscriptionRowProps &
+    React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     amountCents,
     className,
@@ -399,6 +398,7 @@ export const TransactionListSubscriptionRow = forwardRef<
     locale,
     meta,
     plan,
+    ref,
     renewsAt,
     status,
     ...rest
@@ -440,7 +440,7 @@ export const TransactionListSubscriptionRow = forwardRef<
       </span>
     </div>
   );
-});
+};
 TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
 
 /**
@@ -470,6 +470,7 @@ TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
  *
  * @public
  */
-export const TransactionList = TransactionListBase as TransactionListComponent;
+export const TransactionList =
+  TransactionListBase as unknown as TransactionListComponent;
 TransactionList.Pinned = TransactionListPinned;
 TransactionList.SubscriptionRow = TransactionListSubscriptionRow;
diff --git a/apps/registry/registry/default/tree-view/tree-view.tsx b/apps/registry/registry/default/tree-view/tree-view.tsx
index 489f2ada..97cf1693 100644
--- a/apps/registry/registry/default/tree-view/tree-view.tsx
+++ b/apps/registry/registry/default/tree-view/tree-view.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
   useCallback,
@@ -385,81 +384,81 @@ function TreeRows({
  *
  * @public
  */
-export const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(
-  (props, ref) => {
-    const {
-      className,
-      defaultExpanded,
-      defaultSelected,
-      expanded,
-      labels,
-      nodes,
-      onExpandedChange,
-      onSelect,
-      selected,
-      selectionMode = "single",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
+// eslint-disable-next-line max-lines-per-function
+export const TreeView = (
+  props: TreeViewProps & React.RefAttributes<HTMLUListElement>,
+) => {
+  const {
+    className,
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    labels,
+    nodes,
+    onExpandedChange,
+    onSelect,
+    ref,
+    selected,
+    selectionMode = "single",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
 
-    const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState(
-      {
-        defaultExpanded,
-        defaultSelected,
-        expanded,
-        onExpandedChange,
-        onSelect,
-        selected,
-        selectionMode,
-      },
-    );
+  const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState({
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    onExpandedChange,
+    onSelect,
+    selected,
+    selectionMode,
+  });
 
-    const flat = useMemo(
-      () => flattenVisible({ expanded: expandedSet, nodes }),
-      [expandedSet, nodes],
-    );
+  const flat = useMemo(
+    () => flattenVisible({ expanded: expandedSet, nodes }),
+    [expandedSet, nodes],
+  );
 
-    const [activeId, setActiveId] = useState<string | undefined>(
-      () => flat[0]?.node.id,
-    );
+  const [activeId, setActiveId] = useState<string | undefined>(
+    () => flat[0]?.node.id,
+  );
 
-    const handleKeyDown = useKeyboardHandler({
-      activeId,
-      applyExpand,
-      applySelect,
-      expandedSet,
-      flat,
-      setActiveId,
-    });
+  const handleKeyDown = useKeyboardHandler({
+    activeId,
+    applyExpand,
+    applySelect,
+    expandedSet,
+    flat,
+    setActiveId,
+  });
 
-    return (
-      <ul
-        aria-label={resolvedLabels.region}
-        aria-multiselectable={selectionMode === "multiple" || undefined}
-        className={cn(
-          "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          className,
-        )}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        role="tree"
-        tabIndex={0}
-        {...rest}
-      >
-        <TreeRows
-          activeId={activeId}
-          applyExpand={applyExpand}
-          applySelect={applySelect}
-          expandedSet={expandedSet}
-          flat={flat}
-          selectedSet={selectedSet}
-          setActiveId={setActiveId}
-        />
-      </ul>
-    );
-  },
-);
+  return (
+    <ul
+      aria-label={resolvedLabels.region}
+      aria-multiselectable={selectionMode === "multiple" || undefined}
+      className={cn(
+        "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      role="tree"
+      tabIndex={0}
+      {...rest}
+    >
+      <TreeRows
+        activeId={activeId}
+        applyExpand={applyExpand}
+        applySelect={applySelect}
+        expandedSet={expandedSet}
+        flat={flat}
+        selectedSet={selectedSet}
+        setActiveId={setActiveId}
+      />
+    </ul>
+  );
+};
 TreeView.displayName = "TreeView";
diff --git a/apps/registry/registry/default/usage-breakdown/usage-breakdown.tsx b/apps/registry/registry/default/usage-breakdown/usage-breakdown.tsx
index c4870af2..74bd114b 100644
--- a/apps/registry/registry/default/usage-breakdown/usage-breakdown.tsx
+++ b/apps/registry/registry/default/usage-breakdown/usage-breakdown.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 
@@ -182,60 +182,54 @@ function getSortedItems(items: UsageBreakdownItem[], maxItems?: number) {
     : rankedItems;
 }
 
-const UsageBreakdown = forwardRef<HTMLDivElement, UsageBreakdownProps>(
-  (
-    {
-      className,
-      description,
-      emptyMessage = "No usage data available.",
-      items,
-      maxItems,
-      title = "Usage breakdown",
-      ...props
-    },
-    ref,
-  ) => {
-    const sortedItems = useMemo(
-      () => getSortedItems(items, maxItems),
-      [items, maxItems],
-    );
-    const totalValue = useMemo(
-      () => sortedItems.reduce((sum, item) => sum + item.value, 0),
-      [sortedItems],
-    );
-    const maxValue = sortedItems[0]?.value ?? 0;
-
-    return (
-      <Card className={cn("w-full", className)} ref={ref} {...props}>
-        <CardHeader>
-          <CardTitle>{title}</CardTitle>
-          {description ? (
-            <CardDescription>{description}</CardDescription>
-          ) : null}
-        </CardHeader>
-        <CardContent>
-          {sortedItems.length === 0 ? (
-            <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
-              {emptyMessage}
-            </div>
-          ) : (
-            <ol className="space-y-3">
-              {sortedItems.map((item, index) => (
-                <UsageBreakdownRow
-                  item={item}
-                  key={item.id}
-                  maxValue={maxValue}
-                  rank={index + 1}
-                  totalValue={totalValue}
-                />
-              ))}
-            </ol>
-          )}
-        </CardContent>
-      </Card>
-    );
-  },
-);
+const UsageBreakdown = ({
+  className,
+  description,
+  emptyMessage = "No usage data available.",
+  items,
+  maxItems,
+  ref,
+  title = "Usage breakdown",
+  ...props
+}: UsageBreakdownProps & React.RefAttributes<HTMLDivElement>) => {
+  const sortedItems = useMemo(
+    () => getSortedItems(items, maxItems),
+    [items, maxItems],
+  );
+  const totalValue = useMemo(
+    () => sortedItems.reduce((sum, item) => sum + item.value, 0),
+    [sortedItems],
+  );
+  const maxValue = sortedItems[0]?.value ?? 0;
+
+  return (
+    <Card className={cn("w-full", className)} ref={ref} {...props}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        {sortedItems.length === 0 ? (
+          <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        ) : (
+          <ol className="space-y-3">
+            {sortedItems.map((item, index) => (
+              <UsageBreakdownRow
+                item={item}
+                key={item.id}
+                maxValue={maxValue}
+                rank={index + 1}
+                totalValue={totalValue}
+              />
+            ))}
+          </ol>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
 
 UsageBreakdown.displayName = "UsageBreakdown";
 
diff --git a/apps/registry/registry/default/viewport-bookmarks/viewport-bookmarks.tsx b/apps/registry/registry/default/viewport-bookmarks/viewport-bookmarks.tsx
index 6dad779f..39abd689 100644
--- a/apps/registry/registry/default/viewport-bookmarks/viewport-bookmarks.tsx
+++ b/apps/registry/registry/default/viewport-bookmarks/viewport-bookmarks.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -146,16 +142,16 @@ const RowBody = (props: { bookmark: ViewportBookmark }): React.ReactElement => {
  *
  * @public
  */
-export const ViewportBookmarks = forwardRef<
-  HTMLElement,
-  ViewportBookmarksProps
->((props, ref) => {
+export const ViewportBookmarks = (
+  props: ViewportBookmarksProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     activeId,
     bookmarks,
     className,
     labels,
     onSelect,
+    ref,
     title = "Saved views",
     ...rest
   } = props;
@@ -196,5 +192,5 @@ export const ViewportBookmarks = forwardRef<
       )}
     </section>
   );
-});
+};
 ViewportBookmarks.displayName = "ViewportBookmarks";
diff --git a/apps/registry/registry/default/wallet-card/wallet-card.tsx b/apps/registry/registry/default/wallet-card/wallet-card.tsx
index f4b31514..5ad37efd 100644
--- a/apps/registry/registry/default/wallet-card/wallet-card.tsx
+++ b/apps/registry/registry/default/wallet-card/wallet-card.tsx
@@ -105,65 +105,58 @@ function WalletActions({
   );
 }
 
-export const WalletCard = React.forwardRef<
-  React.ComponentRef<typeof Card>,
-  WalletCardProps
->(
-  (
-    {
-      availableLabel,
-      balanceLabel,
-      className,
-      note,
-      pendingLabel,
-      primaryActionLabel,
-      renewsLabel,
-      secondaryActionLabel,
-      status,
-      ...props
-    },
-    reference,
-  ) => {
-    return (
-      <Card
-        className={cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <CardHeader className="space-y-4 pb-4">
-          <div className="space-y-1">
-            <CardTitle className="text-lg">Wallet</CardTitle>
-            <CardDescription>
-              Track credits, pending top-ups, and replenishment timing.
-            </CardDescription>
-          </div>
-          <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
-            <div>
-              <p className="text-sm font-medium">Available balance</p>
-              <p className="text-xs text-muted-foreground">
-                {renewsLabel ?? "Credits refresh automatically when enabled."}
-              </p>
-            </div>
-            <CreditBadge amount={balanceLabel} status={status} />
+export const WalletCard = ({
+  availableLabel,
+  balanceLabel,
+  className,
+  note,
+  pendingLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewsLabel,
+  secondaryActionLabel,
+  status,
+  ...props
+}: WalletCardProps & React.RefAttributes<React.ComponentRef<typeof Card>>) => {
+  return (
+    <Card
+      className={cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <CardHeader className="space-y-4 pb-4">
+        <div className="space-y-1">
+          <CardTitle className="text-lg">Wallet</CardTitle>
+          <CardDescription>
+            Track credits, pending top-ups, and replenishment timing.
+          </CardDescription>
+        </div>
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
+          <div>
+            <p className="text-sm font-medium">Available balance</p>
+            <p className="text-xs text-muted-foreground">
+              {renewsLabel ?? "Credits refresh automatically when enabled."}
+            </p>
           </div>
-        </CardHeader>
-        <WalletDetails
-          availableLabel={availableLabel}
-          balanceLabel={balanceLabel}
-          note={note}
-          pendingLabel={pendingLabel}
-          renewsLabel={renewsLabel}
-        />
-        <WalletActions
-          primaryActionLabel={primaryActionLabel}
-          secondaryActionLabel={secondaryActionLabel}
-        />
-      </Card>
-    );
-  },
-);
+          <CreditBadge amount={balanceLabel} status={status} />
+        </div>
+      </CardHeader>
+      <WalletDetails
+        availableLabel={availableLabel}
+        balanceLabel={balanceLabel}
+        note={note}
+        pendingLabel={pendingLabel}
+        renewsLabel={renewsLabel}
+      />
+      <WalletActions
+        primaryActionLabel={primaryActionLabel}
+        secondaryActionLabel={secondaryActionLabel}
+      />
+    </Card>
+  );
+};
 
 WalletCard.displayName = "WalletCard";
diff --git a/apps/registry/registry/default/watchlist/watchlist.tsx b/apps/registry/registry/default/watchlist/watchlist.tsx
index e6dd3847..e0ed1930 100644
--- a/apps/registry/registry/default/watchlist/watchlist.tsx
+++ b/apps/registry/registry/default/watchlist/watchlist.tsx
@@ -86,60 +86,56 @@ function WatchlistRow({ item }: { item: WatchlistItem }): React.JSX.Element {
   );
 }
 
-export const Watchlist = React.forwardRef<HTMLDivElement, WatchlistProps>(
-  (
-    {
-      className,
-      eyebrow = "Tracked symbols",
-      items,
-      title = "Watchlist",
-      ...props
-    },
-    reference,
-  ) => {
-    if (items.length === 0) {
-      return null;
-    }
+export const Watchlist = ({
+  className,
+  eyebrow = "Tracked symbols",
+  items,
+  ref: reference,
+  title = "Watchlist",
+  ...props
+}: WatchlistProps & React.RefAttributes<HTMLDivElement>) => {
+  if (items.length === 0) {
+    return null;
+  }
 
-    const advancing = items.filter((item) => item.change >= 0).length;
-    const declining = items.length - advancing;
+  const advancing = items.filter((item) => item.change >= 0).length;
+  const declining = items.length - advancing;
 
-    return (
-      <section
-        aria-label={title}
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <header className="mb-3 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              {eyebrow}
-            </p>
-            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-          </div>
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400">
-              <ArrowUpRight className="size-3" />
-              {advancing} up
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400">
-              <ArrowDownRight className="size-3" />
-              {declining} down
-            </span>
-          </div>
-        </header>
-        <ul className="divide-y divide-border/60">
-          {items.map((item) => (
-            <WatchlistRow item={item} key={item.symbol} />
-          ))}
-        </ul>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={title}
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <header className="mb-3 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            {eyebrow}
+          </p>
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400">
+            <ArrowUpRight className="size-3" />
+            {advancing} up
+          </span>
+          <span className="inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400">
+            <ArrowDownRight className="size-3" />
+            {declining} down
+          </span>
+        </div>
+      </header>
+      <ul className="divide-y divide-border/60">
+        {items.map((item) => (
+          <WatchlistRow item={item} key={item.symbol} />
+        ))}
+      </ul>
+    </section>
+  );
+};
 
 Watchlist.displayName = "Watchlist";
diff --git a/apps/registry/registry/default/workspace-switcher/workspace-switcher.tsx b/apps/registry/registry/default/workspace-switcher/workspace-switcher.tsx
index ea1a1669..2f20d3ee 100644
--- a/apps/registry/registry/default/workspace-switcher/workspace-switcher.tsx
+++ b/apps/registry/registry/default/workspace-switcher/workspace-switcher.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -20,69 +20,72 @@ export type WorkspaceSwitcherProps = Omit<
   workspaces: WorkspaceOption[];
 };
 
-const WorkspaceSwitcher = forwardRef<HTMLDivElement, WorkspaceSwitcherProps>(
-  (
-    { className, defaultValue, onValueChange, value, workspaces, ...props },
-    ref,
-  ) => {
-    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
-    const [internalValue, setInternalValue] = useState(fallbackValue);
-    const currentValue = value ?? internalValue;
+const WorkspaceSwitcher = ({
+  className,
+  defaultValue,
+  onValueChange,
+  ref,
+  value,
+  workspaces,
+  ...props
+}: WorkspaceSwitcherProps & React.RefAttributes<HTMLDivElement>) => {
+  const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+  const [internalValue, setInternalValue] = useState(fallbackValue);
+  const currentValue = value ?? internalValue;
 
-    const currentWorkspace = useMemo(
-      () => workspaces.find((workspace) => workspace.id === currentValue),
-      [currentValue, workspaces],
-    );
+  const currentWorkspace = useMemo(
+    () => workspaces.find((workspace) => workspace.id === currentValue),
+    [currentValue, workspaces],
+  );
 
-    function handleSelect(nextValue: string) {
-      if (value === undefined) {
-        setInternalValue(nextValue);
-      }
-      onValueChange?.(nextValue);
+  function handleSelect(nextValue: string) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
     }
+    onValueChange?.(nextValue);
+  }
 
-    return (
-      <div
-        className={cn(
-          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
-          className,
-        )}
-        ref={ref}
-        role="radiogroup"
-        {...props}
-      >
-        {workspaces.map((workspace) => {
-          const isActive = workspace.id === currentValue;
-          return (
-            <button
-              aria-checked={isActive}
-              className={cn(
-                "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-              key={workspace.id}
-              onClick={() => {
-                handleSelect(workspace.id);
-              }}
-              role="radio"
-              title={workspace.description}
-              type="button"
-            >
-              {workspace.label}
-            </button>
-          );
-        })}
-        {currentWorkspace?.description ? (
-          <span className="hidden pl-2 pr-1 text-xs text-muted-foreground md:inline">
-            {currentWorkspace.description}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      className={cn(
+        "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+        className,
+      )}
+      ref={ref}
+      role="radiogroup"
+      {...props}
+    >
+      {workspaces.map((workspace) => {
+        const isActive = workspace.id === currentValue;
+        return (
+          <button
+            aria-checked={isActive}
+            className={cn(
+              "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            key={workspace.id}
+            onClick={() => {
+              handleSelect(workspace.id);
+            }}
+            role="radio"
+            title={workspace.description}
+            type="button"
+          >
+            {workspace.label}
+          </button>
+        );
+      })}
+      {currentWorkspace?.description ? (
+        <span className="hidden pl-2 pr-1 text-xs text-muted-foreground md:inline">
+          {currentWorkspace.description}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
 
diff --git a/apps/registry/registry/default/world-breadcrumbs/world-breadcrumbs.tsx b/apps/registry/registry/default/world-breadcrumbs/world-breadcrumbs.tsx
index 0860db3a..456f8ab2 100644
--- a/apps/registry/registry/default/world-breadcrumbs/world-breadcrumbs.tsx
+++ b/apps/registry/registry/default/world-breadcrumbs/world-breadcrumbs.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "@vllnt/ui";
 
@@ -147,58 +143,58 @@ const Crumb = (props: {
  *
  * @public
  */
-export const WorldBreadcrumbs = forwardRef<HTMLElement, WorldBreadcrumbsProps>(
-  (props, ref) => {
-    const { className, crumbs, labels, onSelect, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (crumbs.length === 0) {
-      return (
-        <nav
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "inline-flex items-center text-xs text-muted-foreground",
-            className,
-          )}
-          data-world-breadcrumbs
-          data-world-breadcrumbs-state="empty"
-          ref={ref}
-          {...rest}
-        >
-          {resolvedLabels.empty}
-        </nav>
-      );
-    }
+export const WorldBreadcrumbs = (
+  props: WorldBreadcrumbsProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, crumbs, labels, onSelect, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (crumbs.length === 0) {
     return (
       <nav
         aria-label={resolvedLabels.region}
         className={cn(
-          "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+          "inline-flex items-center text-xs text-muted-foreground",
           className,
         )}
         data-world-breadcrumbs
+        data-world-breadcrumbs-state="empty"
         ref={ref}
         {...rest}
       >
-        {crumbs.map((crumb, index) => (
-          <span className="inline-flex items-center gap-1.5" key={crumb.id}>
-            <Crumb
-              crumb={crumb}
-              isLast={index === crumbs.length - 1}
-              onSelect={onSelect}
-            />
-            {index < crumbs.length - 1 ? (
-              <span
-                aria-hidden="true"
-                className="text-muted-foreground/60"
-                data-world-breadcrumb-sep
-              >
-                ›
-              </span>
-            ) : null}
-          </span>
-        ))}
+        {resolvedLabels.empty}
       </nav>
     );
-  },
-);
+  }
+  return (
+    <nav
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+        className,
+      )}
+      data-world-breadcrumbs
+      ref={ref}
+      {...rest}
+    >
+      {crumbs.map((crumb, index) => (
+        <span className="inline-flex items-center gap-1.5" key={crumb.id}>
+          <Crumb
+            crumb={crumb}
+            isLast={index === crumbs.length - 1}
+            onSelect={onSelect}
+          />
+          {index < crumbs.length - 1 ? (
+            <span
+              aria-hidden="true"
+              className="text-muted-foreground/60"
+              data-world-breadcrumb-sep
+            >
+              ›
+            </span>
+          ) : null}
+        </span>
+      ))}
+    </nav>
+  );
+};
 WorldBreadcrumbs.displayName = "WorldBreadcrumbs";
diff --git a/apps/registry/registry/default/world-clock-bar/world-clock-bar.tsx b/apps/registry/registry/default/world-clock-bar/world-clock-bar.tsx
index 6ff3039b..8b47fdfc 100644
--- a/apps/registry/registry/default/world-clock-bar/world-clock-bar.tsx
+++ b/apps/registry/registry/default/world-clock-bar/world-clock-bar.tsx
@@ -134,49 +134,42 @@ function WorldClockCard({
   );
 }
 
-export const WorldClockBar = React.forwardRef<
-  HTMLDivElement,
-  WorldClockBarProps
->(
-  (
-    {
-      className,
-      now,
-      showDate = true,
-      title = "World clock",
-      updateIntervalMs = 60_000,
-      zones,
-      ...props
-    },
-    ref,
-  ) => {
-    const liveNow = useLiveDate(now, updateIntervalMs);
-
-    return (
-      <div className={cn("space-y-3", className)} ref={ref} {...props}>
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-            <p className="text-sm text-muted-foreground">
-              Synchronized time across distributed teams and regions.
-            </p>
-          </div>
-          <Badge variant="outline">{zones.length} zones</Badge>
-        </div>
+export const WorldClockBar = ({
+  className,
+  now,
+  ref,
+  showDate = true,
+  title = "World clock",
+  updateIntervalMs = 60_000,
+  zones,
+  ...props
+}: WorldClockBarProps & React.RefAttributes<HTMLDivElement>) => {
+  const liveNow = useLiveDate(now, updateIntervalMs);
 
-        <div className="flex gap-3 overflow-x-auto pb-1">
-          {zones.map((zone) => (
-            <WorldClockCard
-              date={liveNow}
-              key={`${zone.city}-${zone.timeZone}`}
-              showDate={showDate}
-              zone={zone}
-            />
-          ))}
+  return (
+    <div className={cn("space-y-3", className)} ref={ref} {...props}>
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          <p className="text-sm text-muted-foreground">
+            Synchronized time across distributed teams and regions.
+          </p>
         </div>
+        <Badge variant="outline">{zones.length} zones</Badge>
+      </div>
+
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {zones.map((zone) => (
+          <WorldClockCard
+            date={liveNow}
+            key={`${zone.city}-${zone.timeZone}`}
+            showDate={showDate}
+            zone={zone}
+          />
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 WorldClockBar.displayName = "WorldClockBar";
diff --git a/apps/registry/registry/default/zoom-hud/zoom-hud.tsx b/apps/registry/registry/default/zoom-hud/zoom-hud.tsx
index 34f9e553..e4c75474 100644
--- a/apps/registry/registry/default/zoom-hud/zoom-hud.tsx
+++ b/apps/registry/registry/default/zoom-hud/zoom-hud.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Minus, Plus, RotateCcw } from "lucide-react";
 
 import { cn } from "@vllnt/ui";
@@ -12,50 +10,55 @@ export type ZoomHUDProps = React.ComponentPropsWithoutRef<"div"> & {
   zoom: number;
 };
 
-const ZoomHUD = forwardRef<HTMLDivElement, ZoomHUDProps>(
-  ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => (
-    <div
-      className={cn(
-        "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
-        className,
-      )}
-      ref={ref}
-      {...props}
+const ZoomHUD = ({
+  className,
+  onReset,
+  onZoomIn,
+  onZoomOut,
+  ref,
+  zoom,
+  ...props
+}: ZoomHUDProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <Button
+      aria-label="Zoom out"
+      onClick={onZoomOut}
+      size="icon"
+      type="button"
+      variant="ghost"
     >
-      <Button
-        aria-label="Zoom out"
-        onClick={onZoomOut}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <Minus className="size-4" />
-      </Button>
-      <div className="min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground">
-        {Math.round(zoom * 100)}%
-      </div>
-      <Button
-        aria-label="Zoom in"
-        onClick={onZoomIn}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <Plus className="size-4" />
-      </Button>
-      <Button
-        aria-label="Reset zoom"
-        onClick={onReset}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <RotateCcw className="size-4" />
-      </Button>
+      <Minus className="size-4" />
+    </Button>
+    <div className="min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground">
+      {Math.round(zoom * 100)}%
     </div>
-  ),
+    <Button
+      aria-label="Zoom in"
+      onClick={onZoomIn}
+      size="icon"
+      type="button"
+      variant="ghost"
+    >
+      <Plus className="size-4" />
+    </Button>
+    <Button
+      aria-label="Reset zoom"
+      onClick={onReset}
+      size="icon"
+      type="button"
+      variant="ghost"
+    >
+      <RotateCcw className="size-4" />
+    </Button>
+  </div>
 );
 
 ZoomHUD.displayName = "ZoomHUD";
-
 export { ZoomHUD };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b58eac4b..70cc02cc 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -93,8 +93,8 @@
   "peerDependencies": {
     "next": ">=14.0.0",
     "next-themes": ">=0.4.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
     "tailwindcss": ">=3.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/packages/ui/src/components/accordion/accordion.tsx b/packages/ui/src/components/accordion/accordion.tsx
index 372047ec..ccc56f14 100644
--- a/packages/ui/src/components/accordion/accordion.tsx
+++ b/packages/ui/src/components/accordion/accordion.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -22,7 +16,7 @@ type AccordionContextValue = {
 const AccordionContext = createContext<AccordionContextValue | null>(null);
 
 function useAccordionContext(): AccordionContextValue {
-  const context = useContext(AccordionContext);
+  const context = use(AccordionContext);
   if (!context) {
     throw new Error("AccordionItem must be used within an Accordion");
   }
diff --git a/packages/ui/src/components/activity-heatmap/activity-heatmap.tsx b/packages/ui/src/components/activity-heatmap/activity-heatmap.tsx
index 3bef6fc7..9e8c94a8 100644
--- a/packages/ui/src/components/activity-heatmap/activity-heatmap.tsx
+++ b/packages/ui/src/components/activity-heatmap/activity-heatmap.tsx
@@ -204,40 +204,33 @@ function HeatmapGrid({
   );
 }
 
-export const ActivityHeatmap = React.forwardRef<
-  HTMLDivElement,
-  ActivityHeatmapProps
->(
-  (
-    {
-      className,
-      data,
-      description,
-      endDate = new Date(),
-      title = "Activity heatmap",
-      weeks = 12,
-      ...props
-    },
-    ref,
-  ) => {
-    const normalizedEndDate = normalizeDate(endDate);
-    const gridData = getGridData(data, normalizedEndDate, weeks);
-
-    return (
-      <div className={cn("space-y-4", className)} ref={ref} {...props}>
-        <div className="space-y-1">
-          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-          {description ? (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          ) : null}
-        </div>
+export const ActivityHeatmap = ({
+  className,
+  data,
+  description,
+  endDate = new Date(),
+  ref,
+  title = "Activity heatmap",
+  weeks = 12,
+  ...props
+}: ActivityHeatmapProps & React.RefAttributes<HTMLDivElement>) => {
+  const normalizedEndDate = normalizeDate(endDate);
+  const gridData = getGridData(data, normalizedEndDate, weeks);
 
-        <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
-          <HeatmapGrid gridData={gridData} weeks={weeks} />
-        </div>
+  return (
+    <div className={cn("space-y-4", className)} ref={ref} {...props}>
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
+        <HeatmapGrid gridData={gridData} weeks={weeks} />
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 ActivityHeatmap.displayName = "ActivityHeatmap";
diff --git a/packages/ui/src/components/activity-log/activity-log.tsx b/packages/ui/src/components/activity-log/activity-log.tsx
index b9eaa9a5..98319692 100644
--- a/packages/ui/src/components/activity-log/activity-log.tsx
+++ b/packages/ui/src/components/activity-log/activity-log.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -294,63 +294,59 @@ function ActivityLogBody({
   );
 }
 
-const ActivityLog = forwardRef<HTMLDivElement, ActivityLogProps>(
-  (
-    {
-      className,
-      defaultPage = 1,
-      description,
-      emptyMessage = "No activity recorded yet.",
-      items,
-      onPageChange,
-      page,
-      pageSize = 5,
-      title = "Activity log",
-      ...props
-    },
-    ref,
-  ) => {
-    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
-    const currentPage = Math.min(
-      Math.max(page ?? uncontrolledPage, 1),
-      totalPages,
-    );
-    const pageNumbers = useMemo(
-      () => buildPageNumbers(currentPage, totalPages),
-      [currentPage, totalPages],
-    );
+const ActivityLog = ({
+  className,
+  defaultPage = 1,
+  description,
+  emptyMessage = "No activity recorded yet.",
+  items,
+  onPageChange,
+  page,
+  pageSize = 5,
+  ref,
+  title = "Activity log",
+  ...props
+}: ActivityLogProps & React.RefAttributes<HTMLDivElement>) => {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+  const currentPage = Math.min(
+    Math.max(page ?? uncontrolledPage, 1),
+    totalPages,
+  );
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages],
+  );
 
-    function handlePageChange(nextPage: number) {
-      if (page === undefined) {
-        setUncontrolledPage(nextPage);
-      }
-      onPageChange?.(nextPage);
+  function handlePageChange(nextPage: number) {
+    if (page === undefined) {
+      setUncontrolledPage(nextPage);
     }
+    onPageChange?.(nextPage);
+  }
 
-    return (
-      <Card className={cn("w-full", className)} ref={ref} {...props}>
-        <ActivityLogHeader
+  return (
+    <Card className={cn("w-full", className)} ref={ref} {...props}>
+      <ActivityLogHeader
+        currentPage={currentPage}
+        description={description}
+        title={title}
+        totalPages={totalPages}
+      />
+      <CardContent className="space-y-4">
+        <ActivityLogBody
           currentPage={currentPage}
-          description={description}
-          title={title}
+          emptyMessage={emptyMessage}
+          items={items}
+          onPageChange={handlePageChange}
+          pageNumbers={pageNumbers}
+          pageSize={pageSize}
           totalPages={totalPages}
         />
-        <CardContent className="space-y-4">
-          <ActivityLogBody
-            currentPage={currentPage}
-            emptyMessage={emptyMessage}
-            items={items}
-            onPageChange={handlePageChange}
-            pageNumbers={pageNumbers}
-            pageSize={pageSize}
-            totalPages={totalPages}
-          />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+      </CardContent>
+    </Card>
+  );
+};
 
 ActivityLog.displayName = "ActivityLog";
 
diff --git a/packages/ui/src/components/agent-activity/agent-activity.tsx b/packages/ui/src/components/agent-activity/agent-activity.tsx
index 6db185a1..97f02183 100644
--- a/packages/ui/src/components/agent-activity/agent-activity.tsx
+++ b/packages/ui/src/components/agent-activity/agent-activity.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -155,47 +154,48 @@ const ACTIVITY_LIVE_REGION_ROLE: Record<AgentActivityStatus, "log" | "status"> =
  *
  * @public
  */
-export const AgentActivity = forwardRef<HTMLElement, AgentActivityProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      elapsed,
-      labels,
-      status = "idle",
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <section
-        aria-live={status === "running" ? "polite" : "off"}
-        className={cn(
-          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        role={ACTIVITY_LIVE_REGION_ROLE[status]}
-        {...rest}
-      >
-        <header className="flex items-center justify-between gap-3">
-          <h3 className="text-sm font-semibold tracking-tight text-foreground">
-            {resolvedLabels.activity}
-          </h3>
-          {elapsed ? (
-            <span
-              aria-label={resolvedLabels.elapsed}
-              className="text-xs font-mono text-muted-foreground"
-            >
-              {elapsed}
-            </span>
-          ) : null}
-        </header>
-        <ol className="flex flex-col gap-2">{children}</ol>
-      </section>
-    );
-  },
-);
+export const AgentActivity = (
+  props: AgentActivityProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    elapsed,
+    labels,
+    ref,
+    status = "idle",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <section
+      aria-live={status === "running" ? "polite" : "off"}
+      className={cn(
+        "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      role={ACTIVITY_LIVE_REGION_ROLE[status]}
+      {...rest}
+    >
+      <header className="flex items-center justify-between gap-3">
+        <h3 className="text-sm font-semibold tracking-tight text-foreground">
+          {resolvedLabels.activity}
+        </h3>
+        {elapsed ? (
+          <span
+            aria-label={resolvedLabels.elapsed}
+            className="text-xs font-mono text-muted-foreground"
+          >
+            {elapsed}
+          </span>
+        ) : null}
+      </header>
+      <ol className="flex flex-col gap-2">{children}</ol>
+    </section>
+  );
+};
 AgentActivity.displayName = "AgentActivity";
 
 /**
@@ -314,68 +314,66 @@ function StepRow({
   );
 }
 
-export const AgentStep = forwardRef<HTMLLIElement, AgentStepProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultOpen = true,
-      icon,
-      status,
-      ...rest
-    } = props;
-    const split = useMemo(() => splitChildren(children), [children]);
-    const palette = STATUS_CLASSES[status];
-    const hasDetails = split.body.length > 0;
-    const [open, setOpen] = useState(defaultOpen);
-    const detailsId = useId();
-
-    const handleToggle = useCallback(() => {
-      setOpen((value) => !value);
-    }, []);
-
-    const contextValue = useMemo<StepContextValue>(
-      () => ({ status }),
-      [status],
-    );
-    const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
-
-    return (
-      <li
-        className={cn(
-          "rounded-xl border ring-1",
-          palette.rowClass,
-          palette.ringClass,
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        {...rest}
-      >
-        <StepContext.Provider value={contextValue}>
-          <StepRow
-            detailsId={detailsId}
-            hasDetails={hasDetails}
-            header={split.header}
-            icon={resolvedIcon}
-            iconClass={palette.iconClass}
-            labels={DEFAULT_LABELS}
-            onToggle={handleToggle}
-            open={open}
-          />
-          {hasDetails && open ? (
-            <div
-              className="border-t border-border/60 px-3 py-2 text-xs"
-              id={detailsId}
-            >
-              <div className="flex flex-col gap-2 pl-8">{split.body}</div>
-            </div>
-          ) : null}
-        </StepContext.Provider>
-      </li>
-    );
-  },
-);
+export const AgentStep = (
+  props: AgentStepProps & React.RefAttributes<HTMLLIElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultOpen = true,
+    icon,
+    ref,
+    status,
+    ...rest
+  } = props;
+  const split = useMemo(() => splitChildren(children), [children]);
+  const palette = STATUS_CLASSES[status];
+  const hasDetails = split.body.length > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  const detailsId = useId();
+
+  const handleToggle = useCallback(() => {
+    setOpen((value) => !value);
+  }, []);
+
+  const contextValue = useMemo<StepContextValue>(() => ({ status }), [status]);
+  const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
+
+  return (
+    <li
+      className={cn(
+        "rounded-xl border ring-1",
+        palette.rowClass,
+        palette.ringClass,
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      {...rest}
+    >
+      <StepContext.Provider value={contextValue}>
+        <StepRow
+          detailsId={detailsId}
+          hasDetails={hasDetails}
+          header={split.header}
+          icon={resolvedIcon}
+          iconClass={palette.iconClass}
+          labels={DEFAULT_LABELS}
+          onToggle={handleToggle}
+          open={open}
+        />
+        {hasDetails && open ? (
+          <div
+            className="border-t border-border/60 px-3 py-2 text-xs"
+            id={detailsId}
+          >
+            <div className="flex flex-col gap-2 pl-8">{split.body}</div>
+          </div>
+        ) : null}
+      </StepContext.Provider>
+    </li>
+  );
+};
 AgentStep.displayName = "AgentStep";
 
 /**
@@ -390,10 +388,11 @@ export type AgentStepTitleProps = ComponentPropsWithoutRef<"p">;
  *
  * @public
  */
-export const AgentStepTitle = forwardRef<
-  HTMLParagraphElement,
-  AgentStepTitleProps
->(({ className, ...rest }, ref) => (
+export const AgentStepTitle = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepTitleProps & React.RefAttributes<HTMLParagraphElement>) => (
   <p
     className={cn(
       "text-sm font-medium leading-tight text-foreground",
@@ -402,7 +401,7 @@ export const AgentStepTitle = forwardRef<
     ref={ref}
     {...rest}
   />
-));
+);
 AgentStepTitle.displayName = "AgentStepTitle";
 
 /**
@@ -417,16 +416,17 @@ export type AgentStepDurationProps = ComponentPropsWithoutRef<"span">;
  *
  * @public
  */
-export const AgentStepDuration = forwardRef<
-  HTMLSpanElement,
-  AgentStepDurationProps
->(({ className, ...rest }, ref) => (
+export const AgentStepDuration = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepDurationProps & React.RefAttributes<HTMLSpanElement>) => (
   <span
     className={cn("font-mono text-xs text-muted-foreground", className)}
     ref={ref}
     {...rest}
   />
-));
+);
 AgentStepDuration.displayName = "AgentStepDuration";
 
 /**
@@ -446,10 +446,13 @@ export type AgentStepProgressProps = {
  *
  * @public
  */
-export const AgentStepProgress = forwardRef<
-  HTMLDivElement,
-  AgentStepProgressProps
->(({ className, label = "Step progress", value, ...rest }, ref) => {
+export const AgentStepProgress = ({
+  className,
+  label = "Step progress",
+  ref,
+  value,
+  ...rest
+}: AgentStepProgressProps & React.RefAttributes<HTMLDivElement>) => {
   const clamped = Math.max(0, Math.min(100, value));
   return (
     <div
@@ -468,7 +471,7 @@ export const AgentStepProgress = forwardRef<
       />
     </div>
   );
-});
+};
 AgentStepProgress.displayName = "AgentStepProgress";
 
 /**
@@ -484,14 +487,16 @@ export type AgentStepDetailProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const AgentStepDetail = forwardRef<HTMLDivElement, AgentStepDetailProps>(
-  ({ className, ...rest }, ref) => (
-    <div
-      className={cn("text-xs text-muted-foreground", className)}
-      ref={ref}
-      {...rest}
-    />
-  ),
+export const AgentStepDetail = ({
+  className,
+  ref,
+  ...rest
+}: AgentStepDetailProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("text-xs text-muted-foreground", className)}
+    ref={ref}
+    {...rest}
+  />
 );
 AgentStepDetail.displayName = "AgentStepDetail";
 
@@ -501,5 +506,5 @@ AgentStepDetail.displayName = "AgentStepDetail";
  * @public
  */
 export function useAgentStepStatus(): AgentStepStatus {
-  return useContext(StepContext).status;
+  return use(StepContext).status;
 }
diff --git a/packages/ui/src/components/ai-artifact/ai-artifact.tsx b/packages/ui/src/components/ai-artifact/ai-artifact.tsx
index c20608bf..1db40091 100644
--- a/packages/ui/src/components/ai-artifact/ai-artifact.tsx
+++ b/packages/ui/src/components/ai-artifact/ai-artifact.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useMemo,
   useState,
 } from "react";
@@ -114,7 +113,7 @@ const AIArtifactContext =
  * @public
  */
 export function useAIArtifact(): AIArtifactContextValue {
-  return useContext(AIArtifactContext);
+  return use(AIArtifactContext);
 }
 
 function pickExtension(type: AIArtifactType, language: string): string {
@@ -375,62 +374,63 @@ function useArtifactController(
   );
 }
 
-export const AIArtifact = forwardRef<HTMLElement, AIArtifactProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultFullscreen = false,
-      filename,
-      labels,
-      language = "",
-      onEdit,
-      subtitle,
-      title,
-      type = "code",
-      value = "",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const contextValue = useArtifactController({
-      defaultFullscreen,
-      filename,
-      labels: resolvedLabels,
-      language,
-      onEdit,
-      title,
-      type,
-      value,
-    });
-
-    return (
-      <AIArtifactContext.Provider value={contextValue}>
-        <section
-          aria-label={typeof title === "string" ? title : undefined}
-          className={cn(
-            "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-            className,
-          )}
-          data-fullscreen={contextValue.fullscreen ? "true" : "false"}
-          data-type={type}
-          ref={ref}
-          {...rest}
-        >
-          <ArtifactHeader
-            language={language}
-            subtitle={subtitle}
-            title={title}
-            type={type}
-          />
-          {children}
-        </section>
-      </AIArtifactContext.Provider>
-    );
-  },
-);
+export const AIArtifact = (
+  props: AIArtifactProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultFullscreen = false,
+    filename,
+    labels,
+    language = "",
+    onEdit,
+    ref,
+    subtitle,
+    title,
+    type = "code",
+    value = "",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const contextValue = useArtifactController({
+    defaultFullscreen,
+    filename,
+    labels: resolvedLabels,
+    language,
+    onEdit,
+    title,
+    type,
+    value,
+  });
+
+  return (
+    <AIArtifactContext.Provider value={contextValue}>
+      <section
+        aria-label={typeof title === "string" ? title : undefined}
+        className={cn(
+          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+          className,
+        )}
+        data-fullscreen={contextValue.fullscreen ? "true" : "false"}
+        data-type={type}
+        ref={ref}
+        {...rest}
+      >
+        <ArtifactHeader
+          language={language}
+          subtitle={subtitle}
+          title={title}
+          type={type}
+        />
+        {children}
+      </section>
+    </AIArtifactContext.Provider>
+  );
+};
 AIArtifact.displayName = "AIArtifact";
 
 /**
@@ -438,10 +438,11 @@ AIArtifact.displayName = "AIArtifact";
  *
  * @public
  */
-export const AIArtifactToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => (
+export const AIArtifactToolbar = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-1.5 border-b border-border pb-2",
@@ -451,7 +452,7 @@ export const AIArtifactToolbar = forwardRef<
     role="toolbar"
     {...rest}
   />
-));
+);
 AIArtifactToolbar.displayName = "AIArtifactToolbar";
 
 type ToolbarButtonProps = Omit<
@@ -465,10 +466,12 @@ type ToolbarButtonProps = Omit<
  *
  * @public
  */
-export const AIArtifactCopyButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactCopyButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { copied, copy, labels } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -496,7 +499,7 @@ export const AIArtifactCopyButton = forwardRef<
       )}
     </Button>
   );
-});
+};
 AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
 
 /**
@@ -505,10 +508,12 @@ AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
  *
  * @public
  */
-export const AIArtifactEditButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactEditButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { hasOnEdit, labels, onEdit } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -533,7 +538,7 @@ export const AIArtifactEditButton = forwardRef<
       <Pencil aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AIArtifactEditButton.displayName = "AIArtifactEditButton";
 
 /**
@@ -542,10 +547,12 @@ AIArtifactEditButton.displayName = "AIArtifactEditButton";
  *
  * @public
  */
-export const AIArtifactDownloadButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactDownloadButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { download, labels } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -569,7 +576,7 @@ export const AIArtifactDownloadButton = forwardRef<
       <Download aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
 
 /**
@@ -579,10 +586,12 @@ AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
  *
  * @public
  */
-export const AIArtifactFullscreenButton = forwardRef<
-  HTMLButtonElement,
-  ToolbarButtonProps
->(({ className, onClick, ...rest }, ref) => {
+export const AIArtifactFullscreenButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -611,7 +620,7 @@ export const AIArtifactFullscreenButton = forwardRef<
       )}
     </Button>
   );
-});
+};
 AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
 
 /**
@@ -620,10 +629,11 @@ AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
  *
  * @public
  */
-export const AIArtifactContent = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => (
+export const AIArtifactContent = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "min-h-[6rem] overflow-auto rounded-lg border border-border bg-muted/20 p-3 text-sm text-foreground",
@@ -632,7 +642,7 @@ export const AIArtifactContent = forwardRef<
     ref={ref}
     {...rest}
   />
-));
+);
 AIArtifactContent.displayName = "AIArtifactContent";
 
 /**
@@ -640,10 +650,12 @@ AIArtifactContent.displayName = "AIArtifactContent";
  *
  * @public
  */
-export const AIArtifactVersions = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"nav">
->(({ children, className, ...rest }, ref) => {
+export const AIArtifactVersions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"nav"> & React.RefAttributes<HTMLElement>) => {
   const { labels } = useAIArtifact();
   return (
     <nav
@@ -658,7 +670,7 @@ export const AIArtifactVersions = forwardRef<
       {children}
     </nav>
   );
-});
+};
 AIArtifactVersions.displayName = "AIArtifactVersions";
 
 /**
@@ -679,10 +691,13 @@ export type AIArtifactVersionProps = {
  *
  * @public
  */
-export const AIArtifactVersion = forwardRef<
-  HTMLButtonElement,
-  AIArtifactVersionProps
->(({ active = false, className, label, ...rest }, ref) => (
+export const AIArtifactVersion = ({
+  active = false,
+  className,
+  label,
+  ref,
+  ...rest
+}: AIArtifactVersionProps & React.RefAttributes<HTMLButtonElement>) => (
   <button
     aria-current={active ? "true" : undefined}
     className={cn(
@@ -698,5 +713,5 @@ export const AIArtifactVersion = forwardRef<
   >
     {label}
   </button>
-));
+);
 AIArtifactVersion.displayName = "AIArtifactVersion";
diff --git a/packages/ui/src/components/ai-chat-input/ai-chat-input.tsx b/packages/ui/src/components/ai-chat-input/ai-chat-input.tsx
index ba9c37e6..33658f7b 100644
--- a/packages/ui/src/components/ai-chat-input/ai-chat-input.tsx
+++ b/packages/ui/src/components/ai-chat-input/ai-chat-input.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 
@@ -79,68 +77,61 @@ export type AIChatInputProps = React.ComponentPropsWithoutRef<"form"> & {
   value?: string;
 };
 
-const AIChatInput = forwardRef<HTMLFormElement, AIChatInputProps>(
-  (
-    {
-      className,
-      disabled = false,
-      helperText,
-      isSubmitting = false,
-      onSubmit,
-      onValueChange,
-      status,
-      submitLabel = "Send",
-      textareaProps,
-      toolbar,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const currentValue = value ?? "";
-    const maxLength = textareaProps?.maxLength;
-    const isSubmitDisabled =
-      disabled || isSubmitting || currentValue.trim().length === 0;
+const AIChatInput = ({
+  className,
+  disabled = false,
+  helperText,
+  isSubmitting = false,
+  onSubmit,
+  onValueChange,
+  ref,
+  status,
+  submitLabel = "Send",
+  textareaProps,
+  toolbar,
+  value,
+  ...props
+}: AIChatInputProps & React.RefAttributes<HTMLFormElement>) => {
+  const currentValue = value ?? "";
+  const maxLength = textareaProps?.maxLength;
+  const isSubmitDisabled =
+    disabled || isSubmitting || currentValue.trim().length === 0;
 
-    return (
-      <form
-        className={cn(formShellVariants(), "w-full p-3", className)}
-        onSubmit={onSubmit}
-        ref={ref}
-        {...props}
-      >
-        <div className="space-y-3">
-          <Textarea
-            className="min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-            disabled={disabled}
-            onChange={(event) => {
-              textareaProps?.onChange?.(event);
-              onValueChange?.(event.target.value);
-            }}
-            placeholder="Ask a follow-up question, paste context, or describe what you need..."
-            value={value}
-            {...textareaProps}
-          />
+  return (
+    <form
+      className={cn(formShellVariants(), "w-full p-3", className)}
+      onSubmit={onSubmit}
+      ref={ref}
+      {...props}
+    >
+      <div className="space-y-3">
+        <Textarea
+          className="min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          disabled={disabled}
+          onChange={(event) => {
+            textareaProps?.onChange?.(event);
+            onValueChange?.(event.target.value);
+          }}
+          placeholder="Ask a follow-up question, paste context, or describe what you need..."
+          value={value}
+          {...textareaProps}
+        />
 
-          {toolbar ? (
-            <div className="flex flex-wrap gap-2">{toolbar}</div>
-          ) : null}
+        {toolbar ? <div className="flex flex-wrap gap-2">{toolbar}</div> : null}
 
-          <AIChatInputFooter
-            currentLength={currentValue.length}
-            helperText={helperText}
-            isSubmitDisabled={isSubmitDisabled}
-            isSubmitting={isSubmitting}
-            maxLength={maxLength}
-            status={status}
-            submitLabel={submitLabel}
-          />
-        </div>
-      </form>
-    );
-  },
-);
+        <AIChatInputFooter
+          currentLength={currentValue.length}
+          helperText={helperText}
+          isSubmitDisabled={isSubmitDisabled}
+          isSubmitting={isSubmitting}
+          maxLength={maxLength}
+          status={status}
+          submitLabel={submitLabel}
+        />
+      </div>
+    </form>
+  );
+};
 
 AIChatInput.displayName = "AIChatInput";
-
 export { AIChatInput };
diff --git a/packages/ui/src/components/ai-message-bubble/ai-message-bubble.tsx b/packages/ui/src/components/ai-message-bubble/ai-message-bubble.tsx
index e6bfc5ec..1e5986dc 100644
--- a/packages/ui/src/components/ai-message-bubble/ai-message-bubble.tsx
+++ b/packages/ui/src/components/ai-message-bubble/ai-message-bubble.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
@@ -69,73 +67,66 @@ export type AIMessageBubbleProps = React.ComponentPropsWithoutRef<"div"> &
     timestamp?: string;
   };
 
-const AIMessageBubble = forwardRef<HTMLDivElement, AIMessageBubbleProps>(
-  (
-    {
-      author,
-      children,
-      className,
-      messageRole = "assistant",
-      status,
-      timestamp,
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedMessageRole = messageRole ?? "assistant";
-    const isUser = resolvedMessageRole === "user";
-    const fallbackLabel = (author ?? resolvedMessageRole)
-      .charAt(0)
-      .toUpperCase();
+const AIMessageBubble = ({
+  author,
+  children,
+  className,
+  messageRole = "assistant",
+  ref,
+  status,
+  timestamp,
+  ...props
+}: AIMessageBubbleProps & React.RefAttributes<HTMLDivElement>) => {
+  const resolvedMessageRole = messageRole ?? "assistant";
+  const isUser = resolvedMessageRole === "user";
+  const fallbackLabel = (author ?? resolvedMessageRole).charAt(0).toUpperCase();
 
-    return (
+  return (
+    <div
+      className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
+    >
       <div
-        className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
+        className={cn(
+          "flex w-full max-w-3xl gap-3",
+          isUser ? "flex-row-reverse text-right" : "flex-row",
+        )}
       >
+        <Avatar className="mt-0.5 size-8 border border-border/70">
+          <AvatarFallback className="bg-muted text-[11px] font-medium uppercase text-muted-foreground">
+            {fallbackLabel}
+          </AvatarFallback>
+        </Avatar>
+
         <div
           className={cn(
-            "flex w-full max-w-3xl gap-3",
-            isUser ? "flex-row-reverse text-right" : "flex-row",
+            "min-w-0 space-y-2",
+            isUser ? "items-end" : "items-start",
           )}
         >
-          <Avatar className="mt-0.5 size-8 border border-border/70">
-            <AvatarFallback className="bg-muted text-[11px] font-medium uppercase text-muted-foreground">
-              {fallbackLabel}
-            </AvatarFallback>
-          </Avatar>
+          <AIMessageMeta
+            author={author}
+            isUser={isUser}
+            status={status}
+            timestamp={timestamp}
+          />
 
           <div
             className={cn(
-              "min-w-0 space-y-2",
-              isUser ? "items-end" : "items-start",
+              bubbleVariants({ messageRole: resolvedMessageRole }),
+              className,
             )}
+            ref={ref}
+            {...props}
           >
-            <AIMessageMeta
-              author={author}
-              isUser={isUser}
-              status={status}
-              timestamp={timestamp}
-            />
-
-            <div
-              className={cn(
-                bubbleVariants({ messageRole: resolvedMessageRole }),
-                className,
-              )}
-              ref={ref}
-              {...props}
-            >
-              <div className="text-sm leading-6 whitespace-pre-wrap">
-                {children}
-              </div>
+            <div className="text-sm leading-6 whitespace-pre-wrap">
+              {children}
             </div>
           </div>
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 AIMessageBubble.displayName = "AIMessageBubble";
-
 export { AIMessageBubble };
diff --git a/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx b/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
index 6ea54ecf..100eb0e3 100644
--- a/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
+++ b/packages/ui/src/components/ai-sidebar/ai-sidebar.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useState,
@@ -83,7 +82,7 @@ const AISidebarContext = createContext<AISidebarContextValue>(DEFAULT_CONTEXT);
  * @public
  */
 export function useAISidebar(): AISidebarContextValue {
-  return useContext(AISidebarContext);
+  return use(AISidebarContext);
 }
 
 /**
@@ -235,37 +234,37 @@ function useEscapeToClose(
  *
  * @public
  */
-export const AISidebar = forwardRef<HTMLElement, AISidebarProps>(
-  (props, ref) => {
-    const { children, className, closeOnEscape = true, ...rest } = props;
-    const { close, labels, openState, position, width } = useAISidebar();
-    useEscapeToClose(closeOnEscape, openState, close);
+export const AISidebar = (
+  props: AISidebarProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { children, className, closeOnEscape = true, ref, ...rest } = props;
+  const { close, labels, openState, position, width } = useAISidebar();
+  useEscapeToClose(closeOnEscape, openState, close);
 
-    return (
-      <aside
-        aria-hidden={!openState}
-        aria-label={labels.defaultTitle}
-        className={cn(
-          "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
-          position === "right" ? "right-0 border-l" : "left-0 border-r",
-          openState
-            ? "translate-x-0"
-            : position === "right"
-              ? "translate-x-full"
-              : "-translate-x-full",
-          "max-w-full",
-          className,
-        )}
-        data-state={openState ? "open" : "closed"}
-        ref={ref}
-        style={{ width: `${width.toString()}px` }}
-        {...rest}
-      >
-        {children}
-      </aside>
-    );
-  },
-);
+  return (
+    <aside
+      aria-hidden={!openState}
+      aria-label={labels.defaultTitle}
+      className={cn(
+        "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
+        position === "right" ? "right-0 border-l" : "left-0 border-r",
+        openState
+          ? "translate-x-0"
+          : position === "right"
+            ? "translate-x-full"
+            : "-translate-x-full",
+        "max-w-full",
+        className,
+      )}
+      data-state={openState ? "open" : "closed"}
+      ref={ref}
+      style={{ width: `${width.toString()}px` }}
+      {...rest}
+    >
+      {children}
+    </aside>
+  );
+};
 AISidebar.displayName = "AISidebar";
 
 /**
@@ -274,10 +273,12 @@ AISidebar.displayName = "AISidebar";
  *
  * @public
  */
-export const AISidebarHeader = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"header">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarHeader = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"header"> & React.RefAttributes<HTMLElement>) => (
   <header
     className={cn(
       "flex items-center gap-2 border-b border-border px-4 py-3",
@@ -288,7 +289,7 @@ export const AISidebarHeader = forwardRef<
   >
     {children}
   </header>
-));
+);
 AISidebarHeader.displayName = "AISidebarHeader";
 
 /**
@@ -297,10 +298,13 @@ AISidebarHeader.displayName = "AISidebarHeader";
  *
  * @public
  */
-export const AISidebarTitle = forwardRef<
-  HTMLHeadingElement,
-  ComponentPropsWithoutRef<"h2">
->(({ children, className, ...rest }, ref) => {
+export const AISidebarTitle = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"h2"> &
+  React.RefAttributes<HTMLHeadingElement>) => {
   const { labels } = useAISidebar();
   return (
     <h2
@@ -315,7 +319,7 @@ export const AISidebarTitle = forwardRef<
       {children ?? labels.defaultTitle}
     </h2>
   );
-});
+};
 AISidebarTitle.displayName = "AISidebarTitle";
 
 /**
@@ -323,10 +327,13 @@ AISidebarTitle.displayName = "AISidebarTitle";
  *
  * @public
  */
-export const AISidebarClose = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, onClick, ...rest }, ref) => {
+export const AISidebarClose = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { close, labels } = useAISidebar();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -350,7 +357,7 @@ export const AISidebarClose = forwardRef<
       <X aria-hidden="true" className="size-4" />
     </Button>
   );
-});
+};
 AISidebarClose.displayName = "AISidebarClose";
 
 /**
@@ -358,10 +365,12 @@ AISidebarClose.displayName = "AISidebarClose";
  *
  * @public
  */
-export const AISidebarContent = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarContent = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex flex-1 flex-col gap-2 overflow-y-auto p-4", className)}
     ref={ref}
@@ -369,7 +378,7 @@ export const AISidebarContent = forwardRef<
   >
     {children}
   </div>
-));
+);
 AISidebarContent.displayName = "AISidebarContent";
 
 /**
@@ -377,10 +386,12 @@ AISidebarContent.displayName = "AISidebarContent";
  *
  * @public
  */
-export const AISidebarFooter = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"footer">
->(({ children, className, ...rest }, ref) => (
+export const AISidebarFooter = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"footer"> & React.RefAttributes<HTMLElement>) => (
   <footer
     className={cn("border-t border-border bg-background px-4 py-3", className)}
     ref={ref}
@@ -388,7 +399,7 @@ export const AISidebarFooter = forwardRef<
   >
     {children}
   </footer>
-));
+);
 AISidebarFooter.displayName = "AISidebarFooter";
 
 /**
@@ -408,10 +419,13 @@ export type AISidebarTriggerProps = Omit<
  *
  * @public
  */
-export const AISidebarTrigger = forwardRef<
-  HTMLButtonElement,
-  AISidebarTriggerProps
->(({ children, className, onClick, ...rest }, ref) => {
+export const AISidebarTrigger = ({
+  children,
+  className,
+  onClick,
+  ref,
+  ...rest
+}: AISidebarTriggerProps & React.RefAttributes<HTMLButtonElement>) => {
   const { labels, openState, toggle } = useAISidebar();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -437,5 +451,5 @@ export const AISidebarTrigger = forwardRef<
       {children ?? <MessageSquarePlus aria-hidden="true" className="size-4" />}
     </Button>
   );
-});
+};
 AISidebarTrigger.displayName = "AISidebarTrigger";
diff --git a/packages/ui/src/components/ai-source-citation/ai-source-citation.tsx b/packages/ui/src/components/ai-source-citation/ai-source-citation.tsx
index c15bd988..84f8474b 100644
--- a/packages/ui/src/components/ai-source-citation/ai-source-citation.tsx
+++ b/packages/ui/src/components/ai-source-citation/ai-source-citation.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { ExternalLink, Quote } from "lucide-react";
 
 import { cn } from "../../lib/utils";
@@ -13,48 +11,51 @@ export type AISourceCitationProps = React.ComponentPropsWithoutRef<"a"> & {
   title: string;
 };
 
-const AISourceCitation = forwardRef<HTMLAnchorElement, AISourceCitationProps>(
-  (
-    { className, href, snippet, source, target = "_blank", title, ...props },
-    ref,
-  ) => {
-    return (
-      <a
-        className={cn(
-          "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className,
-        )}
-        href={href}
-        ref={ref}
-        rel={target === "_blank" ? "noreferrer" : undefined}
-        target={target}
-        {...props}
-      >
-        <div className="flex items-start gap-2">
-          <Quote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-          <div className="min-w-0 flex-1">
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <p className="truncate text-sm font-medium text-foreground">
-                  {title}
-                </p>
-                <p className="text-xs text-muted-foreground">{source}</p>
-              </div>
-              <ExternalLink className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+const AISourceCitation = ({
+  className,
+  href,
+  ref,
+  snippet,
+  source,
+  target = "_blank",
+  title,
+  ...props
+}: AISourceCitationProps & React.RefAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      className={cn(
+        "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      href={href}
+      ref={ref}
+      rel={target === "_blank" ? "noreferrer" : undefined}
+      target={target}
+      {...props}
+    >
+      <div className="flex items-start gap-2">
+        <Quote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium text-foreground">
+                {title}
+              </p>
+              <p className="text-xs text-muted-foreground">{source}</p>
             </div>
+            <ExternalLink className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
           </div>
         </div>
+      </div>
 
-        {snippet ? (
-          <p className="line-clamp-3 text-sm leading-6 text-muted-foreground">
-            {snippet}
-          </p>
-        ) : null}
-      </a>
-    );
-  },
-);
+      {snippet ? (
+        <p className="line-clamp-3 text-sm leading-6 text-muted-foreground">
+          {snippet}
+        </p>
+      ) : null}
+    </a>
+  );
+};
 
 AISourceCitation.displayName = "AISourceCitation";
-
 export { AISourceCitation };
diff --git a/packages/ui/src/components/ai-streaming-text/ai-streaming-text.tsx b/packages/ui/src/components/ai-streaming-text/ai-streaming-text.tsx
index 062f6bfa..76f33166 100644
--- a/packages/ui/src/components/ai-streaming-text/ai-streaming-text.tsx
+++ b/packages/ui/src/components/ai-streaming-text/ai-streaming-text.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
 
 export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
@@ -13,42 +11,37 @@ export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
   text: string;
 };
 
-const AIStreamingText = forwardRef<HTMLDivElement, AIStreamingTextProps>(
-  (
-    {
-      className,
-      cursor = "▍",
-      isStreaming = false,
-      showCursor = true,
-      text,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        aria-live={isStreaming ? "polite" : undefined}
-        className={cn(
-          "text-sm leading-6 text-foreground whitespace-pre-wrap",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        {text}
-        {isStreaming && showCursor ? (
-          <span
-            aria-hidden="true"
-            className="ml-0.5 inline-block animate-pulse text-muted-foreground"
-          >
-            {cursor}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+const AIStreamingText = ({
+  className,
+  cursor = "▍",
+  isStreaming = false,
+  ref,
+  showCursor = true,
+  text,
+  ...props
+}: AIStreamingTextProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      aria-live={isStreaming ? "polite" : undefined}
+      className={cn(
+        "text-sm leading-6 text-foreground whitespace-pre-wrap",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {text}
+      {isStreaming && showCursor ? (
+        <span
+          aria-hidden="true"
+          className="ml-0.5 inline-block animate-pulse text-muted-foreground"
+        >
+          {cursor}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 AIStreamingText.displayName = "AIStreamingText";
-
 export { AIStreamingText };
diff --git a/packages/ui/src/components/ai-tool-call-display/ai-tool-call-display.tsx b/packages/ui/src/components/ai-tool-call-display/ai-tool-call-display.tsx
index 79174c3e..2bb8bf85 100644
--- a/packages/ui/src/components/ai-tool-call-display/ai-tool-call-display.tsx
+++ b/packages/ui/src/components/ai-tool-call-display/ai-tool-call-display.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva } from "class-variance-authority";
 import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
 
@@ -47,82 +45,77 @@ const statusIconMap: Record<AIToolCallStatus, React.ReactNode> = {
   running: <Wrench className="size-4 animate-pulse" />,
 };
 
-const AIToolCallDisplay = forwardRef<HTMLDivElement, AIToolCallDisplayProps>(
-  (
-    {
-      className,
-      description,
-      duration,
-      input,
-      output,
-      status = "queued",
-      toolName,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="min-w-0 space-y-1">
-            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-              {statusIconMap[status]}
-              <span>{toolName}</span>
-            </div>
-            {description ? (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            ) : null}
+const AIToolCallDisplay = ({
+  className,
+  description,
+  duration,
+  input,
+  output,
+  ref,
+  status = "queued",
+  toolName,
+  ...props
+}: AIToolCallDisplayProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            {statusIconMap[status]}
+            <span>{toolName}</span>
           </div>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
 
-          <div className="flex items-center gap-2">
-            {duration ? (
-              <span className="text-xs text-muted-foreground">{duration}</span>
-            ) : null}
-            <Badge className={statusVariants({ status })} variant="secondary">
-              {status}
-            </Badge>
-          </div>
+        <div className="flex items-center gap-2">
+          {duration ? (
+            <span className="text-xs text-muted-foreground">{duration}</span>
+          ) : null}
+          <Badge className={statusVariants({ status })} variant="secondary">
+            {status}
+          </Badge>
         </div>
+      </div>
 
-        {input ? (
-          <details
-            className="mt-4 rounded-xl border border-border/60 bg-muted/20 p-3"
-            open={status !== "complete"}
-          >
-            <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Tool input
-            </summary>
-            <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
-              {input}
-            </pre>
-          </details>
-        ) : null}
+      {input ? (
+        <details
+          className="mt-4 rounded-xl border border-border/60 bg-muted/20 p-3"
+          open={status !== "complete"}
+        >
+          <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Tool input
+          </summary>
+          <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
+            {input}
+          </pre>
+        </details>
+      ) : null}
 
-        {output ? (
-          <details
-            className="mt-3 rounded-xl border border-border/60 bg-muted/20 p-3"
-            open={status !== "complete"}
-          >
-            <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Tool output
-            </summary>
-            <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
-              {output}
-            </pre>
-          </details>
-        ) : null}
-      </div>
-    );
-  },
-);
+      {output ? (
+        <details
+          className="mt-3 rounded-xl border border-border/60 bg-muted/20 p-3"
+          open={status !== "complete"}
+        >
+          <summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Tool output
+          </summary>
+          <pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
+            {output}
+          </pre>
+        </details>
+      ) : null}
+    </div>
+  );
+};
 
 AIToolCallDisplay.displayName = "AIToolCallDisplay";
-
 export { AIToolCallDisplay };
diff --git a/packages/ui/src/components/alert-dialog/alert-dialog.tsx b/packages/ui/src/components/alert-dialog/alert-dialog.tsx
index 938e9e2c..94b6b51f 100644
--- a/packages/ui/src/components/alert-dialog/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog/alert-dialog.tsx
@@ -1,22 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../button/button";
-
 const AlertDialog = AlertDialogPrimitive.Root;
-
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const AlertDialogOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Overlay>
+  >) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -25,13 +23,18 @@ const AlertDialogOverlay = forwardRef<
     {...props}
     ref={ref}
   />
-));
+);
+
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+const AlertDialogContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Content>
+  >) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
@@ -43,7 +46,8 @@ const AlertDialogContent = forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-));
+);
+
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -58,6 +62,7 @@ const AlertDialogHeader = ({
     {...props}
   />
 );
+
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
@@ -72,49 +77,69 @@ const AlertDialogFooter = ({
     {...props}
   />
 );
+
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
-const AlertDialogTitle = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+const AlertDialogTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Title>
+  >) => (
   <AlertDialogPrimitive.Title
     className={cn("text-lg font-semibold", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+const AlertDialogDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Description>
+  >) => (
   <AlertDialogPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+const AlertDialogAction = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Action>
+  >) => (
   <AlertDialogPrimitive.Action
     className={cn(buttonVariants(), className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
+const AlertDialogCancel = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
+  React.RefAttributes<
+    React.ComponentRef<typeof AlertDialogPrimitive.Cancel>
+  >) => (
   <AlertDialogPrimitive.Cancel
     className={cn(
       buttonVariants({ variant: "outline" }),
@@ -124,7 +149,8 @@ const AlertDialogCancel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
diff --git a/packages/ui/src/components/alert-pulse/alert-pulse.tsx b/packages/ui/src/components/alert-pulse/alert-pulse.tsx
index 1bddb5e2..edcd7e96 100644
--- a/packages/ui/src/components/alert-pulse/alert-pulse.tsx
+++ b/packages/ui/src/components/alert-pulse/alert-pulse.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -82,65 +82,66 @@ const safeRadius = (value: number): number => (value < 6 ? 6 : value);
  *
  * @public
  */
-export const AlertPulse = forwardRef<SVGSVGElement, AlertPulseProps>(
-  (props, ref) => {
-    const {
-      className,
-      cx,
-      cy,
-      labels,
-      radius = 36,
-      reducedMotion = false,
-      severity = "warn",
-      ...rest
-    } = props;
-    const r = safeRadius(radius);
-    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
-    const size = r * 2 + 24;
-    return (
-      <svg
-        aria-label={ariaLabel}
+export const AlertPulse = (
+  props: AlertPulseProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    className,
+    cx,
+    cy,
+    labels,
+    radius = 36,
+    reducedMotion = false,
+    ref,
+    severity = "warn",
+    ...rest
+  } = props;
+  const r = safeRadius(radius);
+  const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+  const size = r * 2 + 24;
+  return (
+    <svg
+      aria-label={ariaLabel}
+      className={cn(
+        "pointer-events-none absolute z-20 overflow-visible",
+        className,
+      )}
+      data-alert-pulse
+      data-alert-severity={severity}
+      height={size}
+      ref={ref}
+      role="img"
+      style={{
+        left: cx - size / 2,
+        top: cy - size / 2,
+      }}
+      width={size}
+      {...rest}
+    >
+      <circle
+        className={cn("origin-center", SEVERITY_STROKE[severity])}
+        cx={size / 2}
+        cy={size / 2}
+        fill="none"
+        r={r}
+        strokeOpacity={0.7}
+        strokeWidth={2}
+      />
+      <circle
         className={cn(
-          "pointer-events-none absolute z-20 overflow-visible",
-          className,
+          "origin-center",
+          SEVERITY_STROKE[severity],
+          SEVERITY_FILL[severity],
+          reducedMotion ? null : "animate-ping",
         )}
-        data-alert-pulse
-        data-alert-severity={severity}
-        height={size}
-        ref={ref}
-        role="img"
-        style={{
-          left: cx - size / 2,
-          top: cy - size / 2,
-        }}
-        width={size}
-        {...rest}
-      >
-        <circle
-          className={cn("origin-center", SEVERITY_STROKE[severity])}
-          cx={size / 2}
-          cy={size / 2}
-          fill="none"
-          r={r}
-          strokeOpacity={0.7}
-          strokeWidth={2}
-        />
-        <circle
-          className={cn(
-            "origin-center",
-            SEVERITY_STROKE[severity],
-            SEVERITY_FILL[severity],
-            reducedMotion ? null : "animate-ping",
-          )}
-          cx={size / 2}
-          cy={size / 2}
-          data-alert-pulse-ring
-          r={r}
-          strokeOpacity={0.4}
-          strokeWidth={2}
-        />
-      </svg>
-    );
-  },
-);
+        cx={size / 2}
+        cy={size / 2}
+        data-alert-pulse-ring
+        r={r}
+        strokeOpacity={0.4}
+        strokeWidth={2}
+      />
+    </svg>
+  );
+};
 AlertPulse.displayName = "AlertPulse";
diff --git a/packages/ui/src/components/alert/alert.tsx b/packages/ui/src/components/alert/alert.tsx
index 7beb7dd3..fcec9db8 100644
--- a/packages/ui/src/components/alert/alert.tsx
+++ b/packages/ui/src/components/alert/alert.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
@@ -20,23 +18,31 @@ const alertVariants = cva(
   },
 );
 
-const Alert = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+const Alert = ({
+  className,
+  ref,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(alertVariants({ variant }), className)}
     ref={ref}
     role="alert"
     {...props}
   />
-));
+);
+
 Alert.displayName = "Alert";
 
-const AlertTitle = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ children, className, ...props }, ref) => (
+const AlertTitle = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement> &
+  React.RefAttributes<HTMLParagraphElement>) => (
   <h5
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     ref={ref}
@@ -44,19 +50,22 @@ const AlertTitle = forwardRef<
   >
     {children}
   </h5>
-));
+);
+
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const AlertDescription = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> &
+  React.RefAttributes<HTMLParagraphElement>) => (
   <div
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     ref={ref}
     {...props}
   />
-));
-AlertDescription.displayName = "AlertDescription";
+);
 
+AlertDescription.displayName = "AlertDescription";
 export { Alert, AlertDescription, AlertTitle, alertVariants };
diff --git a/packages/ui/src/components/anchor-port/anchor-port.tsx b/packages/ui/src/components/anchor-port/anchor-port.tsx
index 8f911838..19e2b9c9 100644
--- a/packages/ui/src/components/anchor-port/anchor-port.tsx
+++ b/packages/ui/src/components/anchor-port/anchor-port.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
 
 export type AnchorPortProps = React.ComponentPropsWithoutRef<"span"> & {
@@ -29,38 +27,33 @@ const sideClasses: Record<NonNullable<AnchorPortProps["side"]>, string> = {
   top: "self-start",
 };
 
-const AnchorPort = forwardRef<HTMLSpanElement, AnchorPortProps>(
-  (
-    {
+const AnchorPort = ({
+  className,
+  ref,
+  side = "right",
+  state = "idle",
+  tone = "bidirectional",
+  ...props
+}: AnchorPortProps & React.RefAttributes<HTMLSpanElement>) => (
+  <span
+    aria-label={props["aria-label"] ?? `${tone} ${side} port ${state}`}
+    className={cn(
+      "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+      toneClasses[tone],
+      stateClasses[state],
+      sideClasses[side],
       className,
-      side = "right",
-      state = "idle",
-      tone = "bidirectional",
-      ...props
-    },
-    ref,
-  ) => (
-    <span
-      aria-label={props["aria-label"] ?? `${tone} ${side} port ${state}`}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
-        toneClasses[tone],
-        stateClasses[state],
-        sideClasses[side],
-        className,
-      )}
-      data-side={side}
-      data-state={state}
-      data-tone={tone}
-      ref={ref}
-      role="img"
-      {...props}
-    >
-      <span className="size-2.5 rounded-full bg-current" />
-    </span>
-  ),
+    )}
+    data-side={side}
+    data-state={state}
+    data-tone={tone}
+    ref={ref}
+    role="img"
+    {...props}
+  >
+    <span className="size-2.5 rounded-full bg-current" />
+  </span>
 );
 
 AnchorPort.displayName = "AnchorPort";
-
 export { AnchorPort };
diff --git a/packages/ui/src/components/animated-text/animated-text.tsx b/packages/ui/src/components/animated-text/animated-text.tsx
index 07219627..7690e596 100644
--- a/packages/ui/src/components/animated-text/animated-text.tsx
+++ b/packages/ui/src/components/animated-text/animated-text.tsx
@@ -387,80 +387,73 @@ function AnimatedTextCursor({
   );
 }
 
-export const AnimatedText = React.forwardRef<
-  HTMLParagraphElement,
-  AnimatedTextProps
->(
-  (
-    {
-      className,
-      cursor = true,
-      cursorChar = "█",
-      direction = "start",
-      duration = 600,
-      randomCharacters,
-      randomCharactersPreset = "matrix",
-      randomness = 0,
-      splitBy = "word",
-      stagger = 70,
-      text,
-      variant = "terminal",
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedRandomCharacters = getResolvedRandomCharacters(
-      randomCharacters,
-      randomCharactersPreset,
-    );
-    const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
-    const segments = React.useMemo(
-      () => getSegments(text, resolvedSplitBy),
-      [resolvedSplitBy, text],
-    );
-    const segmentFrames = useAnimatedTextFrames({
-      direction,
-      randomCharacters: resolvedRandomCharacters,
-      randomness,
-      segments,
-      stagger,
-      variant,
-    });
-    const showCursor =
-      cursor &&
-      variant !== "reveal" &&
-      segmentFrames.some((frame) => !frame.isRevealed);
-    const cursorToneClass = getCursorToneClass(variant);
-
-    return (
-      <p
-        aria-label={text}
-        className={cn(getContainerClasses(variant), className)}
-        ref={ref}
-        style={{
-          ["--vllnt-animated-text-duration" as string]: `${duration}ms`,
-        }}
-        {...props}
-      >
-        {segmentFrames.map((segmentFrame) => (
-          <span
-            aria-hidden="true"
-            className={getSegmentClasses(variant, segmentFrame.isRevealed)}
-            key={segmentFrame.key}
-            style={segmentFrame.style}
-          >
-            {segmentFrame.content}
-          </span>
-        ))}
-        {showCursor ? (
-          <AnimatedTextCursor
-            cursorChar={cursorChar}
-            cursorToneClass={cursorToneClass}
-          />
-        ) : null}
-      </p>
-    );
-  },
-);
+export const AnimatedText = ({
+  className,
+  cursor = true,
+  cursorChar = "█",
+  direction = "start",
+  duration = 600,
+  randomCharacters,
+  randomCharactersPreset = "matrix",
+  randomness = 0,
+  ref,
+  splitBy = "word",
+  stagger = 70,
+  text,
+  variant = "terminal",
+  ...props
+}: AnimatedTextProps & React.RefAttributes<HTMLParagraphElement>) => {
+  const resolvedRandomCharacters = getResolvedRandomCharacters(
+    randomCharacters,
+    randomCharactersPreset,
+  );
+  const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
+  const segments = React.useMemo(
+    () => getSegments(text, resolvedSplitBy),
+    [resolvedSplitBy, text],
+  );
+  const segmentFrames = useAnimatedTextFrames({
+    direction,
+    randomCharacters: resolvedRandomCharacters,
+    randomness,
+    segments,
+    stagger,
+    variant,
+  });
+  const showCursor =
+    cursor &&
+    variant !== "reveal" &&
+    segmentFrames.some((frame) => !frame.isRevealed);
+  const cursorToneClass = getCursorToneClass(variant);
+
+  return (
+    <p
+      aria-label={text}
+      className={cn(getContainerClasses(variant), className)}
+      ref={ref}
+      style={{
+        ["--vllnt-animated-text-duration" as string]: `${duration}ms`,
+      }}
+      {...props}
+    >
+      {segmentFrames.map((segmentFrame) => (
+        <span
+          aria-hidden="true"
+          className={getSegmentClasses(variant, segmentFrame.isRevealed)}
+          key={segmentFrame.key}
+          style={segmentFrame.style}
+        >
+          {segmentFrame.content}
+        </span>
+      ))}
+      {showCursor ? (
+        <AnimatedTextCursor
+          cursorChar={cursorChar}
+          cursorToneClass={cursorToneClass}
+        />
+      ) : null}
+    </p>
+  );
+};
 
 AnimatedText.displayName = "AnimatedText";
diff --git a/packages/ui/src/components/auto-reload/auto-reload.tsx b/packages/ui/src/components/auto-reload/auto-reload.tsx
index 80045ce8..3e03e2c2 100644
--- a/packages/ui/src/components/auto-reload/auto-reload.tsx
+++ b/packages/ui/src/components/auto-reload/auto-reload.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -394,20 +393,23 @@ type DisabledBannerProps = {
   message: ReactNode;
 } & ComponentPropsWithoutRef<"div">;
 
-const DisabledBanner = forwardRef<HTMLDivElement, DisabledBannerProps>(
-  ({ className, message, ...rest }, ref) => (
-    <div
-      aria-disabled="true"
-      className={cn(
-        "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
-        className,
-      )}
-      ref={ref}
-      {...rest}
-    >
-      {message}
-    </div>
-  ),
+const DisabledBanner = ({
+  className,
+  message,
+  ref,
+  ...rest
+}: DisabledBannerProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    aria-disabled="true"
+    className={cn(
+      "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
+      className,
+    )}
+    ref={ref}
+    {...rest}
+  >
+    {message}
+  </div>
 );
 DisabledBanner.displayName = "AutoReload.DisabledBanner";
 
@@ -426,60 +428,61 @@ type ActivePanelProps = {
   toggleId: string;
 } & ComponentPropsWithoutRef<"div">;
 
-const ActivePanel = forwardRef<HTMLDivElement, ActivePanelProps>(
-  (props, ref) => {
-    const {
-      className,
-      controller,
-      currencyDisplay,
-      isSaving,
-      labels,
-      maxAmountCents,
-      minAmountCents,
-      onSave,
-      reloadAmountId,
-      stepCents,
-      thresholdId,
-      toggleId,
-      ...rest
-    } = props;
-    return (
-      <div
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <ToggleHeader
-          enabled={controller.enabled}
-          heading={labels.heading}
-          helper={labels.helper}
-          id={toggleId}
-          onCheckedChange={controller.handleToggle}
+const ActivePanel = (
+  props: ActivePanelProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    controller,
+    currencyDisplay,
+    isSaving,
+    labels,
+    maxAmountCents,
+    minAmountCents,
+    onSave,
+    ref,
+    reloadAmountId,
+    stepCents,
+    thresholdId,
+    toggleId,
+    ...rest
+  } = props;
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <ToggleHeader
+        enabled={controller.enabled}
+        heading={labels.heading}
+        helper={labels.helper}
+        id={toggleId}
+        onCheckedChange={controller.handleToggle}
+      />
+      {controller.enabled ? (
+        <ReloadFormFields
+          currencyDisplay={currencyDisplay}
+          isSaving={isSaving}
+          labels={labels}
+          maxAmountCents={maxAmountCents}
+          minAmountCents={minAmountCents}
+          onSave={onSave}
+          reloadAmount={controller.reloadAmount}
+          reloadAmountId={reloadAmountId}
+          setReloadAmount={controller.setReloadAmount}
+          setThreshold={controller.setThreshold}
+          stepCents={stepCents}
+          threshold={controller.threshold}
+          thresholdId={thresholdId}
         />
-        {controller.enabled ? (
-          <ReloadFormFields
-            currencyDisplay={currencyDisplay}
-            isSaving={isSaving}
-            labels={labels}
-            maxAmountCents={maxAmountCents}
-            minAmountCents={minAmountCents}
-            onSave={onSave}
-            reloadAmount={controller.reloadAmount}
-            reloadAmountId={reloadAmountId}
-            setReloadAmount={controller.setReloadAmount}
-            setThreshold={controller.setThreshold}
-            stepCents={stepCents}
-            threshold={controller.threshold}
-            thresholdId={thresholdId}
-          />
-        ) : null}
-      </div>
-    );
-  },
-);
+      ) : null}
+    </div>
+  );
+};
 ActivePanel.displayName = "AutoReload.ActivePanel";
 
 type AutoReloadInternalState = {
@@ -543,44 +546,45 @@ function useAutoReloadInternals(
   };
 }
 
-export const AutoReload = forwardRef<HTMLDivElement, AutoReloadProps>(
-  (props, ref) => {
-    const {
-      className,
-      disabled = false,
-      disabledMessage,
-      isSaving = false,
-      maxAmountCents,
-      minAmountCents = 100,
-      stepCents = DEFAULT_STEP_CENTS,
-    } = props;
-    const internals = useAutoReloadInternals(props);
-    if (disabled) {
-      return (
-        <DisabledBanner
-          className={className}
-          message={disabledMessage ?? internals.resolvedLabels.disabledFallback}
-          ref={ref}
-        />
-      );
-    }
+export const AutoReload = (
+  props: AutoReloadProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    disabled = false,
+    disabledMessage,
+    isSaving = false,
+    maxAmountCents,
+    minAmountCents = 100,
+    ref,
+    stepCents = DEFAULT_STEP_CENTS,
+  } = props;
+  const internals = useAutoReloadInternals(props);
+  if (disabled) {
     return (
-      <ActivePanel
+      <DisabledBanner
         className={className}
-        controller={internals.controller}
-        currencyDisplay={internals.currencyDisplay}
-        isSaving={isSaving}
-        labels={internals.resolvedLabels}
-        maxAmountCents={maxAmountCents}
-        minAmountCents={minAmountCents}
-        onSave={internals.handleSave}
+        message={disabledMessage ?? internals.resolvedLabels.disabledFallback}
         ref={ref}
-        reloadAmountId={internals.reloadAmountId}
-        stepCents={stepCents}
-        thresholdId={internals.thresholdId}
-        toggleId={internals.toggleId}
       />
     );
-  },
-);
+  }
+  return (
+    <ActivePanel
+      className={className}
+      controller={internals.controller}
+      currencyDisplay={internals.currencyDisplay}
+      isSaving={isSaving}
+      labels={internals.resolvedLabels}
+      maxAmountCents={maxAmountCents}
+      minAmountCents={minAmountCents}
+      onSave={internals.handleSave}
+      ref={ref}
+      reloadAmountId={internals.reloadAmountId}
+      stepCents={stepCents}
+      thresholdId={internals.thresholdId}
+      toggleId={internals.toggleId}
+    />
+  );
+};
 AutoReload.displayName = "AutoReload";
diff --git a/packages/ui/src/components/avatar-group/avatar-group.tsx b/packages/ui/src/components/avatar-group/avatar-group.tsx
index 015ff47b..e0d2a1de 100644
--- a/packages/ui/src/components/avatar-group/avatar-group.tsx
+++ b/packages/ui/src/components/avatar-group/avatar-group.tsx
@@ -63,36 +63,42 @@ export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> &
     overflowLabel?: (hiddenCount: number) => string;
   };
 
-const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, items, max, overflowLabel, size, ...props }, reference) => {
-    const visibleItems = max === undefined ? items : items.slice(0, max);
-    const hiddenCount = max === undefined ? 0 : Math.max(items.length - max, 0);
+const AvatarGroup = ({
+  className,
+  items,
+  max,
+  overflowLabel,
+  ref: reference,
+  size,
+  ...props
+}: AvatarGroupProps & React.RefAttributes<HTMLDivElement>) => {
+  const visibleItems = max === undefined ? items : items.slice(0, max);
+  const hiddenCount = max === undefined ? 0 : Math.max(items.length - max, 0);
 
-    return (
-      <div
-        className={cn(avatarGroupVariants({ size }), className)}
-        ref={reference}
-        {...props}
-      >
-        {visibleItems.map((item, index) => (
-          <Avatar
-            className={avatarItemVariants({ size })}
-            key={item.src ?? item.alt}
-            style={{ zIndex: visibleItems.length - index }}
-          >
-            {item.src ? <AvatarImage alt={item.alt} src={item.src} /> : null}
-            <AvatarFallback>{item.fallback}</AvatarFallback>
-          </Avatar>
-        ))}
-        {hiddenCount > 0 ? (
-          <span className={overflowBadgeVariants({ size })}>
-            {overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}`}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      className={cn(avatarGroupVariants({ size }), className)}
+      ref={reference}
+      {...props}
+    >
+      {visibleItems.map((item, index) => (
+        <Avatar
+          className={avatarItemVariants({ size })}
+          key={item.src ?? item.alt}
+          style={{ zIndex: visibleItems.length - index }}
+        >
+          {item.src ? <AvatarImage alt={item.alt} src={item.src} /> : null}
+          <AvatarFallback>{item.fallback}</AvatarFallback>
+        </Avatar>
+      ))}
+      {hiddenCount > 0 ? (
+        <span className={overflowBadgeVariants({ size })}>
+          {overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}`}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 AvatarGroup.displayName = "AvatarGroup";
 
diff --git a/packages/ui/src/components/avatar/avatar.tsx b/packages/ui/src/components/avatar/avatar.tsx
index 32694384..5a31c1db 100644
--- a/packages/ui/src/components/avatar/avatar.tsx
+++ b/packages/ui/src/components/avatar/avatar.tsx
@@ -1,15 +1,14 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 import { cn } from "../../lib/utils";
 
-const Avatar = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Avatar = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Root>>) => (
   <AvatarPrimitive.Root
     className={cn(
       "relative flex size-10 shrink-0 overflow-hidden rounded-full",
@@ -18,25 +17,31 @@ const Avatar = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
+const AvatarImage = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Image>>) => (
   <AvatarPrimitive.Image
     className={cn("aspect-square h-full w-full", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+const AvatarFallback = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
+  React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Fallback>>) => (
   <AvatarPrimitive.Fallback
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted",
@@ -45,7 +50,7 @@ const AvatarFallback = forwardRef<
     ref={ref}
     {...props}
   />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+);
 
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export { Avatar, AvatarFallback, AvatarImage };
diff --git a/packages/ui/src/components/banner/banner.tsx b/packages/ui/src/components/banner/banner.tsx
index a353c456..d26b918f 100644
--- a/packages/ui/src/components/banner/banner.tsx
+++ b/packages/ui/src/components/banner/banner.tsx
@@ -3,7 +3,6 @@
 import {
   type ButtonHTMLAttributes,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -139,74 +138,69 @@ export type BannerProps = {
  *
  * @public
  */
-export const Banner = forwardRef<HTMLDivElement, BannerProps>(
-  (
-    {
-      children,
-      className,
-      dismissible = false,
-      dismissLabel = "Dismiss",
-      icon,
-      id,
-      onDismiss,
-      persistDismissal = false,
-      role: roleOverride,
-      variant,
-      ...rest
-    },
-    ref,
-  ) => {
-    const storageKey =
-      persistDismissal && id ? `${STORAGE_PREFIX}${id}` : undefined;
-    const persistedDismissed = usePersistedDismissed(storageKey);
-    const [locallyDismissed, setLocallyDismissed] = useState(false);
-
-    const handleDismiss = useCallback(() => {
-      setLocallyDismissed(true);
-      if (storageKey) safeStorageSet(storageKey, "1");
-      onDismiss?.();
-    }, [onDismiss, storageKey]);
-
-    if (locallyDismissed || persistedDismissed) return null;
-
-    const resolvedVariant: BannerVariant = variant ?? "info";
-    const role =
-      roleOverride ??
-      (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
-
-    return (
-      <div
-        className={cn(bannerVariants({ variant }), className)}
-        id={id}
-        ref={ref}
-        role={role}
-        {...rest}
-      >
-        {icon ? (
-          <span
-            aria-hidden="true"
-            className="mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4"
-          >
-            {icon}
-          </span>
-        ) : null}
-        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1">
-          {children}
-        </div>
-        {dismissible ? (
-          <button
-            aria-label={dismissLabel}
-            className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-            onClick={handleDismiss}
-            type="button"
-          >
-            <X aria-hidden="true" className="size-4" />
-          </button>
-        ) : null}
+export const Banner = ({
+  children,
+  className,
+  dismissible = false,
+  dismissLabel = "Dismiss",
+  icon,
+  id,
+  onDismiss,
+  persistDismissal = false,
+  ref,
+  role: roleOverride,
+  variant,
+  ...rest
+}: BannerProps & React.RefAttributes<HTMLDivElement>) => {
+  const storageKey =
+    persistDismissal && id ? `${STORAGE_PREFIX}${id}` : undefined;
+  const persistedDismissed = usePersistedDismissed(storageKey);
+  const [locallyDismissed, setLocallyDismissed] = useState(false);
+
+  const handleDismiss = useCallback(() => {
+    setLocallyDismissed(true);
+    if (storageKey) safeStorageSet(storageKey, "1");
+    onDismiss?.();
+  }, [onDismiss, storageKey]);
+
+  if (locallyDismissed || persistedDismissed) return null;
+
+  const resolvedVariant: BannerVariant = variant ?? "info";
+  const role =
+    roleOverride ?? (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
+
+  return (
+    <div
+      className={cn(bannerVariants({ variant }), className)}
+      id={id}
+      ref={ref}
+      role={role}
+      {...rest}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          className="mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1">
+        {children}
       </div>
-    );
-  },
-);
+      {dismissible ? (
+        <button
+          aria-label={dismissLabel}
+          className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onClick={handleDismiss}
+          type="button"
+        >
+          <X aria-hidden="true" className="size-4" />
+        </button>
+      ) : null}
+    </div>
+  );
+};
 Banner.displayName = "Banner";
 
 /**
@@ -226,27 +220,32 @@ export type BannerActionProps = {
  *
  * @public
  */
-export const BannerAction = forwardRef<HTMLButtonElement, BannerActionProps>(
-  ({ asChild = false, children, className, type, ...rest }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = asChild
-      ? rest
-      : { type: type ?? "button", ...rest };
-
-    return (
-      <Comp
-        className={cn(
-          "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className,
-        )}
-        ref={ref}
-        {...buttonProps}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+export const BannerAction = ({
+  asChild = false,
+  children,
+  className,
+  ref,
+  type,
+  ...rest
+}: BannerActionProps & React.RefAttributes<HTMLButtonElement>) => {
+  const Comp = asChild ? Slot : "button";
+  const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = asChild
+    ? rest
+    : { type: type ?? "button", ...rest };
+
+  return (
+    <Comp
+      className={cn(
+        "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      ref={ref}
+      {...buttonProps}
+    >
+      {children}
+    </Comp>
+  );
+};
 BannerAction.displayName = "BannerAction";
 
 export { bannerVariants };
diff --git a/packages/ui/src/components/border-beam/border-beam.tsx b/packages/ui/src/components/border-beam/border-beam.tsx
index 4042e29f..f1dfe22d 100644
--- a/packages/ui/src/components/border-beam/border-beam.tsx
+++ b/packages/ui/src/components/border-beam/border-beam.tsx
@@ -11,53 +11,49 @@ export type BorderBeamProps = React.ComponentPropsWithoutRef<"span"> & {
   reverse?: boolean;
 };
 
-export const BorderBeam = React.forwardRef<HTMLSpanElement, BorderBeamProps>(
-  (
-    {
-      borderWidth = 1,
-      className,
-      colorFrom = "hsl(var(--primary) / 0.85)",
-      colorTo = "hsl(var(--ring) / 0.25)",
-      delay = 0,
-      duration = 6,
-      reverse = false,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const beamStyle: React.CSSProperties = {
-      animationDelay: `${delay}s`,
-      animationDirection: reverse ? "reverse" : "normal",
-      animationDuration: `${duration}s`,
-      animationIterationCount: "infinite",
-      animationName: "vllnt-border-beam-angle",
-      animationTimingFunction: "linear",
-      background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,
-      borderRadius: "inherit",
-      boxSizing: "border-box",
-      mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-      maskComposite: "exclude",
-      padding: `${borderWidth}px`,
-      WebkitMask:
-        "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-      WebkitMaskComposite: "xor",
-      ...style,
-    };
+export const BorderBeam = ({
+  borderWidth = 1,
+  className,
+  colorFrom = "hsl(var(--primary) / 0.85)",
+  colorTo = "hsl(var(--ring) / 0.25)",
+  delay = 0,
+  duration = 6,
+  ref,
+  reverse = false,
+  style,
+  ...props
+}: BorderBeamProps & React.RefAttributes<HTMLSpanElement>) => {
+  const beamStyle: React.CSSProperties = {
+    animationDelay: `${delay}s`,
+    animationDirection: reverse ? "reverse" : "normal",
+    animationDuration: `${duration}s`,
+    animationIterationCount: "infinite",
+    animationName: "vllnt-border-beam-angle",
+    animationTimingFunction: "linear",
+    background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    padding: `${borderWidth}px`,
+    WebkitMask:
+      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    ...style,
+  };
 
-    return (
-      <span
-        aria-hidden="true"
-        className={cn(
-          "pointer-events-none absolute inset-0 rounded-[inherit]",
-          className,
-        )}
-        ref={ref}
-        style={beamStyle}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit]",
+        className,
+      )}
+      ref={ref}
+      style={beamStyle}
+      {...props}
+    />
+  );
+};
 
 BorderBeam.displayName = "BorderBeam";
diff --git a/packages/ui/src/components/bottom-activity-strip/bottom-activity-strip.tsx b/packages/ui/src/components/bottom-activity-strip/bottom-activity-strip.tsx
index 7df800d7..277efb15 100644
--- a/packages/ui/src/components/bottom-activity-strip/bottom-activity-strip.tsx
+++ b/packages/ui/src/components/bottom-activity-strip/bottom-activity-strip.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -151,11 +147,10 @@ const Chip = (props: { event: ActivityEvent }): React.ReactElement => {
  *
  * @public
  */
-export const BottomActivityStrip = forwardRef<
-  HTMLElement,
-  BottomActivityStripProps
->((props, ref) => {
-  const { className, events, labels, maxEvents, ...rest } = props;
+export const BottomActivityStrip = (
+  props: BottomActivityStripProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, events, labels, maxEvents, ref, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const visible =
     maxEvents === undefined || maxEvents >= events.length
@@ -184,5 +179,5 @@ export const BottomActivityStrip = forwardRef<
       )}
     </section>
   );
-});
+};
 BottomActivityStrip.displayName = "BottomActivityStrip";
diff --git a/packages/ui/src/components/bottom-bar/bottom-bar.tsx b/packages/ui/src/components/bottom-bar/bottom-bar.tsx
index bd6679c8..742e94f2 100644
--- a/packages/ui/src/components/bottom-bar/bottom-bar.tsx
+++ b/packages/ui/src/components/bottom-bar/bottom-bar.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -10,29 +8,33 @@ export type BottomBarProps = React.ComponentPropsWithoutRef<"div"> & {
   trailing?: ReactNode;
 };
 
-const BottomBar = forwardRef<HTMLDivElement, BottomBarProps>(
-  ({ center, className, leading, trailing, ...props }, ref) => (
-    <div
-      className={cn(
-        "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-2">{leading}</div>
-      {center ? (
-        <div className="flex shrink-0 items-center justify-center gap-2">
-          {center}
-        </div>
-      ) : null}
-      <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
-        {trailing}
+const BottomBar = ({
+  center,
+  className,
+  leading,
+  ref,
+  trailing,
+  ...props
+}: BottomBarProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="flex min-w-0 flex-1 items-center gap-2">{leading}</div>
+    {center ? (
+      <div className="flex shrink-0 items-center justify-center gap-2">
+        {center}
       </div>
+    ) : null}
+    <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+      {trailing}
     </div>
-  ),
+  </div>
 );
 
 BottomBar.displayName = "BottomBar";
-
 export { BottomBar };
diff --git a/packages/ui/src/components/button/button.tsx b/packages/ui/src/components/button/button.tsx
index 91fca805..0f4abb9c 100644
--- a/packages/ui/src/components/button/button.tsx
+++ b/packages/ui/src/components/button/button.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -39,18 +37,23 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, reference) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ className, size, variant }))}
-        ref={reference}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
+const Button = ({
+  asChild = false,
+  className,
+  ref: reference,
+  size,
+  variant,
+  ...props
+}: ButtonProps & React.RefAttributes<HTMLButtonElement>) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={cn(buttonVariants({ className, size, variant }))}
+      ref={reference}
+      {...props}
+    />
+  );
+};
 
+Button.displayName = "Button";
 export { Button, buttonVariants };
diff --git a/packages/ui/src/components/candlestick-chart/candlestick-chart.tsx b/packages/ui/src/components/candlestick-chart/candlestick-chart.tsx
index b05be270..d1eee776 100644
--- a/packages/ui/src/components/candlestick-chart/candlestick-chart.tsx
+++ b/packages/ui/src/components/candlestick-chart/candlestick-chart.tsx
@@ -202,65 +202,58 @@ function SessionPill({ sessionChange }: { sessionChange: number }) {
   );
 }
 
-export const CandlestickChart = React.forwardRef<
-  HTMLDivElement,
-  CandlestickChartProps
->(
-  (
-    {
-      className,
-      data,
-      height = DEFAULT_HEIGHT,
-      showGrid = true,
-      width = DEFAULT_WIDTH,
-      ...props
-    },
-    reference,
-  ) => {
-    const firstCandle = data[0];
-    const finalCandle = data.at(-1);
+export const CandlestickChart = ({
+  className,
+  data,
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  showGrid = true,
+  width = DEFAULT_WIDTH,
+  ...props
+}: CandlestickChartProps & React.RefAttributes<HTMLDivElement>) => {
+  const firstCandle = data[0];
+  const finalCandle = data.at(-1);
 
-    if (!firstCandle || !finalCandle) {
-      return null;
-    }
+  if (!firstCandle || !finalCandle) {
+    return null;
+  }
 
-    const metrics = buildMetrics(data, height, width);
-    const sessionChange = finalCandle.close - firstCandle.open;
+  const metrics = buildMetrics(data, height, width);
+  const sessionChange = finalCandle.close - firstCandle.open;
 
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              OHLC session
-            </p>
-            <h3 className="text-lg font-semibold text-foreground">
-              Candlestick chart
-            </h3>
-          </div>
-          <SessionPill sessionChange={sessionChange} />
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            OHLC session
+          </p>
+          <h3 className="text-lg font-semibold text-foreground">
+            Candlestick chart
+          </h3>
         </div>
-        <svg
-          aria-label="Candlestick chart"
-          className="h-full w-full"
-          height={height}
-          role="img"
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
-        >
-          <PriceGrid metrics={metrics} showGrid={showGrid} width={width} />
-          <CandleMarks data={data} height={height} metrics={metrics} />
-        </svg>
+        <SessionPill sessionChange={sessionChange} />
       </div>
-    );
-  },
-);
+      <svg
+        aria-label="Candlestick chart"
+        className="h-full w-full"
+        height={height}
+        role="img"
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
+      >
+        <PriceGrid metrics={metrics} showGrid={showGrid} width={width} />
+        <CandleMarks data={data} height={height} metrics={metrics} />
+      </svg>
+    </div>
+  );
+};
 
 CandlestickChart.displayName = "CandlestickChart";
diff --git a/packages/ui/src/components/canvas-shell/canvas-shell.tsx b/packages/ui/src/components/canvas-shell/canvas-shell.tsx
index 15f08ed1..2512b246 100644
--- a/packages/ui/src/components/canvas-shell/canvas-shell.tsx
+++ b/packages/ui/src/components/canvas-shell/canvas-shell.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { CSSProperties, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -206,7 +204,7 @@ function renderLegacyCanvasShell(
     topBar,
     ...props
   }: CanvasShellProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  ref: React.Ref<HTMLElement> | undefined,
 ) {
   return (
     <section
@@ -268,7 +266,7 @@ function renderFloatingCanvasShell(
     topBar,
     ...props
   }: CanvasShellProps,
-  ref: React.ForwardedRef<HTMLElement>,
+  ref: React.Ref<HTMLElement> | undefined,
 ) {
   const inset = toInsetValue(chromeInset) ?? "16px";
   const resolvedBottomBar = bottomBar ?? bottomSlot;
@@ -324,8 +322,11 @@ function renderFloatingCanvasShell(
   );
 }
 
-const CanvasShell = forwardRef<HTMLElement, CanvasShellProps>((props, ref) => {
-  const { bottomBar, chromeInset, contentPadding, leftBar, rightBar } = props;
+const CanvasShell = (
+  props: CanvasShellProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { bottomBar, chromeInset, contentPadding, leftBar, ref, rightBar } =
+    props;
   const hasExplicitChromeInset = Object.prototype.hasOwnProperty.call(
     props,
     "chromeInset",
@@ -342,8 +343,7 @@ const CanvasShell = forwardRef<HTMLElement, CanvasShellProps>((props, ref) => {
   }
 
   return renderFloatingCanvasShell(props, ref);
-});
+};
 
 CanvasShell.displayName = "CanvasShell";
-
 export { CanvasShell };
diff --git a/packages/ui/src/components/canvas-view/canvas-view.tsx b/packages/ui/src/components/canvas-view/canvas-view.tsx
index 863b4119..8aa53f58 100644
--- a/packages/ui/src/components/canvas-view/canvas-view.tsx
+++ b/packages/ui/src/components/canvas-view/canvas-view.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  forwardRef,
   useCallback,
   useEffect,
   useId,
@@ -473,7 +472,7 @@ function usePreventBodySelection(disabled: boolean) {
 }
 
 function useCanvasViewHandle(
-  ref: React.ForwardedRef<CanvasViewHandle>,
+  ref: React.Ref<CanvasViewHandle> | undefined,
   viewportState: {
     resetViewport: () => void;
     setViewport: (viewport: CanvasViewport) => void;
@@ -577,75 +576,68 @@ function CanvasContentLayer({
   );
 }
 
-const CanvasView = forwardRef<CanvasViewHandle, CanvasViewProps>(
-  (
-    {
-      children,
-      className,
-      defaultViewport = DEFAULT_VIEWPORT,
-      maxZoom = 2,
-      minZoom = 0.5,
-      onViewportChange,
-      overlay,
-      zoomStep = 0.1,
-      ...props
-    },
-    ref,
-  ) => {
-    const instructionsId = useId();
-    const viewportState = useViewportState({
-      defaultViewport,
-      maxZoom,
-      minZoom,
-      onViewportChange,
-    });
-    const keyboard = useCanvasKeyboardInteractions({
-      nudgeViewport: viewportState.nudgeViewport,
-      resetViewport: viewportState.resetViewport,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef,
-      zoomStep,
-    });
-    const pointer = useCanvasPointerInteractions({
-      isSpacePressed: keyboard.isSpacePressed,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef,
-    });
-    usePreventBodySelection(pointer.isDragging);
-    useCanvasViewHandle(ref, viewportState);
+const CanvasView = ({
+  children,
+  className,
+  defaultViewport = DEFAULT_VIEWPORT,
+  maxZoom = 2,
+  minZoom = 0.5,
+  onViewportChange,
+  overlay,
+  ref,
+  zoomStep = 0.1,
+  ...props
+}: CanvasViewProps & React.RefAttributes<CanvasViewHandle>) => {
+  const instructionsId = useId();
+  const viewportState = useViewportState({
+    defaultViewport,
+    maxZoom,
+    minZoom,
+    onViewportChange,
+  });
+  const keyboard = useCanvasKeyboardInteractions({
+    nudgeViewport: viewportState.nudgeViewport,
+    resetViewport: viewportState.resetViewport,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef,
+    zoomStep,
+  });
+  const pointer = useCanvasPointerInteractions({
+    isSpacePressed: keyboard.isSpacePressed,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef,
+  });
+  usePreventBodySelection(pointer.isDragging);
+  useCanvasViewHandle(ref, viewportState);
 
-    return (
-      <div
-        className={cn(
-          "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
-          className,
-        )}
-        {...props}
+  return (
+    <div
+      className={cn(
+        "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <CanvasInteractionLayer
+        instructionsId={instructionsId}
+        isDragging={pointer.isDragging}
+        isSpacePressed={keyboard.isSpacePressed}
+        onKeyDown={keyboard.handleKeyDown}
+        onKeyUp={keyboard.handleKeyUp}
+        onPointerCancel={pointer.handlePointerCancel}
+        onPointerDown={pointer.handlePointerDown}
+        onPointerMove={pointer.handlePointerMove}
+        onPointerUp={pointer.handlePointerUp}
+        onWheel={keyboard.handleWheel}
+        viewport={viewportState.viewport}
       >
-        <CanvasInteractionLayer
-          instructionsId={instructionsId}
-          isDragging={pointer.isDragging}
-          isSpacePressed={keyboard.isSpacePressed}
-          onKeyDown={keyboard.handleKeyDown}
-          onKeyUp={keyboard.handleKeyUp}
-          onPointerCancel={pointer.handlePointerCancel}
-          onPointerDown={pointer.handlePointerDown}
-          onPointerMove={pointer.handlePointerMove}
-          onPointerUp={pointer.handlePointerUp}
-          onWheel={keyboard.handleWheel}
-          viewport={viewportState.viewport}
-        >
-          <CanvasContentLayer
-            overlay={overlay}
-            viewport={viewportState.viewport}
-          >
-            {children}
-          </CanvasContentLayer>
-        </CanvasInteractionLayer>
-      </div>
-    );
-  },
-);
+        <CanvasContentLayer overlay={overlay} viewport={viewportState.viewport}>
+          {children}
+        </CanvasContentLayer>
+      </CanvasInteractionLayer>
+    </div>
+  );
+};
 
 CanvasView.displayName = "CanvasView";
 
diff --git a/packages/ui/src/components/card/card.tsx b/packages/ui/src/components/card/card.tsx
index 03640a0b..01e3d955 100644
--- a/packages/ui/src/components/card/card.tsx
+++ b/packages/ui/src/components/card/card.tsx
@@ -2,10 +2,12 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const Card = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
@@ -14,25 +16,29 @@ const Card = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardHeader = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -41,39 +47,45 @@ const CardTitle = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardContent = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div className={cn("p-6 pt-0", className)} ref={reference} {...props} />
-));
+);
 CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const CardFooter = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex items-center p-6 pt-0", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CardFooter.displayName = "CardFooter";
 
 export {
diff --git a/packages/ui/src/components/carousel/carousel.tsx b/packages/ui/src/components/carousel/carousel.tsx
index 65b41711..f7bfbec2 100644
--- a/packages/ui/src/components/carousel/carousel.tsx
+++ b/packages/ui/src/components/carousel/carousel.tsx
@@ -2,9 +2,8 @@
 
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useState,
@@ -42,7 +41,7 @@ type CarouselContextProps = {
 const CarouselContext = createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = useContext(CarouselContext);
+  const context = use(CarouselContext);
 
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
@@ -142,78 +141,75 @@ function useCarouselLogic({
   };
 }
 
-const Carousel = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      children,
-      className,
+const Carousel = ({
+  children,
+  className,
+  opts,
+  orientation = "horizontal",
+  plugins,
+  ref,
+  setApi,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  CarouselProps &
+  React.RefAttributes<HTMLDivElement>) => {
+  const {
+    api,
+    canScrollNext,
+    canScrollPrevious,
+    carouselRef,
+    handleKeyDown,
+    scrollNext,
+    scrollPrevious,
+  } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
+
+  const contextValue = useMemo(
+    () => ({
+      api,
+      canScrollNext,
+      canScrollPrev: canScrollPrevious,
+      carouselRef,
       opts,
-      orientation = "horizontal",
-      plugins,
-      setApi,
-      ...props
-    },
-    ref,
-  ) => {
-    const {
+      orientation:
+        orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollNext,
+      scrollPrev: scrollPrevious,
+    }),
+    [
       api,
       canScrollNext,
       canScrollPrevious,
       carouselRef,
-      handleKeyDown,
+      opts,
+      orientation,
       scrollNext,
       scrollPrevious,
-    } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
-
-    const contextValue = useMemo(
-      () => ({
-        api,
-        canScrollNext,
-        canScrollPrev: canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollNext,
-        scrollPrev: scrollPrevious,
-      }),
-      [
-        api,
-        canScrollNext,
-        canScrollPrevious,
-        carouselRef,
-        opts,
-        orientation,
-        scrollNext,
-        scrollPrevious,
-      ],
-    );
-
-    return (
-      <CarouselContext.Provider value={contextValue}>
-        <div
-          aria-roledescription="carousel"
-          className={cn("relative", className)}
-          onKeyDownCapture={handleKeyDown}
-          ref={ref}
-          role="region"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
+    ],
+  );
+
+  return (
+    <CarouselContext.Provider value={contextValue}>
+      <div
+        aria-roledescription="carousel"
+        className={cn("relative", className)}
+        onKeyDownCapture={handleKeyDown}
+        ref={ref}
+        role="region"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+};
 Carousel.displayName = "Carousel";
 
-const CarouselContent = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+const CarouselContent = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => {
   const { carouselRef, orientation } = useCarousel();
 
   return (
@@ -229,13 +225,15 @@ const CarouselContent = forwardRef<
       />
     </div>
   );
-});
+};
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+const CarouselItem = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => {
   const { orientation } = useCarousel();
 
   return (
@@ -251,13 +249,17 @@ const CarouselItem = forwardRef<
       {...props}
     />
   );
-});
+};
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselPrevious = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof Button> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { canScrollPrev, orientation, scrollPrev } = useCarousel();
 
   return (
@@ -280,13 +282,17 @@ const CarouselPrevious = forwardRef<
       <span className="sr-only">Previous slide</span>
     </Button>
   );
-});
+};
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+const CarouselNext = ({
+  className,
+  ref,
+  size = "icon",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof Button> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { canScrollNext, orientation, scrollNext } = useCarousel();
 
   return (
@@ -309,7 +315,7 @@ const CarouselNext = forwardRef<
       <span className="sr-only">Next slide</span>
     </Button>
   );
-});
+};
 CarouselNext.displayName = "CarouselNext";
 
 export {
diff --git a/packages/ui/src/components/chart/area-chart.tsx b/packages/ui/src/components/chart/area-chart.tsx
index be6cea6c..e990a3e3 100644
--- a/packages/ui/src/components/chart/area-chart.tsx
+++ b/packages/ui/src/components/chart/area-chart.tsx
@@ -60,69 +60,65 @@ function getPathCoordinates(data: Datum[], dimensions: ChartDimensions) {
   return { area, line };
 }
 
-export const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
-  (
-    {
-      className,
-      color = "currentColor",
-      data,
-      gradientId = "area-chart-gradient",
-      height = DEFAULT_HEIGHT,
-      strokeWidth = DEFAULT_STROKE_WIDTH,
-      width = DEFAULT_WIDTH,
-      ...props
-    },
-    reference,
-  ) => {
-    const { area, line } = React.useMemo(
-      () => getPathCoordinates(data, { height, strokeWidth, width }),
-      [data, width, height, strokeWidth],
-    );
-
-    if (!line) return null;
-
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border bg-background/40 p-3",
-          className,
-        )}
-        ref={reference}
-        {...props}
+export const AreaChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gradientId = "area-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  width = DEFAULT_WIDTH,
+  ...props
+}: AreaChartProps & React.RefAttributes<HTMLDivElement>) => {
+  const { area, line } = React.useMemo(
+    () => getPathCoordinates(data, { height, strokeWidth, width }),
+    [data, width, height, strokeWidth],
+  );
+
+  if (!line) return null;
+
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <svg
+        aria-label="Area chart"
+        className="h-full w-full"
+        height={height}
+        role="img"
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
       >
-        <svg
-          aria-label="Area chart"
-          className="h-full w-full"
-          height={height}
-          role="img"
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
-        >
-          <defs>
-            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor={color} stopOpacity="0.5" />
-              <stop offset="100%" stopColor={color} stopOpacity="0" />
-            </linearGradient>
-          </defs>
-          <path
-            d={area}
-            fill={`url(#${gradientId})`}
-            stroke="none"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d={line}
-            fill="none"
-            stroke={color}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={strokeWidth}
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
-      </div>
-    );
-  },
-);
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity="0.5" />
+            <stop offset="100%" stopColor={color} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path
+          d={area}
+          fill={`url(#${gradientId})`}
+          stroke="none"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d={line}
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </div>
+  );
+};
 
 AreaChart.displayName = "AreaChart";
diff --git a/packages/ui/src/components/chart/bar-chart.tsx b/packages/ui/src/components/chart/bar-chart.tsx
index eda00ddf..b3f9fcb1 100644
--- a/packages/ui/src/components/chart/bar-chart.tsx
+++ b/packages/ui/src/components/chart/bar-chart.tsx
@@ -20,78 +20,74 @@ const DEFAULT_WIDTH = 320;
 const DEFAULT_HEIGHT = 140;
 const DEFAULT_GAP = 12;
 
-export const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
-  (
-    {
-      className,
-      color = "currentColor",
-      data,
-      gap = DEFAULT_GAP,
-      gradientId = "bar-chart-gradient",
-      height = DEFAULT_HEIGHT,
-      width = DEFAULT_WIDTH,
-      ...props
-    },
-    reference,
-  ) => {
-    if (data.length === 0) {
-      return null;
-    }
+export const BarChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gap = DEFAULT_GAP,
+  gradientId = "bar-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  width = DEFAULT_WIDTH,
+  ...props
+}: BarChartProps & React.RefAttributes<HTMLDivElement>) => {
+  if (data.length === 0) {
+    return null;
+  }
 
-    const values = data.map((point) => point.value);
-    const maxValue = Math.max(...values, 0);
-    const normalizedMax = maxValue || 1;
-    const totalGap = gap * Math.max(data.length - 1, 0);
-    const barWidth = Math.max((width - totalGap) / data.length, 6);
+  const values = data.map((point) => point.value);
+  const maxValue = Math.max(...values, 0);
+  const normalizedMax = maxValue || 1;
+  const totalGap = gap * Math.max(data.length - 1, 0);
+  const barWidth = Math.max((width - totalGap) / data.length, 6);
 
-    return (
-      <div
-        className={cn(
-          "rounded-lg border border-border bg-background/40 p-3",
-          className,
-        )}
-        ref={reference}
-        {...props}
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-background/40 p-3",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <svg
+        aria-label="Bar chart"
+        className="h-full w-full"
+        height={height}
+        role="img"
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
       >
-        <svg
-          aria-label="Bar chart"
-          className="h-full w-full"
-          height={height}
-          role="img"
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
-        >
-          <defs>
-            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor={color} stopOpacity="0.9" />
-              <stop offset="100%" stopColor={color} stopOpacity="0.4" />
-            </linearGradient>
-          </defs>
-          {data.map((point, index) => {
-            const barHeight = (point.value / normalizedMax) * (height - 12);
-            const x = index * (barWidth + gap);
-            const y = height - barHeight;
-            return (
-              <rect
-                fill={`url(#${gradientId})`}
-                height={barHeight}
-                key={`${point.label ?? index}-${point.value}`}
-                rx={4}
-                width={barWidth}
-                x={x}
-                y={y}
-              >
-                <title>
-                  {point.label ? `${point.label}: ` : ""}
-                  {point.value.toLocaleString()}
-                </title>
-              </rect>
-            );
-          })}
-        </svg>
-      </div>
-    );
-  },
-);
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity="0.9" />
+            <stop offset="100%" stopColor={color} stopOpacity="0.4" />
+          </linearGradient>
+        </defs>
+        {data.map((point, index) => {
+          const barHeight = (point.value / normalizedMax) * (height - 12);
+          const x = index * (barWidth + gap);
+          const y = height - barHeight;
+          return (
+            <rect
+              fill={`url(#${gradientId})`}
+              height={barHeight}
+              key={`${point.label ?? index}-${point.value}`}
+              rx={4}
+              width={barWidth}
+              x={x}
+              y={y}
+            >
+              <title>
+                {point.label ? `${point.label}: ` : ""}
+                {point.value.toLocaleString()}
+              </title>
+            </rect>
+          );
+        })}
+      </svg>
+    </div>
+  );
+};
 
 BarChart.displayName = "BarChart";
diff --git a/packages/ui/src/components/chart/line-chart.tsx b/packages/ui/src/components/chart/line-chart.tsx
index 357a8182..4c5ed40e 100644
--- a/packages/ui/src/components/chart/line-chart.tsx
+++ b/packages/ui/src/components/chart/line-chart.tsx
@@ -46,80 +46,76 @@ function buildCoordinates(data: Datum[], dimensions: ChartDimensions) {
   });
 }
 
-export const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
-  (
-    {
-      className,
-      color = "currentColor",
-      data,
-      gradientId = "line-chart-gradient",
-      height = DEFAULT_HEIGHT,
-      strokeWidth = DEFAULT_STROKE_WIDTH,
-      width = DEFAULT_WIDTH,
-      ...props
-    },
-    reference,
-  ) => {
-    const canvasData = React.useMemo(
-      () => buildCoordinates(data, { height, strokeWidth, width }),
-      [data, width, height, strokeWidth],
-    );
+export const LineChart = ({
+  className,
+  color = "currentColor",
+  data,
+  gradientId = "line-chart-gradient",
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  width = DEFAULT_WIDTH,
+  ...props
+}: LineChartProps & React.RefAttributes<HTMLDivElement>) => {
+  const canvasData = React.useMemo(
+    () => buildCoordinates(data, { height, strokeWidth, width }),
+    [data, width, height, strokeWidth],
+  );
 
-    if (canvasData.length === 0) {
-      return null;
-    }
+  if (canvasData.length === 0) {
+    return null;
+  }
 
-    const linePath = canvasData
-      .map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`)
-      .join(" ");
+  const linePath = canvasData
+    .map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`)
+    .join(" ");
 
-    const areaPath =
-      canvasData.length === 0
-        ? ""
-        : `M${canvasData[0]?.x ?? 0},${height} ${linePath} L${canvasData.at(-1)?.x ?? 0},${height}Z`;
+  const areaPath =
+    canvasData.length === 0
+      ? ""
+      : `M${canvasData[0]?.x ?? 0},${height} ${linePath} L${canvasData.at(-1)?.x ?? 0},${height}Z`;
 
-    return (
-      <div
-        className={cn(
-          "rounded-lg border border-border bg-background/40 p-3",
-          className,
-        )}
-        ref={reference}
-        {...props}
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-background/40 p-3",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <svg
+        aria-label="Line chart"
+        className="h-full w-full"
+        height={height}
+        role="img"
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
       >
-        <svg
-          aria-label="Line chart"
-          className="h-full w-full"
-          height={height}
-          role="img"
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
-        >
-          <defs>
-            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor={color} stopOpacity="0.45" />
-              <stop offset="100%" stopColor={color} stopOpacity="0" />
-            </linearGradient>
-          </defs>
-          <path
-            d={areaPath}
-            fill={`url(#${gradientId})`}
-            stroke="none"
-            vectorEffect="non-scaling-stroke"
-          />
-          <path
-            d={linePath}
-            fill="none"
-            stroke={color}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={strokeWidth}
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
-      </div>
-    );
-  },
-);
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity="0.45" />
+            <stop offset="100%" stopColor={color} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path
+          d={areaPath}
+          fill={`url(#${gradientId})`}
+          stroke="none"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d={linePath}
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </div>
+  );
+};
 
 LineChart.displayName = "LineChart";
diff --git a/packages/ui/src/components/chat-dock-section/chat-dock-section.tsx b/packages/ui/src/components/chat-dock-section/chat-dock-section.tsx
index 46c666f3..8881c4f0 100644
--- a/packages/ui/src/components/chat-dock-section/chat-dock-section.tsx
+++ b/packages/ui/src/components/chat-dock-section/chat-dock-section.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { ArrowUpRight, MessageSquareText } from "lucide-react";
 import type { ReactNode } from "react";
 
@@ -19,65 +17,60 @@ export type ChatDockSectionProps = React.ComponentPropsWithoutRef<"section"> & {
   title?: ReactNode;
 };
 
-const ChatDockSection = forwardRef<HTMLElement, ChatDockSectionProps>(
-  (
-    {
+const ChatDockSection = ({
+  className,
+  composerPlaceholder = "Ask about runs, errors, or pending work…",
+  contextLabel,
+  messages,
+  ref,
+  title = "Assistant",
+  ...props
+}: ChatDockSectionProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
       className,
-      composerPlaceholder = "Ask about runs, errors, or pending work…",
-      contextLabel,
-      messages,
-      title = "Assistant",
-      ...props
-    },
-    ref,
-  ) => (
-    <section
-      className={cn(
-        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <MessageSquareText className="size-4 text-primary" />
-            {title}
-          </div>
-          {contextLabel ? (
-            <div className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
-              {contextLabel}
-            </div>
-          ) : null}
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="flex items-start justify-between gap-3">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+          <MessageSquareText className="size-4 text-primary" />
+          {title}
         </div>
-        <Button size="sm" type="button" variant="ghost">
-          Open thread
-          <ArrowUpRight className="size-4" />
-        </Button>
-      </div>
-      <div className="space-y-3">
-        {messages.map((message) => (
-          <div
-            className="rounded-xl border border-border/60 bg-background/85 px-3 py-2"
-            key={message.id}
-          >
-            <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
-              {message.speaker}
-            </div>
-            <div className="mt-2 text-sm leading-6 text-foreground">
-              {message.body}
-            </div>
+        {contextLabel ? (
+          <div className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
+            {contextLabel}
           </div>
-        ))}
-      </div>
-      <div className="rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground">
-        {composerPlaceholder}
+        ) : null}
       </div>
-    </section>
-  ),
+      <Button size="sm" type="button" variant="ghost">
+        Open thread
+        <ArrowUpRight className="size-4" />
+      </Button>
+    </div>
+    <div className="space-y-3">
+      {messages.map((message) => (
+        <div
+          className="rounded-xl border border-border/60 bg-background/85 px-3 py-2"
+          key={message.id}
+        >
+          <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+            {message.speaker}
+          </div>
+          <div className="mt-2 text-sm leading-6 text-foreground">
+            {message.body}
+          </div>
+        </div>
+      ))}
+    </div>
+    <div className="rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground">
+      {composerPlaceholder}
+    </div>
+  </section>
 );
 
 ChatDockSection.displayName = "ChatDockSection";
-
 export { ChatDockSection };
diff --git a/packages/ui/src/components/checkbox/checkbox.tsx b/packages/ui/src/components/checkbox/checkbox.tsx
index 53c7c1ee..c1e98bb6 100644
--- a/packages/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/ui/src/components/checkbox/checkbox.tsx
@@ -7,10 +7,12 @@ import { Check } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
-const Checkbox = React.forwardRef<
-  React.ComponentRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, reference) => (
+const Checkbox = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof CheckboxPrimitive.Root>>) => (
   <CheckboxPrimitive.Root
     className={cn(
       "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
@@ -25,7 +27,7 @@ const Checkbox = React.forwardRef<
       <Check className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-));
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
diff --git a/packages/ui/src/components/choropleth-map/choropleth-map.tsx b/packages/ui/src/components/choropleth-map/choropleth-map.tsx
index b590f8d2..fcd277d7 100644
--- a/packages/ui/src/components/choropleth-map/choropleth-map.tsx
+++ b/packages/ui/src/components/choropleth-map/choropleth-map.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -78,7 +77,7 @@ type ChoroplethCtx = {
 const ChoroplethContext = createContext<ChoroplethCtx | null>(null);
 
 function useChoroplethContext(): ChoroplethCtx {
-  const ctx = useContext(ChoroplethContext);
+  const ctx = use(ChoroplethContext);
   if (!ctx) {
     throw new Error("ChoroplethMap subcomponent used outside its root.");
   }
@@ -257,10 +256,12 @@ export type ChoroplethTooltipProps = {
   children?: ChoroplethTooltipRender;
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const ChoroplethTooltip = forwardRef<
-  HTMLDivElement,
-  ChoroplethTooltipProps
->(({ children, className, ...rest }, ref) => {
+export const ChoroplethTooltip = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ChoroplethTooltipProps & React.RefAttributes<HTMLDivElement>) => {
   const { hover, regionByid } = useChoroplethContext();
   if (!hover) return null;
   const region = regionByid.get(hover.id);
@@ -290,7 +291,7 @@ export const ChoroplethTooltip = forwardRef<
       )}
     </div>
   );
-});
+};
 ChoroplethTooltip.displayName = "ChoroplethTooltip";
 
 /**
@@ -303,10 +304,12 @@ export type ChoroplethLegendProps = {
   title?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const ChoroplethLegend = forwardRef<
-  HTMLDivElement,
-  ChoroplethLegendProps
->(({ className, title, ...rest }, ref) => {
+export const ChoroplethLegend = ({
+  className,
+  ref,
+  title,
+  ...rest
+}: ChoroplethLegendProps & React.RefAttributes<HTMLDivElement>) => {
   const { legend } = useChoroplethContext();
   if (!legend) return null;
   const stops = legend.scale.join(", ");
@@ -336,7 +339,7 @@ export const ChoroplethLegend = forwardRef<
       </div>
     </div>
   );
-});
+};
 ChoroplethLegend.displayName = "ChoroplethLegend";
 
 type DataSummaryProps = {
@@ -502,80 +505,82 @@ function RegionsLayer({
  *
  * @public
  */
-export const ChoroplethMap = forwardRef<HTMLElement, ChoroplethMapProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      colorScale = DEFAULT_SCALE,
-      data,
-      domain: domainProperty,
-      labels,
-      missingColor = DEFAULT_MISSING,
-      onSelectRegion,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-
-    const domain = useMemo(
-      () => domainProperty ?? computeDomain(Object.values(data)),
-      [data, domainProperty],
-    );
-
-    const ctx = useChoroplethState({
-      colorScale,
-      data,
-      domain,
-      missingColor,
-      regions,
-    });
-    const buckets = useMemo(() => bucketChildren(children), [children]);
-
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-
-    const handleSelect = useCallback(
-      (region: ChoroplethRegion) => {
-        setSelectedId(region.id);
-        onSelectRegion?.(region);
-      },
-      [onSelectRegion],
-    );
-
-    return (
-      <ChoroplethContext.Provider value={ctx}>
-        <section
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-            className,
-          )}
-          ref={ref}
-          {...rest}
+// eslint-disable-next-line max-lines-per-function
+export const ChoroplethMap = (
+  props: ChoroplethMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    colorScale = DEFAULT_SCALE,
+    data,
+    domain: domainProperty,
+    labels,
+    missingColor = DEFAULT_MISSING,
+    onSelectRegion,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  const domain = useMemo(
+    () => domainProperty ?? computeDomain(Object.values(data)),
+    [data, domainProperty],
+  );
+
+  const ctx = useChoroplethState({
+    colorScale,
+    data,
+    domain,
+    missingColor,
+    regions,
+  });
+  const buckets = useMemo(() => bucketChildren(children), [children]);
+
+  const [selectedId, setSelectedId] = useState<string | undefined>();
+
+  const handleSelect = useCallback(
+    (region: ChoroplethRegion) => {
+      setSelectedId(region.id);
+      onSelectRegion?.(region);
+    },
+    [onSelectRegion],
+  );
+
+  return (
+    <ChoroplethContext.Provider value={ctx}>
+      <section
+        aria-label={resolvedLabels.region}
+        className={cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <svg
+          aria-hidden="true"
+          className="block h-full w-full"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox={`0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`}
         >
-          <svg
-            aria-hidden="true"
-            className="block h-full w-full"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox={`0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`}
-          >
-            <RegionsLayer
-              onSelect={handleSelect}
-              regions={regions}
-              selectedId={selectedId}
-              setHoverFn={ctx.setHover}
-            />
-          </svg>
-          {buckets.tooltip}
-          {buckets.legend}
-          <DataSummary data={data} regions={regions} titleId={titleId} />
-        </section>
-      </ChoroplethContext.Provider>
-    );
-  },
-);
+          <RegionsLayer
+            onSelect={handleSelect}
+            regions={regions}
+            selectedId={selectedId}
+            setHoverFn={ctx.setHover}
+          />
+        </svg>
+        {buckets.tooltip}
+        {buckets.legend}
+        <DataSummary data={data} regions={regions} titleId={titleId} />
+      </section>
+    </ChoroplethContext.Provider>
+  );
+};
 ChoroplethMap.displayName = "ChoroplethMap";
diff --git a/packages/ui/src/components/chronological-timeline/chronological-timeline.tsx b/packages/ui/src/components/chronological-timeline/chronological-timeline.tsx
index d8b8063d..b85f9411 100644
--- a/packages/ui/src/components/chronological-timeline/chronological-timeline.tsx
+++ b/packages/ui/src/components/chronological-timeline/chronological-timeline.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -53,7 +52,7 @@ type ChronoCtx = {
 const ChronoContext = createContext<ChronoCtx | null>(null);
 
 function useChronoContext(): ChronoCtx {
-  const ctx = useContext(ChronoContext);
+  const ctx = use(ChronoContext);
   if (!ctx) {
     throw new Error("ChronoEvent used outside ChronologicalTimeline.");
   }
@@ -286,68 +285,69 @@ function EventCard({
  *
  * @public
  */
-export const ChronoEvent = forwardRef<HTMLElement, ChronoEventProps>(
-  (props, forwardedRef) => {
-    const {
-      children,
-      className,
-      date,
-      featured = false,
-      id,
-      media,
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const eventId = id ?? generatedId;
-    const ref = useRef<HTMLElement | null>(null);
-    const { registerEvent, setActiveId } = useChronoContext();
-
-    const refCallback = useCallback(
-      (node: HTMLElement | null) => {
-        ref.current = node;
-        registerEvent(eventId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [eventId, forwardedRef, registerEvent],
-    );
+export const ChronoEvent = (
+  props: ChronoEventProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    date,
+    featured = false,
+    id,
+    media,
+    ref: forwardedRef,
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const eventId = id ?? generatedId;
+  const ref = useRef<HTMLElement | null>(null);
+  const { registerEvent, setActiveId } = useChronoContext();
+
+  const refCallback = useCallback(
+    (node: HTMLElement | null) => {
+      ref.current = node;
+      registerEvent(eventId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [eventId, forwardedRef, registerEvent],
+  );
 
-    const handleFocus = useCallback(() => {
-      setActiveId(eventId);
-    }, [eventId, setActiveId]);
+  const handleFocus = useCallback(() => {
+    setActiveId(eventId);
+  }, [eventId, setActiveId]);
 
-    return (
-      <article
-        aria-labelledby={`${eventId}-title`}
-        className={cn(
-          "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
-          className,
-        )}
-        data-event-id={eventId}
-        data-featured={featured ? "true" : undefined}
-        id={eventId}
-        onFocus={handleFocus}
-        ref={refCallback}
-        {...rest}
+  return (
+    <article
+      aria-labelledby={`${eventId}-title`}
+      className={cn(
+        "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
+        className,
+      )}
+      data-event-id={eventId}
+      data-featured={featured ? "true" : undefined}
+      id={eventId}
+      onFocus={handleFocus}
+      ref={refCallback}
+      {...rest}
+    >
+      <DateColumn date={date} />
+      <RailColumn featured={featured} />
+      <EventCard
+        date={date}
+        eventId={eventId}
+        featured={featured}
+        media={media}
+        subtitle={subtitle}
+        title={title}
       >
-        <DateColumn date={date} />
-        <RailColumn featured={featured} />
-        <EventCard
-          date={date}
-          eventId={eventId}
-          featured={featured}
-          media={media}
-          subtitle={subtitle}
-          title={title}
-        >
-          {children}
-        </EventCard>
-      </article>
-    );
-  },
-);
+        {children}
+      </EventCard>
+    </article>
+  );
+};
 ChronoEvent.displayName = "ChronoEvent";
 
 type ProgressStripProps = {
@@ -477,14 +477,14 @@ function EventList({ activeId, children }: EventListProps): ReactNode {
  *
  * @public
  */
-export const ChronologicalTimeline = forwardRef<
-  HTMLElement,
-  ChronologicalTimelineProps
->((props, ref) => {
+export const ChronologicalTimeline = (
+  props: ChronologicalTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     children,
     className,
     progressLabel = "Timeline progress",
+    ref,
     title,
     ...rest
   } = props;
@@ -520,7 +520,7 @@ export const ChronologicalTimeline = forwardRef<
       </section>
     </ChronoContext.Provider>
   );
-});
+};
 ChronologicalTimeline.displayName = "ChronologicalTimeline";
 
 function isReactElementWithEventId(
diff --git a/packages/ui/src/components/civilization-card/civilization-card.tsx b/packages/ui/src/components/civilization-card/civilization-card.tsx
index 37dddeb3..64ad397e 100644
--- a/packages/ui/src/components/civilization-card/civilization-card.tsx
+++ b/packages/ui/src/components/civilization-card/civilization-card.tsx
@@ -1,10 +1,5 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { Globe } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
@@ -376,54 +371,55 @@ function CivilizationBody({
   );
 }
 
-export const CivilizationCard = forwardRef<HTMLElement, CivilizationCardProps>(
-  (props, ref) => {
-    const {
-      achievements,
-      actionHref,
-      capital,
-      className,
-      color = "neutral",
-      era,
-      image,
-      labels,
-      leaders,
-      name,
-      peakPopulation,
-      region,
-      ...rest
-    } = props;
+export const CivilizationCard = (
+  props: CivilizationCardProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    achievements,
+    actionHref,
+    capital,
+    className,
+    color = "neutral",
+    era,
+    image,
+    labels,
+    leaders,
+    name,
+    peakPopulation,
+    ref,
+    region,
+    ...rest
+  } = props;
 
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const palette = CIVILIZATION_COLOR_VARIANTS[color];
-    const altName = typeof name === "string" ? name : undefined;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const palette = CIVILIZATION_COLOR_VARIANTS[color];
+  const altName = typeof name === "string" ? name : undefined;
 
-    return (
-      <article
-        className={cn(
-          "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
-          palette.ring,
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <CivilizationHero color={color} image={image} imageAlt={altName} />
-        <CivilizationBody
-          achievements={achievements}
-          actionHref={actionHref}
-          capital={capital}
-          era={era}
-          labels={resolvedLabels}
-          leaders={leaders}
-          name={name}
-          peakPopulation={peakPopulation}
-          region={region}
-        />
-      </article>
-    );
-  },
-);
+  return (
+    <article
+      className={cn(
+        "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
+        palette.ring,
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <CivilizationHero color={color} image={image} imageAlt={altName} />
+      <CivilizationBody
+        achievements={achievements}
+        actionHref={actionHref}
+        capital={capital}
+        era={era}
+        labels={resolvedLabels}
+        leaders={leaders}
+        name={name}
+        peakPopulation={peakPopulation}
+        region={region}
+      />
+    </article>
+  );
+};
 CivilizationCard.displayName = "CivilizationCard";
 
 /**
@@ -440,10 +436,12 @@ export type CivilizationComparisonProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const CivilizationComparison = forwardRef<
-  HTMLDivElement,
-  CivilizationComparisonProps
->(({ children, className, ...rest }, ref) => {
+export const CivilizationComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: CivilizationComparisonProps & React.RefAttributes<HTMLDivElement>) => {
   return (
     <div
       className={cn(
@@ -456,5 +454,5 @@ export const CivilizationComparison = forwardRef<
       {children}
     </div>
   );
-});
+};
 CivilizationComparison.displayName = "CivilizationComparison";
diff --git a/packages/ui/src/components/combobox/combobox.tsx b/packages/ui/src/components/combobox/combobox.tsx
index fe1ba5af..a6751b51 100644
--- a/packages/ui/src/components/combobox/combobox.tsx
+++ b/packages/ui/src/components/combobox/combobox.tsx
@@ -133,68 +133,64 @@ function ComboboxListPanel({
   );
 }
 
-const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
-  (
-    {
-      className,
-      commandClassName,
-      emptyText = "No option found.",
-      onValueChange,
-      options,
-      placeholder = "Select an option",
-      searchPlaceholder = "Search options...",
-      triggerClassName,
-      value,
-    },
-    reference,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const listboxId = React.useId();
-    const { resolvedValue, setResolvedValue } = useComboboxValue(
-      value,
-      onValueChange,
-    );
-    const selectedOption = options.find(
-      (option) => option.value === resolvedValue,
-    );
-
-    const handleSelect = (nextValue: string) => {
-      setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
-      setOpen(false);
-    };
-
-    return (
-      <Popover onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <Button
-            aria-controls={listboxId}
-            aria-expanded={open}
-            aria-haspopup="listbox"
-            className={cn("w-full justify-between", triggerClassName)}
-            ref={reference}
-            role="combobox"
-            variant="outline"
-          >
-            <span className="truncate">
-              {selectedOption ? selectedOption.label : placeholder}
-            </span>
-            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <ComboboxListPanel
-          className={className}
-          commandClassName={commandClassName}
-          emptyText={emptyText}
-          listboxId={listboxId}
-          onSelect={handleSelect}
-          options={options}
-          resolvedValue={resolvedValue}
-          searchPlaceholder={searchPlaceholder}
-        />
-      </Popover>
-    );
-  },
-);
+const Combobox = ({
+  className,
+  commandClassName,
+  emptyText = "No option found.",
+  onValueChange,
+  options,
+  placeholder = "Select an option",
+  ref: reference,
+  searchPlaceholder = "Search options...",
+  triggerClassName,
+  value,
+}: ComboboxProps & React.RefAttributes<HTMLButtonElement>) => {
+  const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
+  const { resolvedValue, setResolvedValue } = useComboboxValue(
+    value,
+    onValueChange,
+  );
+  const selectedOption = options.find(
+    (option) => option.value === resolvedValue,
+  );
+
+  const handleSelect = (nextValue: string) => {
+    setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
+    setOpen(false);
+  };
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-controls={listboxId}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          className={cn("w-full justify-between", triggerClassName)}
+          ref={reference}
+          role="combobox"
+          variant="outline"
+        >
+          <span className="truncate">
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <ComboboxListPanel
+        className={className}
+        commandClassName={commandClassName}
+        emptyText={emptyText}
+        listboxId={listboxId}
+        onSelect={handleSelect}
+        options={options}
+        resolvedValue={resolvedValue}
+        searchPlaceholder={searchPlaceholder}
+      />
+    </Popover>
+  );
+};
 Combobox.displayName = "Combobox";
 
 export { Combobox };
diff --git a/packages/ui/src/components/command/command.tsx b/packages/ui/src/components/command/command.tsx
index fec563da..1ad12f72 100644
--- a/packages/ui/src/components/command/command.tsx
+++ b/packages/ui/src/components/command/command.tsx
@@ -9,10 +9,12 @@ import { Search } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Dialog, DialogContent, DialogTitle } from "../dialog/dialog";
 
-const Command = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, reference) => (
+const Command = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive>>) => (
   <CommandPrimitive
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
@@ -21,7 +23,7 @@ const Command = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = {} & React.ComponentPropsWithoutRef<
@@ -41,10 +43,12 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
-const CommandInput = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, reference) => (
+const CommandInput = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Input>>) => (
   // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 size-4 shrink-0 opacity-50" />
@@ -57,37 +61,42 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-));
+);
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, reference) => (
+const CommandList = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.List>>) => (
   <CommandPrimitive.List
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, reference) => (
+const CommandEmpty = ({
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Empty>>) => (
   <CommandPrimitive.Empty
     className="py-6 text-center text-sm"
     ref={reference}
     {...props}
   />
-));
+);
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, reference) => (
+const CommandGroup = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Group>>) => (
   <CommandPrimitive.Group
     className={cn(
       "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
@@ -96,25 +105,32 @@ const CommandGroup = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, reference) => (
+const CommandSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof CommandPrimitive.Separator>
+  >) => (
   <CommandPrimitive.Separator
     className={cn("-mx-1 h-px bg-border", className)}
     ref={reference}
     {...props}
   />
-));
+);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
-  React.ComponentRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, disabled, ...props }, reference) => (
+const CommandItem = ({
+  className,
+  disabled,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof CommandPrimitive.Item>>) => (
   <CommandPrimitive.Item
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:opacity-50",
@@ -125,7 +141,7 @@ const CommandItem = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
diff --git a/packages/ui/src/components/comment-pin/comment-pin.tsx b/packages/ui/src/components/comment-pin/comment-pin.tsx
index e9203b4d..b13ce95c 100644
--- a/packages/ui/src/components/comment-pin/comment-pin.tsx
+++ b/packages/ui/src/components/comment-pin/comment-pin.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -124,65 +120,66 @@ const PinBody = (props: PinBodyInput): React.ReactElement => {
  *
  * @public
  */
-export const CommentPin = forwardRef<HTMLDivElement, CommentPinProps>(
-  (props, ref) => {
-    const {
-      authorInitial,
-      className,
-      color,
-      labels,
-      onActivate,
-      state = "open",
-      unread,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const showBadge = typeof unread === "number" && unread > 0;
-    const ariaLabel = showBadge
-      ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}`
-      : resolvedLabels.region;
-    const handleClick = (): void => {
-      onActivate?.();
-    };
-    const body = (
-      <PinBody
-        accent={color}
-        authorInitial={authorInitial}
-        state={state}
-        unread={unread}
-      />
-    );
-    return (
-      <div
-        aria-label={ariaLabel}
-        className={cn(
-          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
-          className,
-        )}
-        data-comment-pin
-        data-comment-pin-state={state}
-        ref={ref}
-        role="img"
-        style={{ left: x, top: y }}
-        {...rest}
-      >
-        {onActivate ? (
-          <button
-            aria-label={ariaLabel}
-            className="relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            data-comment-pin-trigger
-            onClick={handleClick}
-            type="button"
-          >
-            {body}
-          </button>
-        ) : (
-          <span className="relative inline-flex">{body}</span>
-        )}
-      </div>
-    );
-  },
-);
+export const CommentPin = (
+  props: CommentPinProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    authorInitial,
+    className,
+    color,
+    labels,
+    onActivate,
+    ref,
+    state = "open",
+    unread,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const showBadge = typeof unread === "number" && unread > 0;
+  const ariaLabel = showBadge
+    ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}`
+    : resolvedLabels.region;
+  const handleClick = (): void => {
+    onActivate?.();
+  };
+  const body = (
+    <PinBody
+      accent={color}
+      authorInitial={authorInitial}
+      state={state}
+      unread={unread}
+    />
+  );
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+        className,
+      )}
+      data-comment-pin
+      data-comment-pin-state={state}
+      ref={ref}
+      role="img"
+      style={{ left: x, top: y }}
+      {...rest}
+    >
+      {onActivate ? (
+        <button
+          aria-label={ariaLabel}
+          className="relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          data-comment-pin-trigger
+          onClick={handleClick}
+          type="button"
+        >
+          {body}
+        </button>
+      ) : (
+        <span className="relative inline-flex">{body}</span>
+      )}
+    </div>
+  );
+};
 CommentPin.displayName = "CommentPin";
diff --git a/packages/ui/src/components/connector-edge/connector-edge.tsx b/packages/ui/src/components/connector-edge/connector-edge.tsx
index 6802f6cb..20a633df 100644
--- a/packages/ui/src/components/connector-edge/connector-edge.tsx
+++ b/packages/ui/src/components/connector-edge/connector-edge.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { CSSProperties } from "react";
 
 import { cn } from "../../lib/utils";
@@ -26,55 +24,60 @@ const strokeClasses: Record<
   idle: "stroke-muted-foreground/60",
 };
 
-const ConnectorEdge = forwardRef<HTMLDivElement, ConnectorEdgeProps>(
-  ({ className, end, label, start, state = "idle", ...props }, ref) => {
-    const width = Math.max(Math.abs(end.x - start.x), 32);
-    const height = Math.max(Math.abs(end.y - start.y), 32);
-    const midX = width / 2;
-    const startX = start.x <= end.x ? 4 : width - 4;
-    const endX = start.x <= end.x ? width - 4 : 4;
-    const startY = start.y <= end.y ? 4 : height - 4;
-    const endY = start.y <= end.y ? height - 4 : 4;
-    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+const ConnectorEdge = ({
+  className,
+  end,
+  label,
+  ref,
+  start,
+  state = "idle",
+  ...props
+}: ConnectorEdgeProps & React.RefAttributes<HTMLDivElement>) => {
+  const width = Math.max(Math.abs(end.x - start.x), 32);
+  const height = Math.max(Math.abs(end.y - start.y), 32);
+  const midX = width / 2;
+  const startX = start.x <= end.x ? 4 : width - 4;
+  const endX = start.x <= end.x ? width - 4 : 4;
+  const startY = start.y <= end.y ? 4 : height - 4;
+  const endY = start.y <= end.y ? height - 4 : 4;
+  const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
 
-    const style = {
-      height,
-      width,
-    } satisfies CSSProperties;
+  const style = {
+    height,
+    width,
+  } satisfies CSSProperties;
 
-    return (
-      <div
-        className={cn("relative inline-flex", className)}
-        ref={ref}
-        style={style}
-        {...props}
+  return (
+    <div
+      className={cn("relative inline-flex", className)}
+      ref={ref}
+      style={style}
+      {...props}
+    >
+      <svg
+        className="overflow-visible"
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
       >
-        <svg
-          className="overflow-visible"
-          height={height}
-          viewBox={`0 0 ${width} ${height}`}
-          width={width}
+        <path
+          className={cn("fill-none stroke-[2.5]", strokeClasses[state])}
+          d={path}
+          strokeDasharray={state === "blocked" ? "4 4" : undefined}
+          strokeLinecap="round"
+        />
+      </svg>
+      {label ? (
+        <EdgeLabel
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          emphasis={state === "active" ? "active" : "subtle"}
         >
-          <path
-            className={cn("fill-none stroke-[2.5]", strokeClasses[state])}
-            d={path}
-            strokeDasharray={state === "blocked" ? "4 4" : undefined}
-            strokeLinecap="round"
-          />
-        </svg>
-        {label ? (
-          <EdgeLabel
-            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            emphasis={state === "active" ? "active" : "subtle"}
-          >
-            {label}
-          </EdgeLabel>
-        ) : null}
-      </div>
-    );
-  },
-);
+          {label}
+        </EdgeLabel>
+      ) : null}
+    </div>
+  );
+};
 
 ConnectorEdge.displayName = "ConnectorEdge";
-
 export { ConnectorEdge };
diff --git a/packages/ui/src/components/context-lens/context-lens.tsx b/packages/ui/src/components/context-lens/context-lens.tsx
index 615bab8d..84dcd182 100644
--- a/packages/ui/src/components/context-lens/context-lens.tsx
+++ b/packages/ui/src/components/context-lens/context-lens.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef, useId } from "react";
+import { type ComponentPropsWithoutRef, useId } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -79,68 +79,68 @@ const safeRadius = (value: number): number => (value < 0 ? 0 : value);
  *
  * @public
  */
-export const ContextLens = forwardRef<SVGSVGElement, ContextLensProps>(
-  (props, ref) => {
-    const { className, focus, labels, opacity = 0.55, ...rest } = props;
-    const maskId = useId();
-    if (!focus) {
-      return null;
-    }
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const inner = safeRadius(focus.inner);
-    const outer = safeRadius(Math.max(focus.outer, inner));
-    const fillOpacity = clamp01(opacity);
-    return (
-      <svg
-        aria-hidden="true"
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute inset-0 z-20 h-full w-full",
-          className,
-        )}
-        data-context-lens
-        ref={ref}
-        {...rest}
-      >
-        <defs>
-          <radialGradient
-            cx={focus.cx}
-            cy={focus.cy}
-            data-context-lens-gradient
-            gradientUnits="userSpaceOnUse"
-            id={maskId}
-            r={outer === 0 ? 1 : outer}
-          >
-            <stop offset="0%" stopColor="black" stopOpacity={0} />
-            <stop
-              offset={outer === 0 ? "100%" : `${(inner / outer) * 100}%`}
-              stopColor="black"
-              stopOpacity={0}
-            />
-            <stop offset="100%" stopColor="black" stopOpacity={1} />
-          </radialGradient>
-        </defs>
-        <rect
-          data-context-lens-dim
-          fill="black"
-          fillOpacity={fillOpacity}
-          height="100%"
-          mask={`url(#${maskId}-mask)`}
-          width="100%"
-          x={0}
-          y={0}
-        />
-        <mask id={`${maskId}-mask`}>
-          <rect fill="white" height="100%" width="100%" x={0} y={0} />
-          <circle
-            cx={focus.cx}
-            cy={focus.cy}
-            fill={`url(#${maskId})`}
-            r={outer}
+export const ContextLens = (
+  props: ContextLensProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const { className, focus, labels, opacity = 0.55, ref, ...rest } = props;
+  const maskId = useId();
+  if (!focus) {
+    return null;
+  }
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inner = safeRadius(focus.inner);
+  const outer = safeRadius(Math.max(focus.outer, inner));
+  const fillOpacity = clamp01(opacity);
+  return (
+    <svg
+      aria-hidden="true"
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute inset-0 z-20 h-full w-full",
+        className,
+      )}
+      data-context-lens
+      ref={ref}
+      {...rest}
+    >
+      <defs>
+        <radialGradient
+          cx={focus.cx}
+          cy={focus.cy}
+          data-context-lens-gradient
+          gradientUnits="userSpaceOnUse"
+          id={maskId}
+          r={outer === 0 ? 1 : outer}
+        >
+          <stop offset="0%" stopColor="black" stopOpacity={0} />
+          <stop
+            offset={outer === 0 ? "100%" : `${(inner / outer) * 100}%`}
+            stopColor="black"
+            stopOpacity={0}
           />
-        </mask>
-      </svg>
-    );
-  },
-);
+          <stop offset="100%" stopColor="black" stopOpacity={1} />
+        </radialGradient>
+      </defs>
+      <rect
+        data-context-lens-dim
+        fill="black"
+        fillOpacity={fillOpacity}
+        height="100%"
+        mask={`url(#${maskId}-mask)`}
+        width="100%"
+        x={0}
+        y={0}
+      />
+      <mask id={`${maskId}-mask`}>
+        <rect fill="white" height="100%" width="100%" x={0} y={0} />
+        <circle
+          cx={focus.cx}
+          cy={focus.cy}
+          fill={`url(#${maskId})`}
+          r={outer}
+        />
+      </mask>
+    </svg>
+  );
+};
 ContextLens.displayName = "ContextLens";
diff --git a/packages/ui/src/components/context-menu/context-menu.tsx b/packages/ui/src/components/context-menu/context-menu.tsx
index d39c3519..ac5d7eae 100644
--- a/packages/ui/src/components/context-menu/context-menu.tsx
+++ b/packages/ui/src/components/context-menu/context-menu.tsx
@@ -1,30 +1,26 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-
 const ContextMenu = ContextMenuPrimitive.Root;
-
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
 const ContextMenuGroup = ContextMenuPrimitive.Group;
-
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
 const ContextMenuSub = ContextMenuPrimitive.Sub;
-
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
-const ContextMenuSubTrigger = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, ref) => (
+const ContextMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>
+  >) => (
   <ContextMenuPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -37,13 +33,18 @@ const ContextMenuSubTrigger = forwardRef<
     {children}
     <ChevronRight className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
-));
+);
+
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
-const ContextMenuSubContent = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const ContextMenuSubContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.SubContent>
+  >) => (
   <ContextMenuPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -52,13 +53,18 @@ const ContextMenuSubContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
-const ContextMenuContent = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+const ContextMenuContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Content>
+  >) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       className={cn(
@@ -69,15 +75,20 @@ const ContextMenuContent = forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-));
+);
+
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
-const ContextMenuItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const ContextMenuItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Item>
+  >) => (
   <ContextMenuPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -87,13 +98,20 @@ const ContextMenuItem = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
-const ContextMenuCheckboxItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, ref) => (
+const ContextMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>
+  >) => (
   <ContextMenuPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -110,14 +128,20 @@ const ContextMenuCheckboxItem = forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-));
+);
+
 ContextMenuCheckboxItem.displayName =
   ContextMenuPrimitive.CheckboxItem.displayName;
 
-const ContextMenuRadioItem = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ children, className, ...props }, ref) => (
+const ContextMenuRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>
+  >) => (
   <ContextMenuPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -133,15 +157,20 @@ const ContextMenuRadioItem = forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-));
+);
+
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
-const ContextMenuLabel = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const ContextMenuLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Label>
+  >) => (
   <ContextMenuPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
@@ -151,19 +180,25 @@ const ContextMenuLabel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
-const ContextMenuSeparator = forwardRef<
-  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const ContextMenuSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ContextMenuPrimitive.Separator>
+  >) => (
   <ContextMenuPrimitive.Separator
     className={cn("-m-1 h-px bg-border", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
@@ -180,6 +215,7 @@ const ContextMenuShortcut = ({
     />
   );
 };
+
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
diff --git a/packages/ui/src/components/conversation-thread/conversation-thread.tsx b/packages/ui/src/components/conversation-thread/conversation-thread.tsx
index 95b14a85..17cff5ec 100644
--- a/packages/ui/src/components/conversation-thread/conversation-thread.tsx
+++ b/packages/ui/src/components/conversation-thread/conversation-thread.tsx
@@ -2,11 +2,10 @@
 
 import {
   createContext,
-  forwardRef,
   type ReactNode,
   type RefObject,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -103,7 +102,7 @@ const ConversationThreadContext =
   createContext<ConversationThreadContextValue | null>(null);
 
 function useConversationThreadContext(): ConversationThreadContextValue {
-  const ctx = useContext(ConversationThreadContext);
+  const ctx = use(ConversationThreadContext);
   if (!ctx) {
     throw new Error(
       "ConversationThread compound components must be used within <ConversationThread>",
@@ -282,78 +281,72 @@ function useConversationScroll(
  * </ConversationThread>
  * ```
  */
-export const ConversationThread = forwardRef<
-  HTMLDivElement,
-  ConversationThreadProps
->(
-  (
-    {
-      children,
-      className,
-      isStreaming = false,
+export const ConversationThread = ({
+  children,
+  className,
+  isStreaming = false,
+  messages,
+  onFeedback,
+  onRetry,
+  onSend,
+  ref: reference,
+}: ConversationThreadProps & React.RefAttributes<HTMLDivElement>) => {
+  const {
+    handleScroll,
+    isAtBottom,
+    messagesEndRef,
+    scrollContainerRef,
+    scrollToBottom,
+  } = useConversationScroll(messages, isStreaming);
+
+  const contextValue = useMemo<ConversationThreadContextValue>(
+    () => ({
+      handleScroll,
+      isAtBottom,
+      isStreaming,
       messages,
+      messagesEndRef,
       onFeedback,
       onRetry,
       onSend,
-    },
-    reference,
-  ) => {
-    const {
+      scrollContainerRef,
+      scrollToBottom,
+    }),
+    [
       handleScroll,
       isAtBottom,
+      isStreaming,
+      messages,
       messagesEndRef,
+      onFeedback,
+      onRetry,
+      onSend,
       scrollContainerRef,
       scrollToBottom,
-    } = useConversationScroll(messages, isStreaming);
-
-    const contextValue = useMemo<ConversationThreadContextValue>(
-      () => ({
-        handleScroll,
-        isAtBottom,
-        isStreaming,
-        messages,
-        messagesEndRef,
-        onFeedback,
-        onRetry,
-        onSend,
-        scrollContainerRef,
-        scrollToBottom,
-      }),
-      [
-        handleScroll,
-        isAtBottom,
-        isStreaming,
-        messages,
-        messagesEndRef,
-        onFeedback,
-        onRetry,
-        onSend,
-        scrollContainerRef,
-        scrollToBottom,
-      ],
-    );
+    ],
+  );
 
-    return (
-      <ConversationThreadContext.Provider value={contextValue}>
-        <div
-          className={cn("flex h-full flex-col overflow-hidden", className)}
-          ref={reference}
-        >
-          {children}
-        </div>
-      </ConversationThreadContext.Provider>
-    );
-  },
-);
+  return (
+    <ConversationThreadContext.Provider value={contextValue}>
+      <div
+        className={cn("flex h-full flex-col overflow-hidden", className)}
+        ref={reference}
+      >
+        {children}
+      </div>
+    </ConversationThreadContext.Provider>
+  );
+};
 ConversationThread.displayName = "ConversationThread";
 
 // ---- Compound components ----
 
 /** Optional header slot, rendered above the message list. */
-export const ConversationHeader = forwardRef<
-  HTMLDivElement,
-  ConversationHeaderProps
->(({ children, className }, reference) => {
+export const ConversationHeader = ({
+  children,
+  className,
+  ref: reference,
+}: ConversationHeaderProps & React.RefAttributes<HTMLDivElement>) => {
   return (
     <div
       className={cn("flex shrink-0 items-center border-b px-4 py-3", className)}
@@ -362,14 +355,15 @@ export const ConversationHeader = forwardRef<
       {children}
     </div>
   );
-});
+};
 ConversationHeader.displayName = "ConversationHeader";
 
 /** Title text for use inside ConversationHeader. */
-export const ConversationTitle = forwardRef<
-  HTMLHeadingElement,
-  ConversationTitleProps
->(({ children, className }, reference) => {
+export const ConversationTitle = ({
+  children,
+  className,
+  ref: reference,
+}: ConversationTitleProps & React.RefAttributes<HTMLHeadingElement>) => {
   return (
     <h2
       className={cn("text-sm font-semibold leading-none", className)}
@@ -378,7 +372,7 @@ export const ConversationTitle = forwardRef<
       {children}
     </h2>
   );
-});
+};
 ConversationTitle.displayName = "ConversationTitle";
 
 /**
@@ -386,10 +380,11 @@ ConversationTitle.displayName = "ConversationTitle";
  * Pass ConversationEmpty, ConversationScrollButton, and ConversationLoading as children —
  * the component renders these as absolute overlays that read state from context.
  */
-export const ConversationMessages = forwardRef<
-  HTMLDivElement,
-  ConversationMessagesProps
->(({ children, className }, reference) => {
+export const ConversationMessages = ({
+  children,
+  className,
+  ref: reference,
+}: ConversationMessagesProps & React.RefAttributes<HTMLDivElement>) => {
   const { handleScroll, messages, messagesEndRef, scrollContainerRef } =
     useConversationThreadContext();
 
@@ -413,17 +408,18 @@ export const ConversationMessages = forwardRef<
       {children}
     </div>
   );
-});
+};
 ConversationMessages.displayName = "ConversationMessages";
 
 /**
  * Shown when the message list is empty. Hides automatically once messages exist.
  * Renders as a centered overlay — pass ConversationSuggestions or custom content as children.
  */
-export const ConversationEmpty = forwardRef<
-  HTMLDivElement,
-  ConversationEmptyProps
->(({ children, className }, reference) => {
+export const ConversationEmpty = ({
+  children,
+  className,
+  ref: reference,
+}: ConversationEmptyProps & React.RefAttributes<HTMLDivElement>) => {
   const { messages } = useConversationThreadContext();
 
   if (messages.length > 0) return null;
@@ -441,14 +437,15 @@ export const ConversationEmpty = forwardRef<
       </div>
     </div>
   );
-});
+};
 ConversationEmpty.displayName = "ConversationEmpty";
 
 /** Suggested prompt chips displayed in the empty state. Calls onSend when clicked. */
-export const ConversationSuggestions = forwardRef<
-  HTMLDivElement,
-  ConversationSuggestionsProps
->(({ className, suggestions = [] }, reference) => {
+export const ConversationSuggestions = ({
+  className,
+  ref: reference,
+  suggestions = [],
+}: ConversationSuggestionsProps & React.RefAttributes<HTMLDivElement>) => {
   const { onSend } = useConversationThreadContext();
 
   return (
@@ -468,14 +465,14 @@ export const ConversationSuggestions = forwardRef<
       ))}
     </div>
   );
-});
+};
 ConversationSuggestions.displayName = "ConversationSuggestions";
 
 /** Floating button that appears when the user scrolls up, to jump back to the bottom. */
-export const ConversationScrollButton = forwardRef<
-  HTMLButtonElement,
-  ConversationScrollButtonProps
->(({ className }, reference) => {
+export const ConversationScrollButton = ({
+  className,
+  ref: reference,
+}: ConversationScrollButtonProps & React.RefAttributes<HTMLButtonElement>) => {
   const { isAtBottom, scrollToBottom } = useConversationThreadContext();
 
   if (isAtBottom) return null;
@@ -494,17 +491,17 @@ export const ConversationScrollButton = forwardRef<
       <ArrowDown className="size-4" />
     </button>
   );
-});
+};
 ConversationScrollButton.displayName = "ConversationScrollButton";
 
 /**
  * Typing indicator shown while the assistant is streaming a response.
  * Visible when isStreaming is true and the last message role is "assistant".
  */
-export const ConversationLoading = forwardRef<
-  HTMLDivElement,
-  ConversationLoadingProps
->(({ className }, reference) => {
+export const ConversationLoading = ({
+  className,
+  ref: reference,
+}: ConversationLoadingProps & React.RefAttributes<HTMLDivElement>) => {
   const { isStreaming, messages } = useConversationThreadContext();
   const lastMessage = messages.at(-1);
 
@@ -531,5 +528,5 @@ export const ConversationLoading = forwardRef<
       <span className="size-2 animate-bounce rounded-full bg-muted-foreground" />
     </div>
   );
-});
+};
 ConversationLoading.displayName = "ConversationLoading";
diff --git a/packages/ui/src/components/cookie-consent/cookie-consent.tsx b/packages/ui/src/components/cookie-consent/cookie-consent.tsx
index 55876beb..a1b525a3 100644
--- a/packages/ui/src/components/cookie-consent/cookie-consent.tsx
+++ b/packages/ui/src/components/cookie-consent/cookie-consent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
@@ -58,122 +58,87 @@ export type CookieConsentProps = {
  * Positioned in bottom-left by default with minimal, clean design.
  * Shows accept button prominently, with optional decline and settings link.
  */
-const CookieConsent = forwardRef<HTMLDivElement, CookieConsentProps>(
-  (
-    {
-      acceptText = "Accept",
-      className,
-      declineText,
-      message = "This site uses cookies to improve your experience.",
-      onAccept,
-      onDecline,
-      onOpenChange,
-      open = true,
-      position,
-      settingsHref,
-      settingsText = "Learn more",
-      showCloseButton = false,
-      ...props
-    },
-    reference,
-  ) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+const CookieConsent = ({
+  acceptText = "Accept",
+  className,
+  declineText,
+  message = "This site uses cookies to improve your experience.",
+  onAccept,
+  onDecline,
+  onOpenChange,
+  open = true,
+  position,
+  ref: reference,
+  settingsHref,
+  settingsText = "Learn more",
+  showCloseButton = false,
+  ...props
+}: CookieConsentProps & React.RefAttributes<HTMLDivElement>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
 
-    // Handle visibility with animation
-    useEffect(() => {
-      if (open) {
-        // Small delay for mount animation
-        const timer = setTimeout(() => {
-          setIsVisible(true);
-        }, 50);
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-      const rafId = requestAnimationFrame(() => {
-        setIsVisible(false);
-      });
+  // Handle visibility with animation
+  useEffect(() => {
+    if (open) {
+      // Small delay for mount animation
+      const timer = setTimeout(() => {
+        setIsVisible(true);
+      }, 50);
       return () => {
-        cancelAnimationFrame(rafId);
+        clearTimeout(timer);
       };
-    }, [open]);
-
-    const handleClose = useCallback(() => {
-      setIsAnimatingOut(true);
-      setTimeout(() => {
-        setIsAnimatingOut(false);
-        onOpenChange?.(false);
-      }, 200);
-    }, [onOpenChange]);
+    }
+    const rafId = requestAnimationFrame(() => {
+      setIsVisible(false);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [open]);
 
-    const handleAccept = useCallback(() => {
-      onAccept?.();
-      handleClose();
-    }, [onAccept, handleClose]);
+  const handleClose = useCallback(() => {
+    setIsAnimatingOut(true);
+    setTimeout(() => {
+      setIsAnimatingOut(false);
+      onOpenChange?.(false);
+    }, 200);
+  }, [onOpenChange]);
 
-    const handleDecline = useCallback(() => {
-      onDecline?.();
-      handleClose();
-    }, [onDecline, handleClose]);
+  const handleAccept = useCallback(() => {
+    onAccept?.();
+    handleClose();
+  }, [onAccept, handleClose]);
 
-    if (!open && !isAnimatingOut) return null;
+  const handleDecline = useCallback(() => {
+    onDecline?.();
+    handleClose();
+  }, [onDecline, handleClose]);
 
-    return (
-      <div
-        aria-label="Cookie consent"
-        aria-live="polite"
-        className={cn(
-          cookieConsentVariants({ position }),
-          // Animation states
-          isVisible && !isAnimatingOut
-            ? "translate-y-0 opacity-100"
-            : "translate-y-4 opacity-0",
-          className,
-        )}
-        ref={reference}
-        role="dialog"
-        {...props}
-      >
-        {/* Mobile: stacked layout */}
-        <div className="flex flex-col gap-3 sm:hidden">
-          <p className="text-sm text-muted-foreground">{message}</p>
-          <div className="flex items-center gap-2">
-            {settingsHref ? (
-              <a
-                className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
-                href={settingsHref}
-              >
-                {settingsText}
-              </a>
-            ) : null}
-            {declineText ? (
-              <Button
-                onClick={handleDecline}
-                size="sm"
-                type="button"
-                variant="ghost"
-              >
-                {declineText}
-              </Button>
-            ) : null}
-            <Button
-              onClick={handleAccept}
-              size="sm"
-              type="button"
-              variant="default"
-            >
-              {acceptText}
-            </Button>
-          </div>
-        </div>
+  if (!open && !isAnimatingOut) return null;
 
-        {/* Desktop: single line, all inline */}
-        <div className="hidden sm:flex sm:items-center sm:gap-3">
-          <p className="text-sm text-muted-foreground">{message}</p>
+  return (
+    <div
+      aria-label="Cookie consent"
+      aria-live="polite"
+      className={cn(
+        cookieConsentVariants({ position }),
+        // Animation states
+        isVisible && !isAnimatingOut
+          ? "translate-y-0 opacity-100"
+          : "translate-y-4 opacity-0",
+        className,
+      )}
+      ref={reference}
+      role="dialog"
+      {...props}
+    >
+      {/* Mobile: stacked layout */}
+      <div className="flex flex-col gap-3 sm:hidden">
+        <p className="text-sm text-muted-foreground">{message}</p>
+        <div className="flex items-center gap-2">
           {settingsHref ? (
             <a
-              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground whitespace-nowrap"
+              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
               href={settingsHref}
             >
               {settingsText}
@@ -181,8 +146,8 @@ const CookieConsent = forwardRef<HTMLDivElement, CookieConsentProps>(
           ) : null}
           {declineText ? (
             <Button
-              className="h-7 px-3 text-xs"
               onClick={handleDecline}
+              size="sm"
               type="button"
               variant="ghost"
             >
@@ -190,29 +155,60 @@ const CookieConsent = forwardRef<HTMLDivElement, CookieConsentProps>(
             </Button>
           ) : null}
           <Button
-            className="h-7 px-3 text-xs"
             onClick={handleAccept}
+            size="sm"
             type="button"
             variant="default"
           >
             {acceptText}
           </Button>
         </div>
+      </div>
 
-        {showCloseButton ? (
-          <button
-            aria-label="Close cookie consent"
-            className="absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground"
-            onClick={handleClose}
+      {/* Desktop: single line, all inline */}
+      <div className="hidden sm:flex sm:items-center sm:gap-3">
+        <p className="text-sm text-muted-foreground">{message}</p>
+        {settingsHref ? (
+          <a
+            className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground whitespace-nowrap"
+            href={settingsHref}
+          >
+            {settingsText}
+          </a>
+        ) : null}
+        {declineText ? (
+          <Button
+            className="h-7 px-3 text-xs"
+            onClick={handleDecline}
             type="button"
+            variant="ghost"
           >
-            <X className="size-3" />
-          </button>
+            {declineText}
+          </Button>
         ) : null}
+        <Button
+          className="h-7 px-3 text-xs"
+          onClick={handleAccept}
+          type="button"
+          variant="default"
+        >
+          {acceptText}
+        </Button>
       </div>
-    );
-  },
-);
+
+      {showCloseButton ? (
+        <button
+          aria-label="Close cookie consent"
+          className="absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground"
+          onClick={handleClose}
+          type="button"
+        >
+          <X className="size-3" />
+        </button>
+      ) : null}
+    </div>
+  );
+};
 CookieConsent.displayName = "CookieConsent";
 
 export { CookieConsent, cookieConsentVariants };
diff --git a/packages/ui/src/components/copy-button/copy-button.tsx b/packages/ui/src/components/copy-button/copy-button.tsx
index 7d8bffd7..c738b0f7 100644
--- a/packages/ui/src/components/copy-button/copy-button.tsx
+++ b/packages/ui/src/components/copy-button/copy-button.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type MouseEvent as ReactMouseEvent,
   type ReactElement,
   type ReactNode,
@@ -166,65 +165,46 @@ type TriggerProps = Omit<
   onClickHandler: (event: ReactMouseEvent<HTMLButtonElement>) => void;
 };
 
-const ButtonTrigger = forwardRef<HTMLButtonElement, TriggerProps>(
-  (
-    {
-      accessibleLabel,
-      className,
-      copied,
-      copiedText,
-      iconClassName,
-      label = "Copy",
-      onClick: _onClick,
-      onClickHandler,
-      value: _value,
-      variant = "icon",
-      ...rest
-    },
-    ref,
-  ) => {
-    if (variant === "button") {
-      return (
-        <Button
-          aria-label={accessibleLabel}
-          className={cn(className)}
-          onClick={onClickHandler}
-          ref={ref}
-          size="sm"
-          type="button"
-          variant="outline"
-          {...rest}
-        >
-          <CopyIcon className={iconClassName} copied={copied} size="sm" />
-          <span>{copied ? copiedText : label}</span>
-        </Button>
-      );
-    }
-
-    if (variant === "inline") {
-      return (
-        <Button
-          aria-label={accessibleLabel}
-          className={cn(
-            "size-6 align-middle text-muted-foreground hover:text-foreground",
-            className,
-          )}
-          onClick={onClickHandler}
-          ref={ref}
-          size="icon"
-          type="button"
-          variant="ghost"
-          {...rest}
-        >
-          <CopyIcon className={iconClassName} copied={copied} size="xs" />
-        </Button>
-      );
-    }
+const ButtonTrigger = ({
+  accessibleLabel,
+  className,
+  copied,
+  copiedText,
+  iconClassName,
+  label = "Copy",
+  onClick: _onClick,
+  onClickHandler,
+  ref,
+  value: _value,
+  variant = "icon",
+  ...rest
+}: TriggerProps & React.RefAttributes<HTMLButtonElement>) => {
+  if (variant === "button") {
+    return (
+      <Button
+        aria-label={accessibleLabel}
+        className={cn(className)}
+        onClick={onClickHandler}
+        ref={ref}
+        size="sm"
+        type="button"
+        variant="outline"
+        {...rest}
+      >
+        <CopyIcon className={iconClassName} copied={copied} size="sm" />
+        <span>{copied ? copiedText : label}</span>
+      </Button>
+    );
+  }
 
+  if (variant === "inline") {
     return (
       <Button
         aria-label={accessibleLabel}
-        className={cn("size-8", className)}
+        className={cn(
+          "size-6 align-middle text-muted-foreground hover:text-foreground",
+          className,
+        )}
         onClick={onClickHandler}
         ref={ref}
         size="icon"
@@ -232,11 +212,26 @@ const ButtonTrigger = forwardRef<HTMLButtonElement, TriggerProps>(
         variant="ghost"
         {...rest}
       >
-        <CopyIcon className={iconClassName} copied={copied} size="sm" />
+        <CopyIcon className={iconClassName} copied={copied} size="xs" />
       </Button>
     );
-  },
-);
+  }
+
+  return (
+    <Button
+      aria-label={accessibleLabel}
+      className={cn("size-8", className)}
+      onClick={onClickHandler}
+      ref={ref}
+      size="icon"
+      type="button"
+      variant="ghost"
+      {...rest}
+    >
+      <CopyIcon className={iconClassName} copied={copied} size="sm" />
+    </Button>
+  );
+};
 ButtonTrigger.displayName = "CopyButton.Trigger";
 
 /**
@@ -255,71 +250,67 @@ ButtonTrigger.displayName = "CopyButton.Trigger";
  *
  * @public
  */
-export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
-  (
-    {
-      "aria-label": ariaLabelOverride,
-      copiedLabel = "Copied!",
-      label = "Copy",
-      onClick,
-      showTooltip = true,
-      timeout = FALLBACK_TIMEOUT_MS,
-      value,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { copied, copy } = useCopyToClipboard({ timeout });
-
-    const handleClick = useCallback(
-      (event: ReactMouseEvent<HTMLButtonElement>) => {
-        onClick?.(event);
-        if (event.defaultPrevented) return;
-        void copy(value);
-      },
-      [copy, onClick, value],
-    );
+export const CopyButton = ({
+  "aria-label": ariaLabelOverride,
+  copiedLabel = "Copied!",
+  label = "Copy",
+  onClick,
+  ref,
+  showTooltip = true,
+  timeout = FALLBACK_TIMEOUT_MS,
+  value,
+  ...rest
+}: CopyButtonProps & React.RefAttributes<HTMLButtonElement>) => {
+  const { copied, copy } = useCopyToClipboard({ timeout });
 
-    const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
-    const tooltipText = copied ? copiedLabel : label;
+  const handleClick = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      void copy(value);
+    },
+    [copy, onClick, value],
+  );
 
-    const trigger: ReactElement = (
-      <ButtonTrigger
-        {...rest}
-        accessibleLabel={accessibleLabel}
-        copied={copied}
-        copiedText={copiedLabel}
-        label={label}
-        onClickHandler={handleClick}
-        ref={ref}
-        value={value}
-      />
-    );
+  const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
+  const tooltipText = copied ? copiedLabel : label;
 
-    const liveRegion = (
-      <span aria-live="polite" className="sr-only" role="status">
-        {copied ? copiedLabel : ""}
-      </span>
-    );
+  const trigger: ReactElement = (
+    <ButtonTrigger
+      {...rest}
+      accessibleLabel={accessibleLabel}
+      copied={copied}
+      copiedText={copiedLabel}
+      label={label}
+      onClickHandler={handleClick}
+      ref={ref}
+      value={value}
+    />
+  );
 
-    if (!showTooltip) {
-      return (
-        <>
-          {trigger}
-          {liveRegion}
-        </>
-      );
-    }
+  const liveRegion = (
+    <span aria-live="polite" className="sr-only" role="status">
+      {copied ? copiedLabel : ""}
+    </span>
+  );
 
+  if (!showTooltip) {
     return (
-      <TooltipProvider delayDuration={200}>
-        <Tooltip>
-          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
-          <TooltipContent>{tooltipText}</TooltipContent>
-        </Tooltip>
+      <>
+        {trigger}
         {liveRegion}
-      </TooltipProvider>
+      </>
     );
-  },
-);
+  }
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>
+      {liveRegion}
+    </TooltipProvider>
+  );
+};
 CopyButton.displayName = "CopyButton";
diff --git a/packages/ui/src/components/countdown-timer/countdown-timer.tsx b/packages/ui/src/components/countdown-timer/countdown-timer.tsx
index 579a10d1..d15f324f 100644
--- a/packages/ui/src/components/countdown-timer/countdown-timer.tsx
+++ b/packages/ui/src/components/countdown-timer/countdown-timer.tsx
@@ -192,64 +192,54 @@ function TimerProgress({
   );
 }
 
-export const CountdownTimer = React.forwardRef<
-  HTMLDivElement,
-  CountdownTimerProps
->(
-  (
-    {
-      className,
-      deadline,
-      description,
-      now,
-      startedAt,
-      tickMs = 1000,
-      title = "Countdown timer",
-      warningThresholdMs = 15 * 60 * 1000,
-      ...props
-    },
-    ref,
-  ) => {
-    const deadlineDate = React.useMemo(
-      () => normalizeDate(deadline),
-      [deadline],
-    );
-    const startedAtDate = React.useMemo(
-      () => (startedAt ? normalizeDate(startedAt) : undefined),
-      [startedAt],
-    );
-    const liveNow = useLiveDate(now, tickMs);
-    const remainingMs = getRemainingMs(deadlineDate, liveNow);
-    const status = getStatus(remainingMs, warningThresholdMs);
-    const segments = formatSegments(Math.abs(remainingMs));
-    const progress = getProgress(deadlineDate, liveNow, startedAtDate);
-
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="space-y-2 pb-3">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <CardTitle className="text-base">{title}</CardTitle>
-              <CardDescription>
-                {description ?? `Deadline ${formatDeadline(deadlineDate)}`}
-              </CardDescription>
-            </div>
-            <Badge variant={status.badgeVariant}>{status.label}</Badge>
+export const CountdownTimer = ({
+  className,
+  deadline,
+  description,
+  now,
+  ref,
+  startedAt,
+  tickMs = 1000,
+  title = "Countdown timer",
+  warningThresholdMs = 15 * 60 * 1000,
+  ...props
+}: CountdownTimerProps & React.RefAttributes<HTMLDivElement>) => {
+  const deadlineDate = React.useMemo(() => normalizeDate(deadline), [deadline]);
+  const startedAtDate = React.useMemo(
+    () => (startedAt ? normalizeDate(startedAt) : undefined),
+    [startedAt],
+  );
+  const liveNow = useLiveDate(now, tickMs);
+  const remainingMs = getRemainingMs(deadlineDate, liveNow);
+  const status = getStatus(remainingMs, warningThresholdMs);
+  const segments = formatSegments(Math.abs(remainingMs));
+  const progress = getProgress(deadlineDate, liveNow, startedAtDate);
+
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="space-y-2 pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <CardTitle className="text-base">{title}</CardTitle>
+            <CardDescription>
+              {description ?? `Deadline ${formatDeadline(deadlineDate)}`}
+            </CardDescription>
           </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <TimerSegments segments={segments} />
-          <TimerProgress
-            progress={progress}
-            remainingMs={remainingMs}
-            segments={segments}
-            startedAt={startedAtDate}
-            toneClassName={status.toneClassName}
-          />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+          <Badge variant={status.badgeVariant}>{status.label}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <TimerSegments segments={segments} />
+        <TimerProgress
+          progress={progress}
+          remainingMs={remainingMs}
+          segments={segments}
+          startedAt={startedAtDate}
+          toneClassName={status.toneClassName}
+        />
+      </CardContent>
+    </Card>
+  );
+};
 
 CountdownTimer.displayName = "CountdownTimer";
diff --git a/packages/ui/src/components/credit-badge/credit-badge.tsx b/packages/ui/src/components/credit-badge/credit-badge.tsx
index 6357d94f..d6b6a61c 100644
--- a/packages/ui/src/components/credit-badge/credit-badge.tsx
+++ b/packages/ui/src/components/credit-badge/credit-badge.tsx
@@ -40,28 +40,33 @@ function getStatusClasses(status: CreditBadgeStatus): string {
   }
 }
 
-export const CreditBadge = React.forwardRef<HTMLSpanElement, CreditBadgeProps>(
-  ({ amount, className, label, status, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getStatusClasses(status),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
-        <span>
-          {amount
-            ? `${amount} • ${label ?? getStatusLabel(status)}`
-            : (label ?? getStatusLabel(status))}
-        </span>
+export const CreditBadge = ({
+  amount,
+  className,
+  label,
+  ref: reference,
+  status,
+  ...props
+}: CreditBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getStatusClasses(status),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span>
+        {amount
+          ? `${amount} • ${label ?? getStatusLabel(status)}`
+          : (label ?? getStatusLabel(status))}
       </span>
-    );
-  },
-);
+    </span>
+  );
+};
 
 CreditBadge.displayName = "CreditBadge";
diff --git a/packages/ui/src/components/curriculum/curriculum.tsx b/packages/ui/src/components/curriculum/curriculum.tsx
index 7c3f42f3..2cd865c5 100644
--- a/packages/ui/src/components/curriculum/curriculum.tsx
+++ b/packages/ui/src/components/curriculum/curriculum.tsx
@@ -4,8 +4,8 @@ import {
   Children,
   createContext,
   isValidElement,
+  use,
   useCallback,
-  useContext,
   useMemo,
   useState,
 } from "react";
@@ -35,7 +35,7 @@ type CurriculumContextValue = {
 const CurriculumContext = createContext<CurriculumContextValue | null>(null);
 
 function useCurriculumContext(): CurriculumContextValue {
-  const ctx = useContext(CurriculumContext);
+  const ctx = use(CurriculumContext);
   if (!ctx) {
     throw new Error("CurriculumModule must be used within a Curriculum");
   }
diff --git a/packages/ui/src/components/data-list/data-list.tsx b/packages/ui/src/components/data-list/data-list.tsx
index bc711508..110b89c2 100644
--- a/packages/ui/src/components/data-list/data-list.tsx
+++ b/packages/ui/src/components/data-list/data-list.tsx
@@ -47,76 +47,84 @@ const DataListContext = React.createContext<DataListContextValue>({
 export type DataListProps = React.HTMLAttributes<HTMLDListElement> &
   VariantProps<typeof dataListVariants>;
 
-const DataList = React.forwardRef<HTMLDListElement, DataListProps>(
-  ({ className, density, ...props }, reference) => {
-    const resolvedDensity = density ?? "default";
-    const contextValue = React.useMemo<DataListContextValue>(
-      () => ({ density: resolvedDensity }),
-      [resolvedDensity],
-    );
-
-    return (
-      <DataListContext.Provider value={contextValue}>
-        <dl
-          className={cn(
-            dataListVariants({ density: resolvedDensity }),
-            className,
-          )}
-          ref={reference}
-          {...props}
-        />
-      </DataListContext.Provider>
-    );
-  },
-);
-
-DataList.displayName = "DataList";
-
-export type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof dataListItemVariants>;
-
-const DataListItem = React.forwardRef<HTMLDivElement, DataListItemProps>(
-  ({ className, density, ...props }, reference) => {
-    const context = React.useContext(DataListContext);
-
-    return (
-      <div
+const DataList = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}: DataListProps & React.RefAttributes<HTMLDListElement>) => {
+  const resolvedDensity = density ?? "default";
+  const contextValue = React.useMemo<DataListContextValue>(
+    () => ({ density: resolvedDensity }),
+    [resolvedDensity],
+  );
+
+  return (
+    <DataListContext.Provider value={contextValue}>
+      <dl
         className={cn(
-          dataListItemVariants({ density: density ?? context.density }),
+          dataListVariants({ density: resolvedDensity }),
           className,
         )}
         ref={reference}
         {...props}
       />
-    );
-  },
-);
+    </DataListContext.Provider>
+  );
+};
+
+DataList.displayName = "DataList";
+
+export type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof dataListItemVariants>;
+
+const DataListItem = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}: DataListItemProps & React.RefAttributes<HTMLDivElement>) => {
+  const context = React.use(DataListContext);
+
+  return (
+    <div
+      className={cn(
+        dataListItemVariants({ density: density ?? context.density }),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    />
+  );
+};
 
 DataListItem.displayName = "DataListItem";
 
-const DataListLabel = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(({ className, ...props }, reference) => (
+const DataListLabel = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) => (
   <dt
     className={cn("text-sm font-medium text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 
 DataListLabel.displayName = "DataListLabel";
 
-const DataListValue = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(({ className, ...props }, reference) => (
+const DataListValue = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) => (
   <dd
     className={cn("m-0 text-sm leading-6 text-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 
 DataListValue.displayName = "DataListValue";
 
diff --git a/packages/ui/src/components/date-picker/date-picker.tsx b/packages/ui/src/components/date-picker/date-picker.tsx
index 73276988..c4da1d1f 100644
--- a/packages/ui/src/components/date-picker/date-picker.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.tsx
@@ -24,72 +24,68 @@ export type DatePickerProps = {
   value?: Date;
 };
 
-const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
-  (
-    {
-      buttonClassName,
-      calendarProps,
-      className,
-      onValueChange,
-      placeholder = "Pick a date",
-      value,
-    },
-    reference,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState<Date | undefined>(
-      value,
-    );
-    const selectedDate = value ?? internalValue;
+const DatePicker = ({
+  buttonClassName,
+  calendarProps,
+  className,
+  onValueChange,
+  placeholder = "Pick a date",
+  ref: reference,
+  value,
+}: DatePickerProps & React.RefAttributes<HTMLButtonElement>) => {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    value,
+  );
+  const selectedDate = value ?? internalValue;
 
-    React.useEffect(() => {
-      if (value !== undefined) {
-        setInternalValue(value);
-      }
-    }, [value]);
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
 
-    const handleSelect = (nextDate: Date | undefined) => {
-      if (value === undefined) {
-        setInternalValue(nextDate);
-      }
+  const handleSelect = (nextDate: Date | undefined) => {
+    if (value === undefined) {
+      setInternalValue(nextDate);
+    }
 
-      onValueChange?.(nextDate);
+    onValueChange?.(nextDate);
 
-      if (nextDate) {
-        setOpen(false);
-      }
-    };
+    if (nextDate) {
+      setOpen(false);
+    }
+  };
 
-    return (
-      <Popover onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <Button
-            className={cn(
-              "w-full justify-start text-left font-normal",
-              !selectedDate && "text-muted-foreground",
-              buttonClassName,
-            )}
-            ref={reference}
-            variant="outline"
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {selectedDate
-              ? defaultDateFormatter.format(selectedDate)
-              : placeholder}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent align="start" className={cn("w-auto p-0", className)}>
-          <Calendar
-            mode="single"
-            onSelect={handleSelect}
-            selected={selectedDate}
-            {...calendarProps}
-          />
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
+            buttonClassName,
+          )}
+          ref={reference}
+          variant="outline"
+        >
+          <CalendarIcon className="mr-2 size-4" />
+          {selectedDate
+            ? defaultDateFormatter.format(selectedDate)
+            : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("w-auto p-0", className)}>
+        <Calendar
+          mode="single"
+          onSelect={handleSelect}
+          selected={selectedDate}
+          {...calendarProps}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker };
diff --git a/packages/ui/src/components/dialog/dialog.tsx b/packages/ui/src/components/dialog/dialog.tsx
index 6dc6574d..96213c9e 100644
--- a/packages/ui/src/components/dialog/dialog.tsx
+++ b/packages/ui/src/components/dialog/dialog.tsx
@@ -15,10 +15,12 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, reference) => (
+const DialogOverlay = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Overlay>>) => (
   <DialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -27,13 +29,16 @@ const DialogOverlay = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ children, className, ...props }, reference) => (
+const DialogContent = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Content>>) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -51,7 +56,7 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -82,10 +87,12 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, reference) => (
+const DialogTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof DialogPrimitive.Title>>) => (
   <DialogPrimitive.Title
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
@@ -94,19 +101,23 @@ const DialogTitle = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, reference) => (
+const DialogDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DialogPrimitive.Description>
+  >) => (
   <DialogPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={reference}
     {...props}
   />
-));
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
diff --git a/packages/ui/src/components/document-sibling-nav/document-sibling-nav.tsx b/packages/ui/src/components/document-sibling-nav/document-sibling-nav.tsx
index d75bd7b8..5640475d 100644
--- a/packages/ui/src/components/document-sibling-nav/document-sibling-nav.tsx
+++ b/packages/ui/src/components/document-sibling-nav/document-sibling-nav.tsx
@@ -1,11 +1,9 @@
-import {
-  type AnchorHTMLAttributes,
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
+import type {
+  AnchorHTMLAttributes,
+  ComponentPropsWithoutRef,
+  ReactNode,
+} from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -167,10 +165,15 @@ function buildAriaLabel(
  *
  * @public
  */
-export const DocumentSiblingNav = forwardRef<
-  HTMLElement,
-  DocumentSiblingNavProps
->(({ className, labels, next, previous, variant, ...rest }, ref) => {
+export const DocumentSiblingNav = ({
+  className,
+  labels,
+  next,
+  previous,
+  ref,
+  variant,
+  ...rest
+}: DocumentSiblingNavProps & React.RefAttributes<HTMLElement>) => {
   if (!previous && !next) return null;
 
   const resolvedVariant: DocumentSiblingNavVariant = variant ?? "with-title";
@@ -211,7 +214,7 @@ export const DocumentSiblingNav = forwardRef<
       )}
     </nav>
   );
-});
+};
 DocumentSiblingNav.displayName = "DocumentSiblingNav";
 
 export { navVariants as documentSiblingNavVariants };
diff --git a/packages/ui/src/components/drawer/drawer.tsx b/packages/ui/src/components/drawer/drawer.tsx
index 757b0d17..eba39a0f 100644
--- a/packages/ui/src/components/drawer/drawer.tsx
+++ b/packages/ui/src/components/drawer/drawer.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "../../lib/utils";
@@ -15,30 +12,34 @@ const Drawer = ({
     {...props}
   />
 );
-Drawer.displayName = "Drawer";
 
+Drawer.displayName = "Drawer";
 const DrawerTrigger = DrawerPrimitive.Trigger;
-
 const DrawerPortal = DrawerPrimitive.Portal;
-
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DrawerOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Overlay>>) => (
   <DrawerPrimitive.Overlay
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ children, className, ...props }, ref) => (
+const DrawerContent = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Content>>) => (
   <DrawerPortal>
     <DrawerOverlay />
     <DrawerPrimitive.Content
@@ -53,7 +54,8 @@ const DrawerContent = forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-));
+);
+
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -65,6 +67,7 @@ const DrawerHeader = ({
     {...props}
   />
 );
+
 DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
@@ -76,12 +79,15 @@ const DrawerFooter = ({
     {...props}
   />
 );
+
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DrawerTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof DrawerPrimitive.Title>>) => (
   <DrawerPrimitive.Title
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
@@ -90,19 +96,25 @@ const DrawerTitle = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DrawerDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DrawerPrimitive.Description>
+  >) => (
   <DrawerPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 165a922d..edc1b39a 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -18,12 +18,17 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, reference) => (
+const DropdownMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>
+  >) => (
   <DropdownMenuPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
@@ -36,14 +41,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <span className="ml-auto text-xs">›</span>
   </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, reference) => (
+const DropdownMenuSubContent = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>
+  >) => (
   <DropdownMenuPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -52,14 +61,19 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, reference) => (
+const DropdownMenuContent = ({
+  className,
+  ref: reference,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Content>
+  >) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       className={cn(
@@ -71,15 +85,19 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, reference) => (
+const DropdownMenuItem = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Item>
+  >) => (
   <DropdownMenuPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -89,13 +107,19 @@ const DropdownMenuItem = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, reference) => (
+const DropdownMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>
+  >) => (
   <DropdownMenuPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -112,14 +136,19 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ children, className, ...props }, reference) => (
+const DropdownMenuRadioItem = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>
+  >) => (
   <DropdownMenuPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -135,15 +164,19 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, reference) => (
+const DropdownMenuLabel = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Label>
+  >) => (
   <DropdownMenuPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
@@ -153,19 +186,23 @@ const DropdownMenuLabel = React.forwardRef<
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, reference) => (
+const DropdownMenuSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof DropdownMenuPrimitive.Separator>
+  >) => (
   <DropdownMenuPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={reference}
     {...props}
   />
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
diff --git a/packages/ui/src/components/edge-label/edge-label.tsx b/packages/ui/src/components/edge-label/edge-label.tsx
index ebc180f2..ac0ec6f7 100644
--- a/packages/ui/src/components/edge-label/edge-label.tsx
+++ b/packages/ui/src/components/edge-label/edge-label.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
 
 export type EdgeLabelProps = React.ComponentPropsWithoutRef<"span"> & {
@@ -14,21 +12,23 @@ const emphasisClasses: Record<
   subtle: "border-border/60 bg-background/90 text-muted-foreground",
 };
 
-const EdgeLabel = forwardRef<HTMLSpanElement, EdgeLabelProps>(
-  ({ className, emphasis = "subtle", ...props }, ref) => (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
-        emphasisClasses[emphasis],
-        className,
-      )}
-      data-emphasis={emphasis}
-      ref={ref}
-      {...props}
-    />
-  ),
+const EdgeLabel = ({
+  className,
+  emphasis = "subtle",
+  ref,
+  ...props
+}: EdgeLabelProps & React.RefAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+      emphasisClasses[emphasis],
+      className,
+    )}
+    data-emphasis={emphasis}
+    ref={ref}
+    {...props}
+  />
 );
 
 EdgeLabel.displayName = "EdgeLabel";
-
 export { EdgeLabel };
diff --git a/packages/ui/src/components/empty-state/empty-state.tsx b/packages/ui/src/components/empty-state/empty-state.tsx
index 8a948061..d2854045 100644
--- a/packages/ui/src/components/empty-state/empty-state.tsx
+++ b/packages/ui/src/components/empty-state/empty-state.tsx
@@ -1,10 +1,5 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
 import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -116,47 +111,41 @@ export type EmptyStateProps = {
  *
  * @public
  */
-export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
-  (
-    {
-      children,
-      className,
-      description,
-      icon,
-      role: roleOverride,
-      size,
-      title,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        className={cn(emptyStateVariants({ size }), className)}
-        ref={ref}
-        role={roleOverride ?? "status"}
-        {...rest}
-      >
-        {icon ? (
-          <span aria-hidden="true" className={cn(iconVariants({ size }))}>
-            {icon}
-          </span>
-        ) : null}
-        {title ? (
-          <h3 className={cn(titleVariants({ size }))}>{title}</h3>
-        ) : null}
-        {description ? (
-          <p className={cn(descriptionVariants({ size }))}>{description}</p>
-        ) : null}
-        {children ? (
-          <div className="mt-2 flex flex-wrap items-center justify-center gap-2">
-            {children}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const EmptyState = ({
+  children,
+  className,
+  description,
+  icon,
+  ref,
+  role: roleOverride,
+  size,
+  title,
+  ...rest
+}: EmptyStateProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(emptyStateVariants({ size }), className)}
+      ref={ref}
+      role={roleOverride ?? "status"}
+      {...rest}
+    >
+      {icon ? (
+        <span aria-hidden="true" className={cn(iconVariants({ size }))}>
+          {icon}
+        </span>
+      ) : null}
+      {title ? <h3 className={cn(titleVariants({ size }))}>{title}</h3> : null}
+      {description ? (
+        <p className={cn(descriptionVariants({ size }))}>{description}</p>
+      ) : null}
+      {children ? (
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-2">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+};
 EmptyState.displayName = "EmptyState";
 
 export { emptyStateVariants };
diff --git a/packages/ui/src/components/era-comparison/era-comparison.tsx b/packages/ui/src/components/era-comparison/era-comparison.tsx
index bd066d34..cce13dc2 100644
--- a/packages/ui/src/components/era-comparison/era-comparison.tsx
+++ b/packages/ui/src/components/era-comparison/era-comparison.tsx
@@ -4,9 +4,8 @@ import {
   type AnchorHTMLAttributes,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
-  useContext,
+  use,
   useMemo,
 } from "react";
 
@@ -72,7 +71,7 @@ const EraColumnContext = createContext<EraColumnContextValue>({
  * @public
  */
 export function useEraColumnColor(): EraColor {
-  return useContext(EraColumnContext).color;
+  return use(EraColumnContext).color;
 }
 
 /**
@@ -107,19 +106,22 @@ export type EraComparisonProps = ComponentPropsWithoutRef<"section">;
  *
  * @public
  */
-export const EraComparison = forwardRef<HTMLElement, EraComparisonProps>(
-  ({ children, className, ...rest }, ref) => (
-    <section
-      className={cn(
-        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
-        className,
-      )}
-      ref={ref}
-      {...rest}
-    >
-      {children}
-    </section>
-  ),
+export const EraComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: EraComparisonProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+      className,
+    )}
+    ref={ref}
+    {...rest}
+  >
+    {children}
+  </section>
 );
 EraComparison.displayName = "EraComparison";
 
@@ -188,44 +190,45 @@ function ColumnHeader({
  *
  * @public
  */
-export const EraColumn = forwardRef<HTMLElement, EraColumnProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "neutral",
-      name,
-      period,
-      region,
-      ...rest
-    } = props;
-    const contextValue = useMemo<EraColumnContextValue>(
-      () => ({ color }),
-      [color],
-    );
-    return (
-      <EraColumnContext.Provider value={contextValue}>
-        <article
-          className={cn(
-            "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
-            className,
-          )}
-          data-color={color}
-          ref={ref}
-          {...rest}
-        >
-          <ColumnHeader
-            color={color}
-            name={name}
-            period={period}
-            region={region}
-          />
-          <div className="flex flex-col gap-3">{children}</div>
-        </article>
-      </EraColumnContext.Provider>
-    );
-  },
-);
+export const EraColumn = (
+  props: EraColumnProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    color = "neutral",
+    name,
+    period,
+    ref,
+    region,
+    ...rest
+  } = props;
+  const contextValue = useMemo<EraColumnContextValue>(
+    () => ({ color }),
+    [color],
+  );
+  return (
+    <EraColumnContext.Provider value={contextValue}>
+      <article
+        className={cn(
+          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+          className,
+        )}
+        data-color={color}
+        ref={ref}
+        {...rest}
+      >
+        <ColumnHeader
+          color={color}
+          name={name}
+          period={period}
+          region={region}
+        />
+        <div className="flex flex-col gap-3">{children}</div>
+      </article>
+    </EraColumnContext.Provider>
+  );
+};
 EraColumn.displayName = "EraColumn";
 
 /**
@@ -244,20 +247,24 @@ export type EraDomainProps = {
  *
  * @public
  */
-export const EraDomain = forwardRef<HTMLElement, EraDomainProps>(
-  ({ children, className, name, ...rest }, ref) => (
-    <section
-      className={cn("flex flex-col gap-2", className)}
-      data-domain={typeof name === "string" ? name : undefined}
-      ref={ref}
-      {...rest}
-    >
-      <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-        {name}
-      </h4>
-      {children}
-    </section>
-  ),
+export const EraDomain = ({
+  children,
+  className,
+  name,
+  ref,
+  ...rest
+}: EraDomainProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn("flex flex-col gap-2", className)}
+    data-domain={typeof name === "string" ? name : undefined}
+    ref={ref}
+    {...rest}
+  >
+    <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+      {name}
+    </h4>
+    {children}
+  </section>
 );
 EraDomain.displayName = "EraDomain";
 
@@ -274,21 +281,24 @@ export type EraHighlightProps = ComponentPropsWithoutRef<"p">;
  *
  * @public
  */
-export const EraHighlight = forwardRef<HTMLParagraphElement, EraHighlightProps>(
-  ({ children, className, ...rest }, ref) => {
-    const color = useEraColumnColor();
-    const palette = ERA_PALETTE[color];
-    return (
-      <p
-        className={cn("rounded-md px-2 py-1 text-sm", palette.chip, className)}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </p>
-    );
-  },
-);
+export const EraHighlight = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: EraHighlightProps & React.RefAttributes<HTMLParagraphElement>) => {
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  return (
+    <p
+      className={cn("rounded-md px-2 py-1 text-sm", palette.chip, className)}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </p>
+  );
+};
 EraHighlight.displayName = "EraHighlight";
 
 type AnchorPassthroughProps = Omit<
@@ -316,32 +326,32 @@ export type EraFigureProps = {
  *
  * @public
  */
-export const EraFigure = forwardRef<HTMLSpanElement, EraFigureProps>(
-  (props, ref) => {
-    const { anchorProps, className, href, name, ...rest } = props;
-    const color = useEraColumnColor();
-    const palette = ERA_PALETTE[color];
-    const baseClass = cn(
-      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-      palette.chip,
-      className,
-    );
-    if (href) {
-      return (
-        <a
-          className={cn(baseClass, "underline-offset-4 hover:underline")}
-          href={href}
-          {...anchorProps}
-        >
-          {name}
-        </a>
-      );
-    }
+export const EraFigure = (
+  props: EraFigureProps & React.RefAttributes<HTMLSpanElement>,
+) => {
+  const { anchorProps, className, href, name, ref, ...rest } = props;
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  const baseClass = cn(
+    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+    palette.chip,
+    className,
+  );
+  if (href) {
     return (
-      <span className={baseClass} ref={ref} {...rest}>
+      <a
+        className={cn(baseClass, "underline-offset-4 hover:underline")}
+        href={href}
+        {...anchorProps}
+      >
         {name}
-      </span>
+      </a>
     );
-  },
-);
+  }
+  return (
+    <span className={baseClass} ref={ref} {...rest}>
+      {name}
+    </span>
+  );
+};
 EraFigure.displayName = "EraFigure";
diff --git a/packages/ui/src/components/file-upload/file-upload.tsx b/packages/ui/src/components/file-upload/file-upload.tsx
index a98c96dc..9b8d9ba6 100644
--- a/packages/ui/src/components/file-upload/file-upload.tsx
+++ b/packages/ui/src/components/file-upload/file-upload.tsx
@@ -76,7 +76,7 @@ function useFileUploadState(
 }
 
 function assignInputReference(
-  reference: React.ForwardedRef<HTMLInputElement>,
+  reference: React.Ref<HTMLInputElement> | undefined,
   node: HTMLInputElement | null,
 ) {
   if (typeof reference === "function") {
@@ -217,21 +217,19 @@ function FileUploadList({
   );
 }
 
-function FileUploadComponent(
-  {
-    accept,
-    browseLabel = "Choose files",
-    className,
-    disabled,
-    dropzoneText = "Drag and drop files here, or click to browse.",
-    files,
-    helperText = "Supports one or more files.",
-    multiple = true,
-    onFilesChange,
-    ...props
-  }: FileUploadProps,
-  reference: React.ForwardedRef<HTMLInputElement>,
-) {
+function FileUploadComponent({
+  accept,
+  browseLabel = "Choose files",
+  className,
+  disabled,
+  dropzoneText = "Drag and drop files here, or click to browse.",
+  files,
+  helperText = "Supports one or more files.",
+  multiple = true,
+  onFilesChange,
+  ref: reference,
+  ...props
+}: FileUploadProps & React.RefAttributes<HTMLInputElement>) {
   const inputReference = React.useRef<HTMLInputElement | null>(null);
   const [isDragging, setIsDragging] = React.useState(false);
   const { addFiles, removeFile, resolvedFiles } = useFileUploadState(
@@ -280,7 +278,9 @@ function FileUploadComponent(
   );
 }
 
-const FileUpload = React.forwardRef(FileUploadComponent);
+const FileUpload = FileUploadComponent as typeof FileUploadComponent & {
+  displayName?: string;
+};
 FileUpload.displayName = "FileUpload";
 
 export { FileUpload };
diff --git a/packages/ui/src/components/floating-toolbar/floating-toolbar.tsx b/packages/ui/src/components/floating-toolbar/floating-toolbar.tsx
index 8110dd0b..e0eaf775 100644
--- a/packages/ui/src/components/floating-toolbar/floating-toolbar.tsx
+++ b/packages/ui/src/components/floating-toolbar/floating-toolbar.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -91,54 +87,54 @@ export type FloatingToolbarProps = {
  *
  * @public
  */
-export const FloatingToolbar = forwardRef<HTMLDivElement, FloatingToolbarProps>(
-  (props, ref) => {
-    const { actions, className, labels, x, y, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
-          className,
-        )}
-        data-floating-toolbar
-        ref={ref}
-        role="toolbar"
-        style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
-        {...rest}
-      >
-        {actions.map((action) => {
-          const variant = action.variant ?? "ghost";
-          const handleClick = (): void => {
-            action.onActivate();
-          };
-          return (
-            <button
-              aria-label={action.ariaLabel ?? undefined}
-              className={cn(
-                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                VARIANT_CLASSES[variant],
-                action.disabled ? "cursor-not-allowed opacity-50" : "",
-              )}
-              data-action-id={action.id}
-              data-variant={variant}
-              disabled={action.disabled}
-              key={action.id}
-              onClick={handleClick}
-              type="button"
-            >
-              {action.glyph ? (
-                <span aria-hidden="true" className="inline-flex size-3">
-                  {action.glyph}
-                </span>
-              ) : null}
-              <span>{action.label}</span>
-            </button>
-          );
-        })}
-      </div>
-    );
-  },
-);
+export const FloatingToolbar = (
+  props: FloatingToolbarProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { actions, className, labels, ref, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+        className,
+      )}
+      data-floating-toolbar
+      ref={ref}
+      role="toolbar"
+      style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
+      {...rest}
+    >
+      {actions.map((action) => {
+        const variant = action.variant ?? "ghost";
+        const handleClick = (): void => {
+          action.onActivate();
+        };
+        return (
+          <button
+            aria-label={action.ariaLabel ?? undefined}
+            className={cn(
+              "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              VARIANT_CLASSES[variant],
+              action.disabled ? "cursor-not-allowed opacity-50" : "",
+            )}
+            data-action-id={action.id}
+            data-variant={variant}
+            disabled={action.disabled}
+            key={action.id}
+            onClick={handleClick}
+            type="button"
+          >
+            {action.glyph ? (
+              <span aria-hidden="true" className="inline-flex size-3">
+                {action.glyph}
+              </span>
+            ) : null}
+            <span>{action.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
 FloatingToolbar.displayName = "FloatingToolbar";
diff --git a/packages/ui/src/components/follow-mode/follow-mode.tsx b/packages/ui/src/components/follow-mode/follow-mode.tsx
index d084c5bd..1351e460 100644
--- a/packages/ui/src/components/follow-mode/follow-mode.tsx
+++ b/packages/ui/src/components/follow-mode/follow-mode.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -78,58 +74,59 @@ export type FollowModeProps = {
  *
  * @public
  */
-export const FollowMode = forwardRef<HTMLDivElement, FollowModeProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "blue",
-      labels,
-      name,
-      onStop,
-      ...rest
-    } = props;
-    const palette = PALETTE[color];
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
+export const FollowMode = (
+  props: FollowModeProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    color = "blue",
+    labels,
+    name,
+    onStop,
+    ref,
+    ...rest
+  } = props;
+  const palette = PALETTE[color];
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative h-full w-full rounded-2xl ring-2 ring-inset",
+        palette.ring,
+        className,
+      )}
+      data-follow-color={color}
+      ref={ref}
+      {...rest}
+    >
       <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative h-full w-full rounded-2xl ring-2 ring-inset",
-          palette.ring,
-          className,
-        )}
-        data-follow-color={color}
-        ref={ref}
-        {...rest}
+        className="pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm"
+        data-follow-chip
       >
-        <div
-          className="pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm"
-          data-follow-chip
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+            palette.chip,
+          )}
         >
-          <span
-            className={cn(
-              "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
-              palette.chip,
-            )}
+          <span aria-hidden="true">▸</span>
+          <span>Following {name}</span>
+        </span>
+        {onStop ? (
+          <button
+            aria-label={resolvedLabels.stop}
+            className="inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={onStop}
+            type="button"
           >
-            <span aria-hidden="true">▸</span>
-            <span>Following {name}</span>
-          </span>
-          {onStop ? (
-            <button
-              aria-label={resolvedLabels.stop}
-              className="inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={onStop}
-              type="button"
-            >
-              {resolvedLabels.stop}
-            </button>
-          ) : null}
-        </div>
-        {children}
+            {resolvedLabels.stop}
+          </button>
+        ) : null}
       </div>
-    );
-  },
-);
+      {children}
+    </div>
+  );
+};
 FollowMode.displayName = "FollowMode";
diff --git a/packages/ui/src/components/form/form.tsx b/packages/ui/src/components/form/form.tsx
index c2d62a8a..95e5775f 100644
--- a/packages/ui/src/components/form/form.tsx
+++ b/packages/ui/src/components/form/form.tsx
@@ -118,7 +118,7 @@ const FormItemContext = React.createContext<FormItemContextValue | undefined>(
 );
 
 function useFormRootContext(componentName: string) {
-  const context = React.useContext(FormRootContext);
+  const context = React.use(FormRootContext);
 
   if (context === undefined) {
     throw new Error(`${componentName} must be used within Form.`);
@@ -128,7 +128,7 @@ function useFormRootContext(componentName: string) {
 }
 
 function useFormItemContext(componentName: string) {
-  const context = React.useContext(FormItemContext);
+  const context = React.use(FormItemContext);
 
   if (context === undefined) {
     throw new Error(`${componentName} must be used within FormItem.`);
@@ -306,7 +306,7 @@ type FormMarkupProps<TFieldValues extends FieldValues> = {
     React.ComponentPropsWithoutRef<"form">,
     "children" | "className" | "onSubmit"
   >;
-  formRef: React.ForwardedRef<HTMLFormElement>;
+  formRef?: React.Ref<HTMLFormElement>;
   handleValidatedSubmit?: ReturnType<
     FormInstance<TFieldValues>["handleSubmit"]
   >;
@@ -352,28 +352,26 @@ function FormMarkup<TFieldValues extends FieldValues>({
   );
 }
 
-function FormInner<TFieldValues extends FieldValues = FieldValues>(
-  {
-    children,
-    className,
-    controlId,
-    defaultValues,
-    descriptionId,
-    disabled = false,
-    form: providedForm,
-    invalid = false,
-    messageId,
-    onError,
-    onSubmit,
-    onValidSubmit,
-    required = false,
-    resolver,
-    schema,
-    values,
-    ...props
-  }: FormProps<TFieldValues>,
-  ref: React.ForwardedRef<HTMLFormElement>,
-) {
+function FormInner<TFieldValues extends FieldValues = FieldValues>({
+  children,
+  className,
+  controlId,
+  defaultValues,
+  descriptionId,
+  disabled = false,
+  form: providedForm,
+  invalid = false,
+  messageId,
+  onError,
+  onSubmit,
+  onValidSubmit,
+  ref,
+  required = false,
+  resolver,
+  schema,
+  values,
+  ...props
+}: FormProps<TFieldValues> & React.RefAttributes<HTMLFormElement>) {
   const internalForm = useForm<TFieldValues>({
     defaultValues,
     resolver:
@@ -419,7 +417,7 @@ function FormInner<TFieldValues extends FieldValues = FieldValues>(
   );
 }
 
-const FormBase = React.forwardRef(FormInner);
+const FormBase = FormInner as typeof FormInner & { displayName?: string };
 FormBase.displayName = "Form";
 
 const Form = FormBase as <TFieldValues extends FieldValues = FieldValues>(
@@ -443,7 +441,7 @@ function FormField<
 }
 
 function useFormField() {
-  const fieldContext = React.useContext(FormFieldContext);
+  const fieldContext = React.use(FormFieldContext);
   const itemContext = useFormItemContext("useFormField");
   const { formState, getFieldState } = useFormContext();
 
@@ -488,88 +486,84 @@ function useFormField() {
   };
 }
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div"> & {
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-  }
->(
-  (
-    {
-      children,
-      className,
-      disabled: itemDisabled,
-      invalid: itemInvalid,
-      required: itemRequired,
-      ...props
-    },
-    ref,
-  ) => {
-    const {
-      controlId: controlIdBase,
-      descriptionId: descriptionIdBase,
-      disabled,
-      invalid,
-      messageId: messageIdBase,
-      required,
-    } = useFormRootContext("FormItem");
-    const generatedId = React.useId();
-    const hasDescription = hasRenderedFormChild(children, "FormDescription");
-    const hasMessage = hasRenderedFormChild(children, "FormMessage");
-    const hasMessageSlot = hasFormChild(children, "FormMessage");
-
-    const effectiveDisabled = itemDisabled ?? disabled;
-    const effectiveInvalid = itemInvalid ?? invalid;
-    const effectiveRequired = itemRequired ?? required;
-
-    const value = React.useMemo<FormItemContextValue>(
-      () => ({
-        controlId: resolveItemId(controlIdBase, generatedId, "control"),
-        descriptionId: resolveItemId(
-          descriptionIdBase,
-          generatedId,
-          "description",
-        ),
-        disabled: effectiveDisabled,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        id: generatedId,
-        invalid: effectiveInvalid,
-        messageId: resolveItemId(messageIdBase, generatedId, "message"),
-        required: effectiveRequired,
-      }),
-      [
-        controlIdBase,
+const FormItem = ({
+  children,
+  className,
+  disabled: itemDisabled,
+  invalid: itemInvalid,
+  ref,
+  required: itemRequired,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & {
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+} & React.RefAttributes<HTMLDivElement>) => {
+  const {
+    controlId: controlIdBase,
+    descriptionId: descriptionIdBase,
+    disabled,
+    invalid,
+    messageId: messageIdBase,
+    required,
+  } = useFormRootContext("FormItem");
+  const generatedId = React.useId();
+  const hasDescription = hasRenderedFormChild(children, "FormDescription");
+  const hasMessage = hasRenderedFormChild(children, "FormMessage");
+  const hasMessageSlot = hasFormChild(children, "FormMessage");
+
+  const effectiveDisabled = itemDisabled ?? disabled;
+  const effectiveInvalid = itemInvalid ?? invalid;
+  const effectiveRequired = itemRequired ?? required;
+
+  const value = React.useMemo<FormItemContextValue>(
+    () => ({
+      controlId: resolveItemId(controlIdBase, generatedId, "control"),
+      descriptionId: resolveItemId(
         descriptionIdBase,
-        effectiveDisabled,
-        effectiveInvalid,
-        effectiveRequired,
         generatedId,
-        hasDescription,
-        hasMessage,
-        hasMessageSlot,
-        messageIdBase,
-      ],
-    );
-
-    return (
-      <FormItemContext.Provider value={value}>
-        <div className={cn("space-y-2", className)} ref={ref} {...props}>
-          {children}
-        </div>
-      </FormItemContext.Provider>
-    );
-  },
-);
+        "description",
+      ),
+      disabled: effectiveDisabled,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      id: generatedId,
+      invalid: effectiveInvalid,
+      messageId: resolveItemId(messageIdBase, generatedId, "message"),
+      required: effectiveRequired,
+    }),
+    [
+      controlIdBase,
+      descriptionIdBase,
+      effectiveDisabled,
+      effectiveInvalid,
+      effectiveRequired,
+      generatedId,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      messageIdBase,
+    ],
+  );
+
+  return (
+    <FormItemContext.Provider value={value}>
+      <div className={cn("space-y-2", className)} ref={ref} {...props}>
+        {children}
+      </div>
+    </FormItemContext.Provider>
+  );
+};
 FormItem.displayName = "FormItem";
 
-const FormLabel = React.forwardRef<
-  React.ComponentRef<typeof Label>,
-  React.ComponentPropsWithoutRef<typeof Label>
->(({ className, htmlFor, ...props }, ref) => {
+const FormLabel = ({
+  className,
+  htmlFor,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Label> &
+  React.RefAttributes<React.ComponentRef<typeof Label>>) => {
   const { formItemId, invalid } = useFormField();
 
   return (
@@ -581,7 +575,7 @@ const FormLabel = React.forwardRef<
       {...props}
     />
   );
-});
+};
 FormLabel.displayName = "FormLabel";
 
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot> & {
@@ -589,73 +583,73 @@ type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot> & {
   required?: boolean;
 };
 
-const FormControl = React.forwardRef<HTMLElement, FormControlProps>(
-  (
-    { disabled: controlDisabled, id: _id, required: controlRequired, ...props },
-    ref,
-  ) => {
-    const {
-      disabled,
-      error,
-      formDescriptionId,
-      formItemId,
-      formMessageId,
-      hasDescription,
-      hasMessage,
-      hasMessageSlot,
-      invalid,
-      required,
-    } = useFormField();
-    const { formState } = useFormContext();
-    const hasErrorMessage = hasVisibleContent(error?.message);
-    const describedBy = composeIds(
-      props["aria-describedby"],
-      hasDescription ? formDescriptionId : undefined,
-      error === undefined
-        ? hasMessage && invalid
-          ? formMessageId
-          : undefined
-        : hasMessageSlot && hasErrorMessage
-          ? formMessageId
-          : undefined,
-    );
-    const effectiveDisabled =
-      controlDisabled ?? (disabled || formState.isSubmitting);
-    const effectiveRequired = controlRequired ?? required;
-    const nativeConstraintProps: {
-      disabled?: boolean;
-      required?: boolean;
-    } = {
-      disabled: effectiveDisabled || undefined,
-      required: effectiveRequired || undefined,
-    };
+const FormControl = ({
+  disabled: controlDisabled,
+  id: _id,
+  ref,
+  required: controlRequired,
+  ...props
+}: FormControlProps & React.RefAttributes<HTMLElement>) => {
+  const {
+    disabled,
+    error,
+    formDescriptionId,
+    formItemId,
+    formMessageId,
+    hasDescription,
+    hasMessage,
+    hasMessageSlot,
+    invalid,
+    required,
+  } = useFormField();
+  const { formState } = useFormContext();
+  const hasErrorMessage = hasVisibleContent(error?.message);
+  const describedBy = composeIds(
+    props["aria-describedby"],
+    hasDescription ? formDescriptionId : undefined,
+    error === undefined
+      ? hasMessage && invalid
+        ? formMessageId
+        : undefined
+      : hasMessageSlot && hasErrorMessage
+        ? formMessageId
+        : undefined,
+  );
+  const effectiveDisabled =
+    controlDisabled ?? (disabled || formState.isSubmitting);
+  const effectiveRequired = controlRequired ?? required;
+  const nativeConstraintProps: {
+    disabled?: boolean;
+    required?: boolean;
+  } = {
+    disabled: effectiveDisabled || undefined,
+    required: effectiveRequired || undefined,
+  };
 
-    return (
-      <Slot
-        {...props}
-        {...nativeConstraintProps}
-        aria-describedby={describedBy}
-        aria-disabled={
-          props["aria-disabled"] ?? (effectiveDisabled || undefined)
-        }
-        aria-invalid={props["aria-invalid"] ?? (invalid || undefined)}
-        aria-required={
-          props["aria-required"] ?? (effectiveRequired || undefined)
-        }
-        data-disabled={effectiveDisabled ? "true" : undefined}
-        data-invalid={invalid ? "true" : undefined}
-        id={formItemId}
-        ref={ref}
-      />
-    );
-  },
-);
+  return (
+    <Slot
+      {...props}
+      {...nativeConstraintProps}
+      aria-describedby={describedBy}
+      aria-disabled={props["aria-disabled"] ?? (effectiveDisabled || undefined)}
+      aria-invalid={props["aria-invalid"] ?? (invalid || undefined)}
+      aria-required={props["aria-required"] ?? (effectiveRequired || undefined)}
+      data-disabled={effectiveDisabled ? "true" : undefined}
+      data-invalid={invalid ? "true" : undefined}
+      id={formItemId}
+      ref={ref}
+    />
+  );
+};
 FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<"p">
->(({ className, id: _id, ...props }, ref) => {
+const FormDescription = ({
+  className,
+  id: _id,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"p"> &
+  React.RefAttributes<HTMLParagraphElement>) => {
   const { formDescriptionId } = useFormField();
 
   return (
@@ -666,13 +660,17 @@ const FormDescription = React.forwardRef<
       ref={ref}
     />
   );
-});
+};
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<"p">
->(({ children, className, id: _id, ...props }, ref) => {
+const FormMessage = ({
+  children,
+  className,
+  id: _id,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"p"> &
+  React.RefAttributes<HTMLParagraphElement>) => {
   const { error, formMessageId, invalid } = useFormField();
   const body = error?.message ?? children;
 
@@ -695,7 +693,7 @@ const FormMessage = React.forwardRef<
       {body}
     </p>
   );
-});
+};
 FormMessage.displayName = "FormMessage";
 
 export {
diff --git a/packages/ui/src/components/gantt-chart/gantt-chart.tsx b/packages/ui/src/components/gantt-chart/gantt-chart.tsx
index 28cffbe2..36ecdb46 100644
--- a/packages/ui/src/components/gantt-chart/gantt-chart.tsx
+++ b/packages/ui/src/components/gantt-chart/gantt-chart.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -530,47 +525,48 @@ function TimelineColumn({
  *
  * @public
  */
-export const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
-  (props, ref) => {
-    const {
-      className,
-      endDate,
-      groups,
-      labels,
-      locale = DEFAULT_LOCALE,
-      milestones = [],
-      now,
-      scale = "month",
-      startDate,
-      taskColumnWidth = 200,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const geometry = useChartGeometry({ endDate, locale, scale, startDate });
-    const nowDate = useMemo(() => (now ? toDate(now) : new Date()), [now]);
-
-    return (
-      <div
-        className={cn(
-          "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <LeftColumn groups={groups} taskColumnWidth={taskColumnWidth} />
-        <TimelineColumn
-          geometry={geometry}
-          groups={groups}
-          labels={resolvedLabels}
-          milestones={milestones}
-          now={nowDate}
-        />
-      </div>
-    );
-  },
-);
+export const GanttChart = (
+  props: GanttChartProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    endDate,
+    groups,
+    labels,
+    locale = DEFAULT_LOCALE,
+    milestones = [],
+    now,
+    ref,
+    scale = "month",
+    startDate,
+    taskColumnWidth = 200,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const geometry = useChartGeometry({ endDate, locale, scale, startDate });
+  const nowDate = useMemo(() => (now ? toDate(now) : new Date()), [now]);
+
+  return (
+    <div
+      className={cn(
+        "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <LeftColumn groups={groups} taskColumnWidth={taskColumnWidth} />
+      <TimelineColumn
+        geometry={geometry}
+        groups={groups}
+        labels={resolvedLabels}
+        milestones={milestones}
+        now={nowDate}
+      />
+    </div>
+  );
+};
 GanttChart.displayName = "GanttChart";
diff --git a/packages/ui/src/components/geography-quiz-map/geography-quiz-map.tsx b/packages/ui/src/components/geography-quiz-map/geography-quiz-map.tsx
index c84fc93c..7221ccf1 100644
--- a/packages/ui/src/components/geography-quiz-map/geography-quiz-map.tsx
+++ b/packages/ui/src/components/geography-quiz-map/geography-quiz-map.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -97,7 +96,7 @@ type QuizCtx = {
 const QuizContext = createContext<null | QuizCtx>(null);
 
 function useQuizContext(): QuizCtx {
-  const ctx = useContext(QuizContext);
+  const ctx = use(QuizContext);
   if (!ctx) {
     throw new Error("GeographyQuizMap subcomponent used outside its root.");
   }
@@ -272,10 +271,11 @@ function Stage({
  *
  * @public
  */
-export const GeographyQuizMapPrompt = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapPrompt = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { current, phase } = useQuizContext();
   if (phase !== "playing" || !current) return null;
   return (
@@ -291,7 +291,7 @@ export const GeographyQuizMapPrompt = forwardRef<
       {current.prompt}
     </div>
   );
-});
+};
 GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
 
 /**
@@ -299,10 +299,11 @@ GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
  *
  * @public
  */
-export const GeographyQuizMapScore = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapScore = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { answers, totalQuestions } = useQuizContext();
   const correct = answers.filter((entry) => entry.correct).length;
   const accuracy =
@@ -320,7 +321,7 @@ export const GeographyQuizMapScore = forwardRef<
       {`${correct.toString()} / ${totalQuestions.toString()} · ${accuracy.toString()}%`}
     </div>
   );
-});
+};
 GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
 
 /**
@@ -329,10 +330,11 @@ GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
  *
  * @public
  */
-export const GeographyQuizMapResults = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ className, ...rest }, ref) => {
+export const GeographyQuizMapResults = ({
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => {
   const { answers, phase, totalQuestions } = useQuizContext();
   if (phase !== "complete") return null;
   const correct = answers.filter((entry) => entry.correct).length;
@@ -369,7 +371,7 @@ export const GeographyQuizMapResults = forwardRef<
       </ol>
     </div>
   );
-});
+};
 GeographyQuizMapResults.displayName = "GeographyQuizMapResults";
 
 type QuizState = {
@@ -476,77 +478,79 @@ function scheduleAdvance(
  *
  * @public
  */
-export const GeographyQuizMap = forwardRef<HTMLElement, GeographyQuizMapProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      children,
-      className,
-      labels,
-      onComplete,
-      questions,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const { handleSelect, state } = useQuizState({ onComplete, questions });
-
-    const phase: Phase =
-      state.questionIndex >= questions.length ? "complete" : "playing";
-    const current = questions[state.questionIndex];
-
-    const ctx = useMemo<QuizCtx>(
-      () => ({
-        answers: state.answers,
-        current,
-        feedback: state.feedback,
-        phase,
-        questionIndex: state.questionIndex,
-        totalQuestions: questions.length,
-      }),
-      [
-        current,
-        phase,
-        questions.length,
-        state.answers,
-        state.feedback,
-        state.questionIndex,
-      ],
-    );
-
-    return (
-      <QuizContext.Provider value={ctx}>
-        <section
-          aria-labelledby={titleId}
-          className={cn(
-            "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          <span className="sr-only" id={titleId}>
-            {resolvedLabels.region}
-          </span>
-          <Stage
-            backdrop={backdrop}
-            backdropAlt={backdropAlt}
-            current={current}
-            disabled={phase === "complete" || Boolean(state.feedback)}
-            feedback={state.feedback}
-            onSelect={handleSelect}
-            regions={regions}
-            selectedRegionId={state.selectedRegionId}
-          />
-          {children}
-        </section>
-      </QuizContext.Provider>
-    );
-  },
-);
+// eslint-disable-next-line max-lines-per-function
+export const GeographyQuizMap = (
+  props: GeographyQuizMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    labels,
+    onComplete,
+    questions,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const { handleSelect, state } = useQuizState({ onComplete, questions });
+
+  const phase: Phase =
+    state.questionIndex >= questions.length ? "complete" : "playing";
+  const current = questions[state.questionIndex];
+
+  const ctx = useMemo<QuizCtx>(
+    () => ({
+      answers: state.answers,
+      current,
+      feedback: state.feedback,
+      phase,
+      questionIndex: state.questionIndex,
+      totalQuestions: questions.length,
+    }),
+    [
+      current,
+      phase,
+      questions.length,
+      state.answers,
+      state.feedback,
+      state.questionIndex,
+    ],
+  );
+
+  return (
+    <QuizContext.Provider value={ctx}>
+      <section
+        aria-labelledby={titleId}
+        className={cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <span className="sr-only" id={titleId}>
+          {resolvedLabels.region}
+        </span>
+        <Stage
+          backdrop={backdrop}
+          backdropAlt={backdropAlt}
+          current={current}
+          disabled={phase === "complete" || Boolean(state.feedback)}
+          feedback={state.feedback}
+          onSelect={handleSelect}
+          regions={regions}
+          selectedRegionId={state.selectedRegionId}
+        />
+        {children}
+      </section>
+    </QuizContext.Provider>
+  );
+};
 GeographyQuizMap.displayName = "GeographyQuizMap";
diff --git a/packages/ui/src/components/glass-panel/glass-panel.tsx b/packages/ui/src/components/glass-panel/glass-panel.tsx
index 42e26eaa..92dfb9e5 100644
--- a/packages/ui/src/components/glass-panel/glass-panel.tsx
+++ b/packages/ui/src/components/glass-panel/glass-panel.tsx
@@ -1,24 +1,23 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
-
 export type GlassPanelProps = React.ComponentPropsWithoutRef<"div">;
 
-const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(
-  ({ children, className, ...props }, ref) => (
-    <div
-      className={cn(
-        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_hsl(var(--foreground)/0.08)] backdrop-blur-xl",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </div>
-  ),
+const GlassPanel = ({
+  children,
+  className,
+  ref,
+  ...props
+}: GlassPanelProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_hsl(var(--foreground)/0.08)] backdrop-blur-xl",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </div>
 );
 
 GlassPanel.displayName = "GlassPanel";
-
 export { GlassPanel };
diff --git a/packages/ui/src/components/globe-3d/globe-3d.tsx b/packages/ui/src/components/globe-3d/globe-3d.tsx
index 37fddb6b..cfa38fb5 100644
--- a/packages/ui/src/components/globe-3d/globe-3d.tsx
+++ b/packages/ui/src/components/globe-3d/globe-3d.tsx
@@ -4,13 +4,12 @@ import {
   Children,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   isValidElement,
   type PointerEvent as ReactPointerEvent,
   type ReactElement,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -126,7 +125,7 @@ type Ctx = {
 const GlobeContext = createContext<Ctx | null>(null);
 
 function useGlobeContext(): Ctx {
-  const ctx = useContext(GlobeContext);
+  const ctx = use(GlobeContext);
   if (!ctx) {
     throw new Error("Globe3D subcomponent used outside its root.");
   }
@@ -157,40 +156,40 @@ export type GlobeMarkerProps = {
  *
  * @public
  */
-export const GlobeMarker = forwardRef<SVGGElement, GlobeMarkerProps>(
-  (props, ref) => {
-    const { color = "red", id, label, lat, lng, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const projected = project({ lat, lng }, rotationLng, rotationLat);
-    if (!projected.visible) return null;
-    const palette = PALETTE[color];
-    return (
-      <g
-        data-marker-id={id}
-        data-marker-visible="true"
-        ref={ref}
-        transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
-        {...rest}
-      >
-        <circle
-          className={cn("stroke-background", palette.fill)}
-          r="5"
-          strokeWidth="1.5"
-        />
-        {label ? (
-          <text
-            className="select-none fill-foreground text-[10px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="-10"
-          >
-            {label}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+export const GlobeMarker = (
+  props: GlobeMarkerProps & React.RefAttributes<SVGGElement>,
+) => {
+  const { color = "red", id, label, lat, lng, ref, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const projected = project({ lat, lng }, rotationLng, rotationLat);
+  if (!projected.visible) return null;
+  const palette = PALETTE[color];
+  return (
+    <g
+      data-marker-id={id}
+      data-marker-visible="true"
+      ref={ref}
+      transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
+      {...rest}
+    >
+      <circle
+        className={cn("stroke-background", palette.fill)}
+        r="5"
+        strokeWidth="1.5"
+      />
+      {label ? (
+        <text
+          className="select-none fill-foreground text-[10px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="-10"
+        >
+          {label}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 GlobeMarker.displayName = "GlobeMarker";
 
 /**
@@ -246,27 +245,27 @@ function buildArc(arguments_: {
  *
  * @public
  */
-export const GlobeArc = forwardRef<SVGPathElement, GlobeArcProps>(
-  (props, ref) => {
-    const { color = "cyan", from, id, strokeWidth = 2, to, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const path = buildArc({ from, rotationLat, rotationLng, to });
-    if (!path) return null;
-    const palette = PALETTE[color];
-    return (
-      <path
-        className={cn("fill-none", palette.stroke)}
-        d={path}
-        data-arc-id={id}
-        ref={ref}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={strokeWidth}
-        {...rest}
-      />
-    );
-  },
-);
+export const GlobeArc = (
+  props: GlobeArcProps & React.RefAttributes<SVGPathElement>,
+) => {
+  const { color = "cyan", from, id, ref, strokeWidth = 2, to, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const path = buildArc({ from, rotationLat, rotationLng, to });
+  if (!path) return null;
+  const palette = PALETTE[color];
+  return (
+    <path
+      className={cn("fill-none", palette.stroke)}
+      d={path}
+      data-arc-id={id}
+      ref={ref}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      {...rest}
+    />
+  );
+};
 GlobeArc.displayName = "GlobeArc";
 
 type GraticuleProps = {
@@ -570,13 +569,16 @@ function DataSummary({ children, titleId }: DataSummaryProps): ReactNode {
  *
  * @public
  */
-export const Globe3D = forwardRef<HTMLElement, Globe3DProps>((props, ref) => {
+export const Globe3D = (
+  props: Globe3DProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     autoRotate = true,
     children,
     className,
     initialPosition = { lat: 20, lng: 0 },
     labels,
+    ref,
     rotationSpeed = 8,
     ...rest
   } = props;
@@ -638,5 +640,5 @@ export const Globe3D = forwardRef<HTMLElement, Globe3DProps>((props, ref) => {
       </section>
     </GlobeContext.Provider>
   );
-});
+};
 Globe3D.displayName = "Globe3D";
diff --git a/packages/ui/src/components/group-hull/group-hull.tsx b/packages/ui/src/components/group-hull/group-hull.tsx
index 9029acbe..c4a6f1dd 100644
--- a/packages/ui/src/components/group-hull/group-hull.tsx
+++ b/packages/ui/src/components/group-hull/group-hull.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -10,39 +8,44 @@ export type GroupHullProps = React.ComponentPropsWithoutRef<"section"> & {
   title: string;
 };
 
-const GroupHull = forwardRef<HTMLElement, GroupHullProps>(
-  ({ children, className, description, eyebrow, title, ...props }, ref) => (
-    <section
-      className={cn(
-        "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="absolute inset-3 rounded-[1.5rem] border border-border/40" />
-      <div className="relative space-y-1">
-        {eyebrow ? (
-          <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-            {eyebrow}
-          </div>
-        ) : null}
-        <h3 className="text-lg font-semibold tracking-tight text-foreground">
-          {title}
-        </h3>
-        {description ? (
-          <p className="max-w-[48ch] text-sm leading-6 text-muted-foreground">
-            {description}
-          </p>
-        ) : null}
-      </div>
-      <div className="relative flex flex-1 flex-wrap items-start gap-4">
-        {children}
-      </div>
-    </section>
-  ),
+const GroupHull = ({
+  children,
+  className,
+  description,
+  eyebrow,
+  ref,
+  title,
+  ...props
+}: GroupHullProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="absolute inset-3 rounded-[1.5rem] border border-border/40" />
+    <div className="relative space-y-1">
+      {eyebrow ? (
+        <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+          {eyebrow}
+        </div>
+      ) : null}
+      <h3 className="text-lg font-semibold tracking-tight text-foreground">
+        {title}
+      </h3>
+      {description ? (
+        <p className="max-w-[48ch] text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
+    </div>
+    <div className="relative flex flex-1 flex-wrap items-start gap-4">
+      {children}
+    </div>
+  </section>
 );
 
 GroupHull.displayName = "GroupHull";
-
 export { GroupHull };
diff --git a/packages/ui/src/components/handoff-beacon/handoff-beacon.tsx b/packages/ui/src/components/handoff-beacon/handoff-beacon.tsx
index afb8c47e..f112d264 100644
--- a/packages/ui/src/components/handoff-beacon/handoff-beacon.tsx
+++ b/packages/ui/src/components/handoff-beacon/handoff-beacon.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -81,60 +77,61 @@ export type HandoffBeaconProps = {
  *
  * @public
  */
-export const HandoffBeacon = forwardRef<HTMLDivElement, HandoffBeaconProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      level = "info",
-      message,
-      source,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
+export const HandoffBeacon = (
+  props: HandoffBeaconProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    labels,
+    level = "info",
+    message,
+    ref,
+    source,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
+        className,
+      )}
+      data-handoff-level={level}
+      ref={ref}
+      role="status"
+      style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
-          className,
+          "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
+          LEVEL_DOT[level],
+          LEVEL_RING[level],
         )}
-        data-handoff-level={level}
-        ref={ref}
-        role="status"
-        style={{ left: `${x.toString()}px`, top: `${y.toString()}px` }}
-        {...rest}
-      >
-        <span
-          aria-hidden="true"
-          className={cn(
-            "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
-            LEVEL_DOT[level],
-            LEVEL_RING[level],
-          )}
-        />
-        {source || message ? (
-          <div
-            className="pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md"
-            data-handoff-card
-          >
-            {source ? (
-              <p className="text-foreground">
-                <span className="font-semibold">{source}</span>
-                {message ? (
-                  <span className="text-muted-foreground"> · </span>
-                ) : null}
-                {message ? <span>{message}</span> : null}
-              </p>
-            ) : message ? (
-              <p className="text-foreground">{message}</p>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
+      />
+      {source || message ? (
+        <div
+          className="pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md"
+          data-handoff-card
+        >
+          {source ? (
+            <p className="text-foreground">
+              <span className="font-semibold">{source}</span>
+              {message ? (
+                <span className="text-muted-foreground"> · </span>
+              ) : null}
+              {message ? <span>{message}</span> : null}
+            </p>
+          ) : message ? (
+            <p className="text-foreground">{message}</p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
 HandoffBeacon.displayName = "HandoffBeacon";
diff --git a/packages/ui/src/components/heat-map-overlay/heat-map-overlay.tsx b/packages/ui/src/components/heat-map-overlay/heat-map-overlay.tsx
index 2f3ff3d7..5a7eff4f 100644
--- a/packages/ui/src/components/heat-map-overlay/heat-map-overlay.tsx
+++ b/packages/ui/src/components/heat-map-overlay/heat-map-overlay.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
   useMemo,
@@ -290,60 +289,61 @@ function Stage({
  *
  * @public
  */
-export const HeatMapOverlay = forwardRef<HTMLElement, HeatMapOverlayProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      blur = 12,
-      children,
-      className,
-      data,
-      gradient = DEFAULT_GRADIENT,
-      labels,
-      opacity = 0.7,
-      radius = 30,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const gradientId = useId();
-    const blurId = useId();
+export const HeatMapOverlay = (
+  props: HeatMapOverlayProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    blur = 12,
+    children,
+    className,
+    data,
+    gradient = DEFAULT_GRADIENT,
+    labels,
+    opacity = 0.7,
+    radius = 30,
+    ref,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const gradientId = useId();
+  const blurId = useId();
 
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const projected = useMemo(() => projectPoints(data), [data]);
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const projected = useMemo(() => projectPoints(data), [data]);
 
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <Stage
-          backdrop={backdrop}
-          backdropAlt={backdropAlt}
-          blur={blur}
-          blurId={blurId}
-          data={projected}
-          gradient={gradient}
-          gradientId={gradientId}
-          opacity={opacity}
-          radius={radius}
-        />
-        {children ? (
-          <div className="absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur">
-            {children}
-          </div>
-        ) : null}
-        <DataSummary data={data} titleId={titleId} />
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <Stage
+        backdrop={backdrop}
+        backdropAlt={backdropAlt}
+        blur={blur}
+        blurId={blurId}
+        data={projected}
+        gradient={gradient}
+        gradientId={gradientId}
+        opacity={opacity}
+        radius={radius}
+      />
+      {children ? (
+        <div className="absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur">
+          {children}
+        </div>
+      ) : null}
+      <DataSummary data={data} titleId={titleId} />
+    </section>
+  );
+};
 HeatMapOverlay.displayName = "HeatMapOverlay";
diff --git a/packages/ui/src/components/heat-overlay/heat-overlay.tsx b/packages/ui/src/components/heat-overlay/heat-overlay.tsx
index d683bf86..51a2faf3 100644
--- a/packages/ui/src/components/heat-overlay/heat-overlay.tsx
+++ b/packages/ui/src/components/heat-overlay/heat-overlay.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef, useId } from "react";
+import { type ComponentPropsWithoutRef, useId } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -124,51 +124,52 @@ const HeatBlob = (props: {
  *
  * @public
  */
-export const HeatOverlay = forwardRef<SVGSVGElement, HeatOverlayProps>(
-  (props, ref) => {
-    const {
-      className,
-      defaultTone = "warn",
-      intensity = 48,
-      labels,
-      points,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const gradientId = useId();
-    if (points.length === 0) {
-      return null;
-    }
-    return (
-      <svg
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute inset-0 z-10 h-full w-full",
-          className,
-        )}
-        data-heat-overlay
-        ref={ref}
-        role="img"
-        {...rest}
-      >
-        <defs>
-          <radialGradient cx="50%" cy="50%" id={gradientId} r="50%">
-            <stop offset="0%" stopColor="currentColor" stopOpacity="1" />
-            <stop offset="70%" stopColor="currentColor" stopOpacity="0.4" />
-            <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
-          </radialGradient>
-        </defs>
-        {points.map((point) => (
-          <HeatBlob
-            defaultTone={defaultTone}
-            gradientId={gradientId}
-            intensity={intensity}
-            key={point.id}
-            point={point}
-          />
-        ))}
-      </svg>
-    );
-  },
-);
+export const HeatOverlay = (
+  props: HeatOverlayProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    className,
+    defaultTone = "warn",
+    intensity = 48,
+    labels,
+    points,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const gradientId = useId();
+  if (points.length === 0) {
+    return null;
+  }
+  return (
+    <svg
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute inset-0 z-10 h-full w-full",
+        className,
+      )}
+      data-heat-overlay
+      ref={ref}
+      role="img"
+      {...rest}
+    >
+      <defs>
+        <radialGradient cx="50%" cy="50%" id={gradientId} r="50%">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />
+          <stop offset="70%" stopColor="currentColor" stopOpacity="0.4" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      {points.map((point) => (
+        <HeatBlob
+          defaultTone={defaultTone}
+          gradientId={gradientId}
+          intensity={intensity}
+          key={point.id}
+          point={point}
+        />
+      ))}
+    </svg>
+  );
+};
 HeatOverlay.displayName = "HeatOverlay";
diff --git a/packages/ui/src/components/historic-timeline/historic-timeline.tsx b/packages/ui/src/components/historic-timeline/historic-timeline.tsx
index d8546277..27734a6f 100644
--- a/packages/ui/src/components/historic-timeline/historic-timeline.tsx
+++ b/packages/ui/src/components/historic-timeline/historic-timeline.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -502,59 +497,60 @@ function Legend({ categories }: LegendProps): ReactNode {
  *
  * @public
  */
-export const HistoricTimeline = forwardRef<HTMLElement, HistoricTimelineProps>(
-  (props, ref) => {
-    const {
-      categories = [],
-      className,
-      endYear,
-      eras = [],
-      events = [],
-      labels,
-      periods = [],
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount],
-    );
-
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <Axis ticks={ticks} />
-        <EraLabels endYear={endYear} eras={eras} startYear={startYear} />
-        <PeriodLane
+export const HistoricTimeline = (
+  props: HistoricTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    categories = [],
+    className,
+    endYear,
+    eras = [],
+    events = [],
+    labels,
+    periods = [],
+    ref,
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount],
+  );
+
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <Axis ticks={ticks} />
+      <EraLabels endYear={endYear} eras={eras} startYear={startYear} />
+      <PeriodLane
+        categories={categories}
+        endYear={endYear}
+        periods={periods}
+        startYear={startYear}
+      />
+      <div className="relative">
+        <EraBands endYear={endYear} eras={eras} startYear={startYear} />
+        <EventLane
           categories={categories}
           endYear={endYear}
-          periods={periods}
+          events={events}
           startYear={startYear}
         />
-        <div className="relative">
-          <EraBands endYear={endYear} eras={eras} startYear={startYear} />
-          <EventLane
-            categories={categories}
-            endYear={endYear}
-            events={events}
-            startYear={startYear}
-          />
-        </div>
-        <Legend categories={categories} />
-      </section>
-    );
-  },
-);
+      </div>
+      <Legend categories={categories} />
+    </section>
+  );
+};
 HistoricTimeline.displayName = "HistoricTimeline";
diff --git a/packages/ui/src/components/historical-figure-card/historical-figure-card.tsx b/packages/ui/src/components/historical-figure-card/historical-figure-card.tsx
index b0b4e0d6..06145f97 100644
--- a/packages/ui/src/components/historical-figure-card/historical-figure-card.tsx
+++ b/packages/ui/src/components/historical-figure-card/historical-figure-card.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -426,10 +425,9 @@ function FigureLifeBlock({
   );
 }
 
-export const HistoricalFigureCard = forwardRef<
-  HTMLElement,
-  HistoricalFigureCardProps
->((props, ref) => {
+export const HistoricalFigureCard = (
+  props: HistoricalFigureCardProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     biography,
     birth,
@@ -443,6 +441,7 @@ export const HistoricalFigureCard = forwardRef<
     portrait,
     profileHref,
     quote,
+    ref,
     title,
     works,
     ...rest
@@ -502,5 +501,5 @@ export const HistoricalFigureCard = forwardRef<
       ) : null}
     </article>
   );
-});
+};
 HistoricalFigureCard.displayName = "HistoricalFigureCard";
diff --git a/packages/ui/src/components/hover-card/hover-card.tsx b/packages/ui/src/components/hover-card/hover-card.tsx
index c9fe5631..93ccf42f 100644
--- a/packages/ui/src/components/hover-card/hover-card.tsx
+++ b/packages/ui/src/components/hover-card/hover-card.tsx
@@ -1,19 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
 import { cn } from "../../lib/utils";
-
 const HoverCard = HoverCardPrimitive.Root;
-
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
-const HoverCardContent = forwardRef<
-  React.ComponentRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ align = "center", className, sideOffset = 4, ...props }, ref) => (
+const HoverCardContent = ({
+  align = "center",
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof HoverCardPrimitive.Content>
+  >) => (
   <HoverCardPrimitive.Content
     align={align}
     className={cn(
@@ -24,7 +25,7 @@ const HoverCardContent = forwardRef<
     sideOffset={sideOffset}
     {...props}
   />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+);
 
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 export { HoverCard, HoverCardContent, HoverCardTrigger };
diff --git a/packages/ui/src/components/infinite-plane/infinite-plane.tsx b/packages/ui/src/components/infinite-plane/infinite-plane.tsx
index 7eac96d9..aaf093ab 100644
--- a/packages/ui/src/components/infinite-plane/infinite-plane.tsx
+++ b/packages/ui/src/components/infinite-plane/infinite-plane.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -107,37 +103,38 @@ const buildBackground = (input: {
  *
  * @public
  */
-export const InfinitePlane = forwardRef<HTMLDivElement, InfinitePlaneProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      labels,
-      pattern = "dot",
-      spacing = 32,
-      translate = { x: 0, y: 0 },
-      zoom = 1,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const background = buildBackground({ pattern, spacing, translate, zoom });
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "relative h-full w-full overflow-hidden bg-background",
-          className,
-        )}
-        data-infinite-plane
-        data-infinite-plane-pattern={pattern}
-        ref={ref}
-        role="region"
-        style={background}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
+export const InfinitePlane = (
+  props: InfinitePlaneProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    labels,
+    pattern = "dot",
+    ref,
+    spacing = 32,
+    translate = { x: 0, y: 0 },
+    zoom = 1,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const background = buildBackground({ pattern, spacing, translate, zoom });
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "relative h-full w-full overflow-hidden bg-background",
+        className,
+      )}
+      data-infinite-plane
+      data-infinite-plane-pattern={pattern}
+      ref={ref}
+      role="region"
+      style={background}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
 InfinitePlane.displayName = "InfinitePlane";
diff --git a/packages/ui/src/components/input-otp/input-otp.tsx b/packages/ui/src/components/input-otp/input-otp.tsx
index ddf37642..e9f7af35 100644
--- a/packages/ui/src/components/input-otp/input-otp.tsx
+++ b/packages/ui/src/components/input-otp/input-otp.tsx
@@ -1,16 +1,19 @@
 "use client";
 
-import { forwardRef, useContext } from "react";
+import { use } from "react";
 
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Dot } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
-const InputOTP = forwardRef<
-  React.ComponentRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+const InputOTP = ({
+  className,
+  containerClassName,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof OTPInput> &
+  React.RefAttributes<React.ComponentRef<typeof OTPInput>>) => (
   <OTPInput
     className={cn("disabled:cursor-not-allowed", className)}
     containerClassName={cn(
@@ -20,22 +23,28 @@ const InputOTP = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
 InputOTP.displayName = "InputOTP";
 
-const InputOTPGroup = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
+const InputOTPGroup = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> &
+  React.RefAttributes<React.ComponentRef<"div">>) => (
   <div className={cn("flex items-center", className)} ref={ref} {...props} />
-));
+);
 InputOTPGroup.displayName = "InputOTPGroup";
 
-const InputOTPSlot = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ className, index, ...props }, ref) => {
-  const inputOTPContext = useContext(OTPInputContext);
+const InputOTPSlot = ({
+  className,
+  index,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & {
+  index: number;
+} & React.RefAttributes<React.ComponentRef<"div">>) => {
+  const inputOTPContext = use(OTPInputContext);
   const slot = inputOTPContext.slots[index];
 
   if (!slot) {
@@ -62,17 +71,18 @@ const InputOTPSlot = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 InputOTPSlot.displayName = "InputOTPSlot";
 
-const InputOTPSeparator = forwardRef<
-  React.ComponentRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
+const InputOTPSeparator = ({
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> &
+  React.RefAttributes<React.ComponentRef<"div">>) => (
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>
-));
+);
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index 29897e05..99122a2e 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -2,21 +2,24 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, reference) => {
-    return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={reference}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
+const Input = ({
+  className,
+  ref: reference,
+  type,
+  ...props
+}: React.ComponentProps<"input"> & React.RefAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      ref={reference}
+      type={type}
+      {...props}
+    />
+  );
+};
 Input.displayName = "Input";
 
 export { Input };
diff --git a/packages/ui/src/components/interactive-timeline/interactive-timeline.tsx b/packages/ui/src/components/interactive-timeline/interactive-timeline.tsx
index 4852b5b8..75746d5f 100644
--- a/packages/ui/src/components/interactive-timeline/interactive-timeline.tsx
+++ b/packages/ui/src/components/interactive-timeline/interactive-timeline.tsx
@@ -3,12 +3,11 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -196,7 +195,7 @@ type TimelineCtx = {
 const TimelineContext = createContext<null | TimelineCtx>(null);
 
 function useTimelineContext(): TimelineCtx {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("InteractiveTimeline subcomponent used outside its root.");
   }
@@ -647,10 +646,12 @@ function ScrollArea({
  *
  * @public
  */
-export const InteractiveTimelineToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const InteractiveTimelineToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-2 border-b border-border bg-muted/30 px-3 py-2",
@@ -662,7 +663,7 @@ export const InteractiveTimelineToolbar = forwardRef<
   >
     {children}
   </div>
-));
+);
 InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
 
 /**
@@ -670,10 +671,12 @@ InteractiveTimelineToolbar.displayName = "InteractiveTimelineToolbar";
  *
  * @public
  */
-export const InteractiveTimelineZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, ...rest }, ref) => {
+export const InteractiveTimelineZoomIn = ({
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useTimelineContext();
   return (
     <button
@@ -690,7 +693,7 @@ export const InteractiveTimelineZoomIn = forwardRef<
       <span aria-hidden="true">+</span>
     </button>
   );
-});
+};
 InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
 
 /**
@@ -698,10 +701,12 @@ InteractiveTimelineZoomIn.displayName = "InteractiveTimelineZoomIn";
  *
  * @public
  */
-export const InteractiveTimelineZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ className, ...rest }, ref) => {
+export const InteractiveTimelineZoomOut = ({
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useTimelineContext();
   return (
     <button
@@ -718,7 +723,7 @@ export const InteractiveTimelineZoomOut = forwardRef<
       <span aria-hidden="true">−</span>
     </button>
   );
-});
+};
 InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
 
 /**
@@ -727,10 +732,13 @@ InteractiveTimelineZoomOut.displayName = "InteractiveTimelineZoomOut";
  *
  * @public
  */
-export const InteractiveTimelineToday = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "type">
->(({ children, className, ...rest }, ref) => {
+export const InteractiveTimelineToday = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { centerToday, labels } = useTimelineContext();
   return (
     <button
@@ -747,7 +755,7 @@ export const InteractiveTimelineToday = forwardRef<
       {children ?? "Today"}
     </button>
   );
-});
+};
 InteractiveTimelineToday.displayName = "InteractiveTimelineToday";
 
 /**
@@ -759,10 +767,12 @@ export type InteractiveTimelineFilterProps = {
   categories: InteractiveTimelineCategory[];
 } & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
-export const InteractiveTimelineFilter = forwardRef<
-  HTMLDivElement,
-  InteractiveTimelineFilterProps
->(({ categories, className, ...rest }, ref) => {
+export const InteractiveTimelineFilter = ({
+  categories,
+  className,
+  ref,
+  ...rest
+}: InteractiveTimelineFilterProps & React.RefAttributes<HTMLDivElement>) => {
   const { toggleCategory, visibleCategories } = useTimelineContext();
   return (
     <div
@@ -794,7 +804,7 @@ export const InteractiveTimelineFilter = forwardRef<
       })}
     </div>
   );
-});
+};
 InteractiveTimelineFilter.displayName = "InteractiveTimelineFilter";
 
 const FALLBACK_TRACK: InteractiveTimelineTrack = {
@@ -1000,10 +1010,10 @@ function useTimelineFilter(
  *
  * @public
  */
-export const InteractiveTimeline = forwardRef<
-  HTMLElement,
-  InteractiveTimelineProps
->((props, ref) => {
+// eslint-disable-next-line max-lines-per-function
+export const InteractiveTimeline = (
+  props: InteractiveTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     categories = [],
     children,
@@ -1012,6 +1022,7 @@ export const InteractiveTimeline = forwardRef<
     events = [],
     labels,
     onEventClick = noop,
+    ref,
     startDate,
     tracks: trackProperty,
     ...rest
@@ -1077,5 +1088,5 @@ export const InteractiveTimeline = forwardRef<
       </section>
     </TimelineContext.Provider>
   );
-});
+};
 InteractiveTimeline.displayName = "InteractiveTimeline";
diff --git a/packages/ui/src/components/jarvis-dock/jarvis-dock.tsx b/packages/ui/src/components/jarvis-dock/jarvis-dock.tsx
index 0c737cbe..5422a762 100644
--- a/packages/ui/src/components/jarvis-dock/jarvis-dock.tsx
+++ b/packages/ui/src/components/jarvis-dock/jarvis-dock.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -132,43 +128,43 @@ const ActionButton = (props: {
  *
  * @public
  */
-export const JarvisDock = forwardRef<HTMLElement, JarvisDockProps>(
-  (props, ref) => {
-    const { actions, className, labels, onOpenPalette, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const handlePalette = (): void => {
-      onOpenPalette?.();
-    };
-    return (
-      <nav
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
-          className,
-        )}
-        data-jarvis-dock
-        ref={ref}
-        {...rest}
-      >
-        {actions.map((action) => (
-          <ActionButton action={action} key={action.id} />
-        ))}
-        {onOpenPalette ? (
-          <>
-            <span aria-hidden="true" className="mx-1 h-8 w-px bg-border" />
-            <button
-              aria-label={resolvedLabels.paletteTrigger}
-              className="flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              data-jarvis-palette-trigger
-              onClick={handlePalette}
-              type="button"
-            >
-              <span aria-hidden="true">⌘</span>
-            </button>
-          </>
-        ) : null}
-      </nav>
-    );
-  },
-);
+export const JarvisDock = (
+  props: JarvisDockProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { actions, className, labels, onOpenPalette, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const handlePalette = (): void => {
+    onOpenPalette?.();
+  };
+  return (
+    <nav
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
+        className,
+      )}
+      data-jarvis-dock
+      ref={ref}
+      {...rest}
+    >
+      {actions.map((action) => (
+        <ActionButton action={action} key={action.id} />
+      ))}
+      {onOpenPalette ? (
+        <>
+          <span aria-hidden="true" className="mx-1 h-8 w-px bg-border" />
+          <button
+            aria-label={resolvedLabels.paletteTrigger}
+            className="flex size-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            data-jarvis-palette-trigger
+            onClick={handlePalette}
+            type="button"
+          >
+            <span aria-hidden="true">⌘</span>
+          </button>
+        </>
+      ) : null}
+    </nav>
+  );
+};
 JarvisDock.displayName = "JarvisDock";
diff --git a/packages/ui/src/components/kbd/kbd.tsx b/packages/ui/src/components/kbd/kbd.tsx
index d313aaaa..7885d9e5 100644
--- a/packages/ui/src/components/kbd/kbd.tsx
+++ b/packages/ui/src/components/kbd/kbd.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useSyncExternalStore,
 } from "react";
@@ -123,52 +122,49 @@ export type KbdProps = {
  *
  * @public
  */
-export const Kbd = forwardRef<HTMLElement, KbdProps>(
-  ({ children, className, shortcut, size, ...rest }, ref) => {
-    const isMac = useIsMac();
-
-    if (children !== undefined) {
-      return (
-        <kbd
-          className={cn(kbdVariants({ size }), className)}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </kbd>
-      );
-    }
-
-    if (shortcut) {
-      const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
-      const ariaLabel = tokens
-        .map((token) => formatToken(token, isMac))
-        .join(" + ");
-      return (
-        <span aria-label={ariaLabel} className="inline-flex items-center gap-1">
-          {tokens.map((token, index) => (
-            <kbd
-              className={cn(kbdVariants({ size }), className)}
-              key={`${token}-${index.toString()}`}
-              ref={index === 0 ? ref : undefined}
-              {...(index === 0 ? rest : {})}
-            >
-              {formatToken(token, isMac)}
-            </kbd>
-          ))}
-        </span>
-      );
-    }
+export const Kbd = ({
+  children,
+  className,
+  ref,
+  shortcut,
+  size,
+  ...rest
+}: KbdProps & React.RefAttributes<HTMLElement>) => {
+  const isMac = useIsMac();
+
+  if (children !== undefined) {
+    return (
+      <kbd className={cn(kbdVariants({ size }), className)} ref={ref} {...rest}>
+        {children}
+      </kbd>
+    );
+  }
 
+  if (shortcut) {
+    const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
+    const ariaLabel = tokens
+      .map((token) => formatToken(token, isMac))
+      .join(" + ");
     return (
-      <kbd
-        className={cn(kbdVariants({ size }), className)}
-        ref={ref}
-        {...rest}
-      />
+      <span aria-label={ariaLabel} className="inline-flex items-center gap-1">
+        {tokens.map((token, index) => (
+          <kbd
+            className={cn(kbdVariants({ size }), className)}
+            key={`${token}-${index.toString()}`}
+            ref={index === 0 ? ref : undefined}
+            {...(index === 0 ? rest : {})}
+          >
+            {formatToken(token, isMac)}
+          </kbd>
+        ))}
+      </span>
     );
-  },
-);
+  }
+
+  return (
+    <kbd className={cn(kbdVariants({ size }), className)} ref={ref} {...rest} />
+  );
+};
 Kbd.displayName = "Kbd";
 
 export { kbdVariants };
diff --git a/packages/ui/src/components/knowledge-check/knowledge-check.tsx b/packages/ui/src/components/knowledge-check/knowledge-check.tsx
index 6d4da2aa..02c36642 100644
--- a/packages/ui/src/components/knowledge-check/knowledge-check.tsx
+++ b/packages/ui/src/components/knowledge-check/knowledge-check.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -706,60 +705,61 @@ function PaneActions({
  *
  * @public
  */
-export const KnowledgeCheck = forwardRef<HTMLElement, KnowledgeCheckProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      onAnswer,
-      onComplete,
-      questions,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const groupName = useId();
-    const inputId = useId();
-    const controller = useKnowledgeCheckController({
-      onAnswer,
-      onComplete,
-      questions,
-    });
-
-    return (
-      <section
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {title ? (
-          <h3 className="text-base font-semibold tracking-tight text-foreground">
-            {title}
-          </h3>
-        ) : null}
-        {controller.isComplete && controller.score ? (
-          <ScoreSummary
-            labels={resolvedLabels}
-            onRetry={controller.handleReset}
-            score={controller.score}
-          />
-        ) : (
-          <QuestionPane
-            controller={controller}
-            groupName={groupName}
-            inputId={inputId}
-            labels={resolvedLabels}
-            questions={questions}
-          />
-        )}
-      </section>
-    );
-  },
-);
+export const KnowledgeCheck = (
+  props: KnowledgeCheckProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    labels,
+    onAnswer,
+    onComplete,
+    questions,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const groupName = useId();
+  const inputId = useId();
+  const controller = useKnowledgeCheckController({
+    onAnswer,
+    onComplete,
+    questions,
+  });
+
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {title ? (
+        <h3 className="text-base font-semibold tracking-tight text-foreground">
+          {title}
+        </h3>
+      ) : null}
+      {controller.isComplete && controller.score ? (
+        <ScoreSummary
+          labels={resolvedLabels}
+          onRetry={controller.handleReset}
+          score={controller.score}
+        />
+      ) : (
+        <QuestionPane
+          controller={controller}
+          groupName={groupName}
+          inputId={inputId}
+          labels={resolvedLabels}
+          questions={questions}
+        />
+      )}
+    </section>
+  );
+};
 KnowledgeCheck.displayName = "KnowledgeCheck";
diff --git a/packages/ui/src/components/label/label.tsx b/packages/ui/src/components/label/label.tsx
index 2ffdddce..67067b55 100644
--- a/packages/ui/src/components/label/label.tsx
+++ b/packages/ui/src/components/label/label.tsx
@@ -11,17 +11,19 @@ const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = React.forwardRef<
-  React.ComponentRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+const Label = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> &
+  React.RefAttributes<React.ComponentRef<typeof LabelPrimitive.Root>>) => (
   <LabelPrimitive.Root
     className={cn(labelVariants(), className)}
     ref={ref}
     {...props}
   />
-));
+);
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
diff --git a/packages/ui/src/components/left-rail/left-rail.tsx b/packages/ui/src/components/left-rail/left-rail.tsx
index 17f34000..20c8df5e 100644
--- a/packages/ui/src/components/left-rail/left-rail.tsx
+++ b/packages/ui/src/components/left-rail/left-rail.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -9,31 +7,35 @@ export type LeftRailProps = React.ComponentPropsWithoutRef<"aside"> & {
   title?: ReactNode;
 };
 
-const LeftRail = forwardRef<HTMLElement, LeftRailProps>(
-  ({ children, className, footer, title, ...props }, ref) => (
-    <aside
-      className={cn(
-        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {title ? (
-        <div className="flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
-          {title}
-        </div>
-      ) : null}
-      <div className="flex w-full flex-1 flex-col items-center gap-2">
-        {children}
+const LeftRail = ({
+  children,
+  className,
+  footer,
+  ref,
+  title,
+  ...props
+}: LeftRailProps & React.RefAttributes<HTMLElement>) => (
+  <aside
+    className={cn(
+      "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {title ? (
+      <div className="flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
+        {title}
       </div>
-      {footer ? (
-        <div className="flex w-full flex-col items-center gap-2">{footer}</div>
-      ) : null}
-    </aside>
-  ),
+    ) : null}
+    <div className="flex w-full flex-1 flex-col items-center gap-2">
+      {children}
+    </div>
+    {footer ? (
+      <div className="flex w-full flex-col items-center gap-2">{footer}</div>
+    ) : null}
+  </aside>
 );
 
 LeftRail.displayName = "LeftRail";
-
 export { LeftRail };
diff --git a/packages/ui/src/components/live-cursor/live-cursor.tsx b/packages/ui/src/components/live-cursor/live-cursor.tsx
index e1db3492..de6d04cf 100644
--- a/packages/ui/src/components/live-cursor/live-cursor.tsx
+++ b/packages/ui/src/components/live-cursor/live-cursor.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -59,55 +55,55 @@ export type LiveCursorProps = {
  *
  * @public
  */
-export const LiveCursor = forwardRef<HTMLDivElement, LiveCursorProps>(
-  (props, ref) => {
-    const { className, color, labels, name, status, x, y, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const resolvedColor = color ?? "var(--foreground)";
-    return (
-      <div
-        aria-label={
-          typeof name === "string"
-            ? `${resolvedLabels.region}: ${name}`
-            : resolvedLabels.region
-        }
-        className={cn(
-          "pointer-events-none absolute z-30 flex items-start gap-1",
-          className,
-        )}
-        data-live-cursor
-        ref={ref}
-        role="img"
-        style={{ left: x, top: y }}
-        {...rest}
+export const LiveCursor = (
+  props: LiveCursorProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, color, labels, name, ref, status, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const resolvedColor = color ?? "var(--foreground)";
+  return (
+    <div
+      aria-label={
+        typeof name === "string"
+          ? `${resolvedLabels.region}: ${name}`
+          : resolvedLabels.region
+      }
+      className={cn(
+        "pointer-events-none absolute z-30 flex items-start gap-1",
+        className,
+      )}
+      data-live-cursor
+      ref={ref}
+      role="img"
+      style={{ left: x, top: y }}
+      {...rest}
+    >
+      <svg
+        aria-hidden="true"
+        className="-ml-1 -mt-1 drop-shadow-sm"
+        data-live-cursor-pointer
+        fill={resolvedColor}
+        height={18}
+        viewBox="0 0 16 18"
+        width={16}
       >
-        <svg
-          aria-hidden="true"
-          className="-ml-1 -mt-1 drop-shadow-sm"
-          data-live-cursor-pointer
-          fill={resolvedColor}
-          height={18}
-          viewBox="0 0 16 18"
-          width={16}
+        <path d="M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" />
+      </svg>
+      {name === null || name === undefined ? null : (
+        <span
+          className="ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
+          data-live-cursor-chip
+          style={{ backgroundColor: resolvedColor }}
         >
-          <path d="M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" />
-        </svg>
-        {name === null || name === undefined ? null : (
-          <span
-            className="ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
-            data-live-cursor-chip
-            style={{ backgroundColor: resolvedColor }}
-          >
-            <span>{name}</span>
-            {status ? (
-              <span className="text-[9px] opacity-80" data-live-cursor-status>
-                {status}
-              </span>
-            ) : null}
-          </span>
-        )}
-      </div>
-    );
-  },
-);
+          <span>{name}</span>
+          {status ? (
+            <span className="text-[9px] opacity-80" data-live-cursor-status>
+              {status}
+            </span>
+          ) : null}
+        </span>
+      )}
+    </div>
+  );
+};
 LiveCursor.displayName = "LiveCursor";
diff --git a/packages/ui/src/components/live-feed/live-feed.tsx b/packages/ui/src/components/live-feed/live-feed.tsx
index 5cd8db3b..4dd2c250 100644
--- a/packages/ui/src/components/live-feed/live-feed.tsx
+++ b/packages/ui/src/components/live-feed/live-feed.tsx
@@ -169,68 +169,64 @@ function LiveFeedRow({
   );
 }
 
-export const LiveFeed = React.forwardRef<HTMLDivElement, LiveFeedProps>(
-  (
-    {
-      className,
-      description,
-      emptyLabel = "No events yet",
-      events,
-      maxItems = 50,
-      now,
-      tickMs = 30_000,
-      title = "Live feed",
-      ...props
-    },
-    ref,
-  ) => {
-    const liveNow = useLiveDate(now, tickMs);
-    const visibleEvents = React.useMemo(
-      () => sortEventsDesc(events).slice(0, maxItems),
-      [events, maxItems],
-    );
-
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
-          <div className="space-y-1">
-            <CardTitle className="text-base">{title}</CardTitle>
-            {description ? (
-              <CardDescription>{description}</CardDescription>
-            ) : null}
+export const LiveFeed = ({
+  className,
+  description,
+  emptyLabel = "No events yet",
+  events,
+  maxItems = 50,
+  now,
+  ref,
+  tickMs = 30_000,
+  title = "Live feed",
+  ...props
+}: LiveFeedProps & React.RefAttributes<HTMLDivElement>) => {
+  const liveNow = useLiveDate(now, tickMs);
+  const visibleEvents = React.useMemo(
+    () => sortEventsDesc(events).slice(0, maxItems),
+    [events, maxItems],
+  );
+
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
+        <div className="space-y-1">
+          <CardTitle className="text-base">{title}</CardTitle>
+          {description ? (
+            <CardDescription>{description}</CardDescription>
+          ) : null}
+        </div>
+        <Badge variant="outline">
+          <span
+            aria-hidden="true"
+            className="relative mr-1.5 inline-flex size-2"
+          >
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" />
+            <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+          </span>{" "}
+          Live
+        </Badge>
+      </CardHeader>
+      <CardContent className="pt-0">
+        {visibleEvents.length === 0 ? (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            {emptyLabel}
           </div>
-          <Badge variant="outline">
-            <span
-              aria-hidden="true"
-              className="relative mr-1.5 inline-flex size-2"
-            >
-              <span className="absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" />
-              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
-            </span>{" "}
-            Live
-          </Badge>
-        </CardHeader>
-        <CardContent className="pt-0">
-          {visibleEvents.length === 0 ? (
-            <div className="py-8 text-center text-sm text-muted-foreground">
-              {emptyLabel}
-            </div>
-          ) : (
-            <ul className="max-h-[360px] divide-y divide-border/60 overflow-y-auto">
-              {visibleEvents.map((event, index) => (
-                <LiveFeedRow
-                  event={event}
-                  isLatest={index === 0}
-                  key={event.id}
-                  now={liveNow}
-                />
-              ))}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-    );
-  },
-);
+        ) : (
+          <ul className="max-h-[360px] divide-y divide-border/60 overflow-y-auto">
+            {visibleEvents.map((event, index) => (
+              <LiveFeedRow
+                event={event}
+                isLatest={index === 0}
+                key={event.id}
+                now={liveNow}
+              />
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
 
 LiveFeed.displayName = "LiveFeed";
diff --git a/packages/ui/src/components/map-2d/map-2d.tsx b/packages/ui/src/components/map-2d/map-2d.tsx
index 49480455..2e27dbe8 100644
--- a/packages/ui/src/components/map-2d/map-2d.tsx
+++ b/packages/ui/src/components/map-2d/map-2d.tsx
@@ -3,11 +3,10 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -64,7 +63,7 @@ type MapCtx = {
 const MapContext = createContext<MapCtx | null>(null);
 
 function useMapContext(): MapCtx {
-  const ctx = useContext(MapContext);
+  const ctx = use(MapContext);
   if (!ctx) {
     throw new Error("Map2D subcomponent used outside its root.");
   }
@@ -160,10 +159,12 @@ function useMapState(arguments_: {
  *
  * @public
  */
-export const MapControls = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const MapControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Map controls"
     className={cn(
@@ -175,7 +176,7 @@ export const MapControls = forwardRef<
   >
     {children}
   </div>
-));
+);
 MapControls.displayName = "MapControls";
 
 type ControlButtonProps = {
@@ -184,22 +185,27 @@ type ControlButtonProps = {
   onActivate: () => void;
 } & Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">;
 
-const ControlButton = forwardRef<HTMLButtonElement, ControlButtonProps>(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => (
-    <button
-      aria-label={ariaLabel}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className,
-      )}
-      onClick={onActivate}
-      ref={ref}
-      type="button"
-      {...rest}
-    >
-      {glyph}
-    </button>
-  ),
+const ControlButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}: ControlButtonProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    aria-label={ariaLabel}
+    className={cn(
+      "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className,
+    )}
+    onClick={onActivate}
+    ref={ref}
+    type="button"
+    {...rest}
+  >
+    {glyph}
+  </button>
 );
 ControlButton.displayName = "ControlButton";
 
@@ -208,10 +214,11 @@ ControlButton.displayName = "ControlButton";
  *
  * @public
  */
-export const MapZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const MapZoomIn = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useMapContext();
   return (
     <ControlButton
@@ -222,7 +229,7 @@ export const MapZoomIn = forwardRef<
       {...rest}
     />
   );
-});
+};
 MapZoomIn.displayName = "MapZoomIn";
 
 /**
@@ -230,10 +237,11 @@ MapZoomIn.displayName = "MapZoomIn";
  *
  * @public
  */
-export const MapZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const MapZoomOut = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useMapContext();
   return (
     <ControlButton
@@ -244,7 +252,7 @@ export const MapZoomOut = forwardRef<
       {...rest}
     />
   );
-});
+};
 MapZoomOut.displayName = "MapZoomOut";
 
 /**
@@ -269,14 +277,16 @@ export type MapMarkerProps = {
  *
  * @public
  */
-export const MapMarkerIcon = forwardRef<
-  SVGGElement,
-  ComponentPropsWithoutRef<"g">
->(({ children, className, ...rest }, ref) => (
+export const MapMarkerIcon = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"g"> & React.RefAttributes<SVGGElement>) => (
   <g className={cn("text-primary", className)} ref={ref} {...rest}>
     {children}
   </g>
-));
+);
 MapMarkerIcon.displayName = "MapMarkerIcon";
 
 type MarkerVisualProps = {
@@ -304,53 +314,61 @@ function MarkerVisual({ children }: MarkerVisualProps): ReactNode {
  *
  * @public
  */
-export const MapMarker = forwardRef<HTMLButtonElement, MapMarkerProps>(
-  (props, ref) => {
-    const { children, className, onSelect, popup, position, title, ...rest } =
-      props;
-    const { project } = useMapContext();
-    const point = project(position);
-    const markerId = useId();
-    const popupId = `${markerId}-popup`;
-    const labelText =
-      title ??
-      (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
-
-    return (
-      <foreignObject height="48" width="48" x={point.x - 24} y={point.y - 24}>
-        <button
-          aria-describedby={popup ? popupId : undefined}
-          aria-label={labelText}
-          className={cn(
-            "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            className,
-          )}
-          data-marker-id={markerId}
-          onClick={onSelect}
-          ref={ref}
-          type="button"
-          {...rest}
+export const MapMarker = (
+  props: MapMarkerProps & React.RefAttributes<HTMLButtonElement>,
+) => {
+  const {
+    children,
+    className,
+    onSelect,
+    popup,
+    position,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  const markerId = useId();
+  const popupId = `${markerId}-popup`;
+  const labelText =
+    title ??
+    (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
+
+  return (
+    <foreignObject height="48" width="48" x={point.x - 24} y={point.y - 24}>
+      <button
+        aria-describedby={popup ? popupId : undefined}
+        aria-label={labelText}
+        className={cn(
+          "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className,
+        )}
+        data-marker-id={markerId}
+        onClick={onSelect}
+        ref={ref}
+        type="button"
+        {...rest}
+      >
+        <svg
+          className="pointer-events-none size-6 overflow-visible"
+          viewBox="-10 -10 20 20"
         >
-          <svg
-            className="pointer-events-none size-6 overflow-visible"
-            viewBox="-10 -10 20 20"
+          <MarkerVisual>{children}</MarkerVisual>
+        </svg>
+        {popup ? (
+          <span
+            className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block"
+            id={popupId}
+            role="tooltip"
           >
-            <MarkerVisual>{children}</MarkerVisual>
-          </svg>
-          {popup ? (
-            <span
-              className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block"
-              id={popupId}
-              role="tooltip"
-            >
-              {popup}
-            </span>
-          ) : null}
-        </button>
-      </foreignObject>
-    );
-  },
-);
+            {popup}
+          </span>
+        ) : null}
+      </button>
+    </foreignObject>
+  );
+};
 MapMarker.displayName = "MapMarker";
 
 /**
@@ -369,32 +387,27 @@ export type MapPopupProps = {
  *
  * @public
  */
-export const MapPopup = forwardRef<HTMLDivElement, MapPopupProps>(
-  (props, ref) => {
-    const { children, className, position, ...rest } = props;
-    const { project } = useMapContext();
-    const point = project(position);
-    return (
-      <foreignObject
-        height="200"
-        width="320"
-        x={point.x - 160}
-        y={point.y - 220}
+export const MapPopup = (
+  props: MapPopupProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { children, className, position, ref, ...rest } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  return (
+    <foreignObject height="200" width="320" x={point.x - 160} y={point.y - 220}>
+      <div
+        className={cn(
+          "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
+          className,
+        )}
+        ref={ref}
+        {...rest}
       >
-        <div
-          className={cn(
-            "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </div>
-      </foreignObject>
-    );
-  },
-);
+        {children}
+      </div>
+    </foreignObject>
+  );
+};
 MapPopup.displayName = "MapPopup";
 
 /**
@@ -433,11 +446,14 @@ export type MapLayerProps = {
  *
  * @public
  */
-export const MapLayer = forwardRef<SVGGElement, MapLayerProps>((props, ref) => {
+export const MapLayer = (
+  props: MapLayerProps & React.RefAttributes<SVGGElement>,
+) => {
   const {
     className,
     data,
     fill = "rgba(59, 130, 246, 0.15)",
+    ref,
     stroke = "currentColor",
     strokeWidth = 2,
     ...rest
@@ -470,7 +486,7 @@ export const MapLayer = forwardRef<SVGGElement, MapLayerProps>((props, ref) => {
       })}
     </g>
   );
-});
+};
 MapLayer.displayName = "MapLayer";
 
 type StageProps = {
@@ -672,7 +688,7 @@ function bucketChildren(children: ReactNode): ChildBuckets {
  *
  * @public
  */
-export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
+export const Map2D = (props: Map2DProps & React.RefAttributes<HTMLElement>) => {
   const {
     backdrop,
     backdropAlt,
@@ -680,6 +696,7 @@ export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
     children,
     className,
     labels,
+    ref,
     zoom: initialZoom = 1,
     ...rest
   } = props;
@@ -712,5 +729,5 @@ export const Map2D = forwardRef<HTMLElement, Map2DProps>((props, ref) => {
       </section>
     </MapContext.Provider>
   );
-});
+};
 Map2D.displayName = "Map2D";
diff --git a/packages/ui/src/components/map-timeline/map-timeline.tsx b/packages/ui/src/components/map-timeline/map-timeline.tsx
index 44873321..7833b0b6 100644
--- a/packages/ui/src/components/map-timeline/map-timeline.tsx
+++ b/packages/ui/src/components/map-timeline/map-timeline.tsx
@@ -4,10 +4,9 @@ import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -113,7 +112,7 @@ type Ctx = {
 const TimelineContext = createContext<Ctx | null>(null);
 
 function useTimelineContext(): Ctx {
-  const ctx = useContext(TimelineContext);
+  const ctx = use(TimelineContext);
   if (!ctx) {
     throw new Error("MapTimeline subcomponent used outside its root.");
   }
@@ -201,48 +200,49 @@ function ringCentroid(ring: GeoPosition[]): { x: number; y: number } {
  *
  * @public
  */
-export const MapTimelineLayer = forwardRef<SVGGElement, MapTimelineLayerProps>(
-  (props, ref) => {
-    const {
-      color = "blue",
-      endYear,
-      geometry,
-      id,
-      label,
-      startYear,
-      ...rest
-    } = props;
-    const { year } = useTimelineContext();
-    if (year < startYear || year > endYear) return null;
-    const palette = PALETTE[color];
-    const rings = geometryRings(geometry);
-    const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
-    return (
-      <g data-layer-id={id} data-state="visible" ref={ref} {...rest}>
-        {rings.map((ring, index) => (
-          <path
-            d={`${ringToPath(ring)} Z`}
-            fill={palette.fill}
-            key={`${id ?? "layer"}-ring-${index.toString()}`}
-            stroke={palette.stroke}
-            strokeWidth={1.5}
-          />
-        ))}
-        {label ? (
-          <text
-            className="select-none fill-foreground text-[11px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            x={centroid.x}
-            y={centroid.y}
-          >
-            {label}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+export const MapTimelineLayer = (
+  props: MapTimelineLayerProps & React.RefAttributes<SVGGElement>,
+) => {
+  const {
+    color = "blue",
+    endYear,
+    geometry,
+    id,
+    label,
+    ref,
+    startYear,
+    ...rest
+  } = props;
+  const { year } = useTimelineContext();
+  if (year < startYear || year > endYear) return null;
+  const palette = PALETTE[color];
+  const rings = geometryRings(geometry);
+  const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
+  return (
+    <g data-layer-id={id} data-state="visible" ref={ref} {...rest}>
+      {rings.map((ring, index) => (
+        <path
+          d={`${ringToPath(ring)} Z`}
+          fill={palette.fill}
+          key={`${id ?? "layer"}-ring-${index.toString()}`}
+          stroke={palette.stroke}
+          strokeWidth={1.5}
+        />
+      ))}
+      {label ? (
+        <text
+          className="select-none fill-foreground text-[11px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          x={centroid.x}
+          y={centroid.y}
+        >
+          {label}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 MapTimelineLayer.displayName = "MapTimelineLayer";
 
 /**
@@ -272,64 +272,63 @@ export type MapTimelineEventProps = {
  *
  * @public
  */
-export const MapTimelineEvent = forwardRef<SVGGElement, MapTimelineEventProps>(
-  (props, ref) => {
-    const {
-      color = "red",
-      description,
-      id,
-      position,
-      title,
-      toleranceYears = 0,
-      year: eventYear,
-      ...rest
-    } = props;
-    const { year } = useTimelineContext();
-    const visible = Math.abs(year - eventYear) <= toleranceYears;
-    if (!visible) return null;
-    const palette = PALETTE[color];
-    const projected = projectEquirectangular(position);
-    return (
-      <g
-        data-event-id={id}
-        data-event-year={eventYear}
-        ref={ref}
-        transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
-        {...rest}
+export const MapTimelineEvent = (
+  props: MapTimelineEventProps & React.RefAttributes<SVGGElement>,
+) => {
+  const {
+    color = "red",
+    description,
+    id,
+    position,
+    ref,
+    title,
+    toleranceYears = 0,
+    year: eventYear,
+    ...rest
+  } = props;
+  const { year } = useTimelineContext();
+  const visible = Math.abs(year - eventYear) <= toleranceYears;
+  if (!visible) return null;
+  const palette = PALETTE[color];
+  const projected = projectEquirectangular(position);
+  return (
+    <g
+      data-event-id={id}
+      data-event-year={eventYear}
+      ref={ref}
+      transform={`translate(${projected.x.toString()}, ${projected.y.toString()})`}
+      {...rest}
+    >
+      <circle
+        className={cn("stroke-background", palette.dot)}
+        r="6"
+        strokeWidth="2"
       >
-        <circle
-          className={cn("stroke-background", palette.dot)}
-          r="6"
-          strokeWidth="2"
+        {title ? <title>{typeof title === "string" ? title : ""}</title> : null}
+      </circle>
+      {title ? (
+        <text
+          className="select-none fill-foreground text-[10px] font-semibold"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="-12"
         >
-          {title ? (
-            <title>{typeof title === "string" ? title : ""}</title>
-          ) : null}
-        </circle>
-        {title ? (
-          <text
-            className="select-none fill-foreground text-[10px] font-semibold"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="-12"
-          >
-            {title}
-          </text>
-        ) : null}
-        {description ? (
-          <text
-            className="select-none fill-muted-foreground text-[9px]"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y="20"
-          >
-            {description}
-          </text>
-        ) : null}
-      </g>
-    );
-  },
-);
+          {title}
+        </text>
+      ) : null}
+      {description ? (
+        <text
+          className="select-none fill-muted-foreground text-[9px]"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          y="20"
+        >
+          {description}
+        </text>
+      ) : null}
+    </g>
+  );
+};
 MapTimelineEvent.displayName = "MapTimelineEvent";
 
 /**
@@ -337,10 +336,12 @@ MapTimelineEvent.displayName = "MapTimelineEvent";
  *
  * @public
  */
-export const MapTimelineControls = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const MapTimelineControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex items-center gap-3 border-t border-border bg-muted/40 px-4 py-2",
@@ -351,7 +352,7 @@ export const MapTimelineControls = forwardRef<
   >
     {children}
   </div>
-));
+);
 MapTimelineControls.displayName = "MapTimelineControls";
 
 /**
@@ -359,13 +360,15 @@ MapTimelineControls.displayName = "MapTimelineControls";
  *
  * @public
  */
-export const MapTimelineSlider = forwardRef<
-  HTMLInputElement,
-  Omit<
-    ComponentPropsWithoutRef<"input">,
-    "max" | "min" | "onChange" | "type" | "value"
-  >
->(({ className, ...rest }, ref) => {
+export const MapTimelineSlider = ({
+  className,
+  ref,
+  ...rest
+}: Omit<
+  ComponentPropsWithoutRef<"input">,
+  "max" | "min" | "onChange" | "type" | "value"
+> &
+  React.RefAttributes<HTMLInputElement>) => {
   const { endYear, labels, setYear, startYear, year } = useTimelineContext();
   const sliderId = useId();
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -398,7 +401,7 @@ export const MapTimelineSlider = forwardRef<
       </span>
     </div>
   );
-});
+};
 MapTimelineSlider.displayName = "MapTimelineSlider";
 
 /**
@@ -406,10 +409,15 @@ MapTimelineSlider.displayName = "MapTimelineSlider";
  *
  * @public
  */
-export const MapTimelinePlayButton = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-pressed" | "onClick" | "type">
->(({ className, ...rest }, ref) => {
+export const MapTimelinePlayButton = ({
+  className,
+  ref,
+  ...rest
+}: Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-pressed" | "onClick" | "type"
+> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { isPlaying, labels, setIsPlaying } = useTimelineContext();
   const handleClick = (): void => {
     setIsPlaying(!isPlaying);
@@ -431,7 +439,7 @@ export const MapTimelinePlayButton = forwardRef<
       <span aria-hidden="true">{isPlaying ? "❚❚" : "▶"}</span>
     </button>
   );
-});
+};
 MapTimelinePlayButton.displayName = "MapTimelinePlayButton";
 
 /**
@@ -642,9 +650,19 @@ type ShellProps = {
   year: number;
 };
 
-const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
-  const { backdrop, backdropAlt, buckets, className, region, titleId, year } =
-    props;
+const Shell = function Shell(
+  props: ShellProps & React.RefAttributes<HTMLElement>,
+) {
+  const {
+    backdrop,
+    backdropAlt,
+    buckets,
+    className,
+    ref,
+    region,
+    titleId,
+    year,
+  } = props;
   return (
     <section
       aria-labelledby={titleId}
@@ -668,7 +686,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
       {buckets.footer}
     </section>
   );
-});
+};
 
 /**
  * Combined map + timeline. Pass {@link MapTimelineLayer} (era polygons),
@@ -704,72 +722,73 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
  *
  * @public
  */
-export const MapTimeline = forwardRef<HTMLElement, MapTimelineProps>(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      children,
-      className,
-      endYear,
-      initialYear,
-      labels,
-      onYearChange,
-      speed = 25,
-      startYear,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-
-    const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
-      endYear,
-      initialYear,
-      onYearChange,
-      speed,
-      startYear,
-    });
+export const MapTimeline = (
+  props: MapTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    endYear,
+    initialYear,
+    labels,
+    onYearChange,
+    ref,
+    speed = 25,
+    startYear,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
 
-    usePlayback({
-      endYear,
-      isPlaying,
-      setIsPlaying,
-      setYear,
-      speed,
-      startYear,
-      year,
-    });
+  const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
+    endYear,
+    initialYear,
+    onYearChange,
+    speed,
+    startYear,
+  });
 
-    const ctx = useTimelineCtx({
-      endYear,
-      isPlaying,
-      labels: resolvedLabels,
-      setIsPlaying,
-      setYear,
-      speed,
-      startYear,
-      year,
-    });
-
-    const buckets = bucketChildren(children);
-    return (
-      <TimelineContext.Provider value={ctx}>
-        <Shell
-          backdrop={backdrop}
-          backdropAlt={backdropAlt}
-          buckets={buckets}
-          className={className}
-          ref={ref}
-          region={resolvedLabels.region}
-          titleId={titleId}
-          year={year}
-          {...rest}
-        />
-      </TimelineContext.Provider>
-    );
-  },
-);
+  usePlayback({
+    endYear,
+    isPlaying,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year,
+  });
+
+  const ctx = useTimelineCtx({
+    endYear,
+    isPlaying,
+    labels: resolvedLabels,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year,
+  });
+
+  const buckets = bucketChildren(children);
+  return (
+    <TimelineContext.Provider value={ctx}>
+      <Shell
+        backdrop={backdrop}
+        backdropAlt={backdropAlt}
+        buckets={buckets}
+        className={className}
+        ref={ref}
+        region={resolvedLabels.region}
+        titleId={titleId}
+        year={year}
+        {...rest}
+      />
+    </TimelineContext.Provider>
+  );
+};
 MapTimeline.displayName = "MapTimeline";
diff --git a/packages/ui/src/components/market-treemap/market-treemap.tsx b/packages/ui/src/components/market-treemap/market-treemap.tsx
index 16e93ed2..4bad2361 100644
--- a/packages/ui/src/components/market-treemap/market-treemap.tsx
+++ b/packages/ui/src/components/market-treemap/market-treemap.tsx
@@ -93,10 +93,12 @@ function MarketTreemapTile({
   );
 }
 
-export const MarketTreemap = React.forwardRef<
-  HTMLDivElement,
-  MarketTreemapProps
->(({ className, items, ...props }, reference) => {
+export const MarketTreemap = ({
+  className,
+  items,
+  ref: reference,
+  ...props
+}: MarketTreemapProps & React.RefAttributes<HTMLDivElement>) => {
   if (items.length === 0) {
     return null;
   }
@@ -132,6 +134,6 @@ export const MarketTreemap = React.forwardRef<
       </div>
     </div>
   );
-});
+};
 
 MarketTreemap.displayName = "MarketTreemap";
diff --git a/packages/ui/src/components/marquee/marquee.tsx b/packages/ui/src/components/marquee/marquee.tsx
index ea8fd0a8..ef592f9b 100644
--- a/packages/ui/src/components/marquee/marquee.tsx
+++ b/packages/ui/src/components/marquee/marquee.tsx
@@ -58,75 +58,69 @@ function getDuration(
   }
 }
 
-export const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
-  (
-    {
-      children,
-      className,
-      duration,
-      fade = true,
-      gap = "1rem",
-      pauseOnHover = false,
-      repeat = 1,
-      reverse = false,
-      speed = "normal",
-      style,
-      vertical = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const resolvedGap = getGapValue(gap);
-    const resolvedDuration = getDuration(duration, speed);
-    const trackItems = getTrackItems(children, repeat);
+export const Marquee = ({
+  children,
+  className,
+  duration,
+  fade = true,
+  gap = "1rem",
+  pauseOnHover = false,
+  ref,
+  repeat = 1,
+  reverse = false,
+  speed = "normal",
+  style,
+  vertical = false,
+  ...props
+}: MarqueeProps & React.RefAttributes<HTMLDivElement>) => {
+  const resolvedGap = getGapValue(gap);
+  const resolvedDuration = getDuration(duration, speed);
+  const trackItems = getTrackItems(children, repeat);
 
-    const animationStyle: React.CSSProperties = {
-      animationDirection: reverse ? "reverse" : "normal",
-      animationDuration: `${resolvedDuration}s`,
-      animationIterationCount: "infinite",
-      animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
-      animationTimingFunction: "linear",
-    };
-    const maskImage = getMaskImage(vertical);
+  const animationStyle: React.CSSProperties = {
+    animationDirection: reverse ? "reverse" : "normal",
+    animationDuration: `${resolvedDuration}s`,
+    animationIterationCount: "infinite",
+    animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
+    animationTimingFunction: "linear",
+  };
+  const maskImage = getMaskImage(vertical);
 
-    return (
+  return (
+    <div
+      className={cn(
+        "group relative overflow-hidden",
+        vertical ? "flex h-full flex-col" : "flex w-full flex-row",
+        className,
+      )}
+      ref={ref}
+      style={fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style}
+      {...props}
+    >
       <div
         className={cn(
-          "group relative overflow-hidden",
-          vertical ? "flex h-full flex-col" : "flex w-full flex-row",
-          className,
+          "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
+          pauseOnHover && "group-hover:[animation-play-state:paused]",
+          vertical ? "min-h-full flex-col" : "min-w-full flex-row",
         )}
-        ref={ref}
-        style={
-          fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style
-        }
-        {...props}
+        style={animationStyle}
       >
-        <div
-          className={cn(
-            "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
-            pauseOnHover && "group-hover:[animation-play-state:paused]",
-            vertical ? "min-h-full flex-col" : "min-w-full flex-row",
-          )}
-          style={animationStyle}
-        >
-          {[0, 1].map((groupIndex) => (
-            <div
-              aria-hidden={groupIndex === 1}
-              className={cn(
-                "flex shrink-0",
-                vertical ? "flex-col items-stretch" : "flex-row items-center",
-              )}
-              key={groupIndex}
-              style={{ gap: resolvedGap }}
-            >
-              {trackItems}
-            </div>
-          ))}
-        </div>
+        {[0, 1].map((groupIndex) => (
+          <div
+            aria-hidden={groupIndex === 1}
+            className={cn(
+              "flex shrink-0",
+              vertical ? "flex-col items-stretch" : "flex-row items-center",
+            )}
+            key={groupIndex}
+            style={{ gap: resolvedGap }}
+          >
+            {trackItems}
+          </div>
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 Marquee.displayName = "Marquee";
diff --git a/packages/ui/src/components/menubar/menubar.tsx b/packages/ui/src/components/menubar/menubar.tsx
index a267768b..d537b299 100644
--- a/packages/ui/src/components/menubar/menubar.tsx
+++ b/packages/ui/src/components/menubar/menubar.tsx
@@ -1,27 +1,22 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-
 const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
-
 const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
-
 const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
-
 const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =
   MenubarPrimitive.RadioGroup;
 
-const Menubar = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Menubar = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Root>>) => (
   <MenubarPrimitive.Root
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
@@ -30,13 +25,16 @@ const Menubar = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
-const MenubarTrigger = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+const MenubarTrigger = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Trigger>>) => (
   <MenubarPrimitive.Trigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -45,15 +43,21 @@ const MenubarTrigger = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
-const MenubarSubTrigger = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, ref) => (
+const MenubarSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+} & React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.SubTrigger>
+  >) => (
   <MenubarPrimitive.SubTrigger
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -66,13 +70,18 @@ const MenubarSubTrigger = forwardRef<
     {children}
     <ChevronRight className="ml-auto size-4" />
   </MenubarPrimitive.SubTrigger>
-));
+);
+
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
-const MenubarSubContent = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const MenubarSubContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.SubContent>
+  >) => (
   <MenubarPrimitive.SubContent
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -81,40 +90,44 @@ const MenubarSubContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
-const MenubarContent = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { align = "start", alignOffset = -4, className, sideOffset = 8, ...props },
-    ref,
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        align={align}
-        alignOffset={alignOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className,
-        )}
-        ref={ref}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  ),
+const MenubarContent = ({
+  align = "start",
+  alignOffset = -4,
+  className,
+  ref,
+  sideOffset = 8,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Content>>) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      align={align}
+      alignOffset={alignOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
 );
+
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
-const MenubarItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const MenubarItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+} & React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Item>>) => (
   <MenubarPrimitive.Item
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -124,13 +137,20 @@ const MenubarItem = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
-const MenubarCheckboxItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ checked, children, className, ...props }, ref) => (
+const MenubarCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>
+  >) => (
   <MenubarPrimitive.CheckboxItem
     checked={checked}
     className={cn(
@@ -147,13 +167,19 @@ const MenubarCheckboxItem = forwardRef<
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-));
+);
+
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
-const MenubarRadioItem = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ children, className, ...props }, ref) => (
+const MenubarRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.RadioItem>
+  >) => (
   <MenubarPrimitive.RadioItem
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -169,15 +195,18 @@ const MenubarRadioItem = forwardRef<
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-));
+);
+
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
-const MenubarLabel = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const MenubarLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+} & React.RefAttributes<React.ComponentRef<typeof MenubarPrimitive.Label>>) => (
   <MenubarPrimitive.Label
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
@@ -187,19 +216,25 @@ const MenubarLabel = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
-const MenubarSeparator = forwardRef<
-  React.ComponentRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const MenubarSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof MenubarPrimitive.Separator>
+  >) => (
   <MenubarPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({
@@ -216,6 +251,7 @@ const MenubarShortcut = ({
     />
   );
 };
+
 MenubarShortcut.displayName = "MenubarShortcut";
 
 export {
diff --git a/packages/ui/src/components/metric-cluster/metric-cluster.tsx b/packages/ui/src/components/metric-cluster/metric-cluster.tsx
index 3b014606..547f602f 100644
--- a/packages/ui/src/components/metric-cluster/metric-cluster.tsx
+++ b/packages/ui/src/components/metric-cluster/metric-cluster.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -136,52 +132,53 @@ const Row = (props: { entry: MetricClusterEntry }): React.ReactElement => {
  *
  * @public
  */
-export const MetricCluster = forwardRef<HTMLDivElement, MetricClusterProps>(
-  (props, ref) => {
-    const {
-      anchor = "top-right",
-      className,
-      labels,
-      metrics,
-      title,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
-          className,
-        )}
-        data-metric-cluster
-        data-metric-cluster-anchor={anchor}
-        ref={ref}
-        role="status"
-        style={{
-          left: x,
-          top: y,
-          transform: ANCHOR_TRANSFORM[anchor],
-        }}
-        {...rest}
-      >
-        {title ? (
-          <header
-            className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
-            data-metric-cluster-title
-          >
-            {title}
-          </header>
-        ) : null}
-        <ul className="space-y-0.5">
-          {metrics.map((entry) => (
-            <Row entry={entry} key={entry.id} />
-          ))}
-        </ul>
-      </div>
-    );
-  },
-);
+export const MetricCluster = (
+  props: MetricClusterProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    anchor = "top-right",
+    className,
+    labels,
+    metrics,
+    ref,
+    title,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+        className,
+      )}
+      data-metric-cluster
+      data-metric-cluster-anchor={anchor}
+      ref={ref}
+      role="status"
+      style={{
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor],
+      }}
+      {...rest}
+    >
+      {title ? (
+        <header
+          className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
+          data-metric-cluster-title
+        >
+          {title}
+        </header>
+      ) : null}
+      <ul className="space-y-0.5">
+        {metrics.map((entry) => (
+          <Row entry={entry} key={entry.id} />
+        ))}
+      </ul>
+    </div>
+  );
+};
 MetricCluster.displayName = "MetricCluster";
diff --git a/packages/ui/src/components/metric-gauge/metric-gauge.tsx b/packages/ui/src/components/metric-gauge/metric-gauge.tsx
index 5b6646d7..a8e94e9d 100644
--- a/packages/ui/src/components/metric-gauge/metric-gauge.tsx
+++ b/packages/ui/src/components/metric-gauge/metric-gauge.tsx
@@ -203,59 +203,55 @@ function GaugeLegend({ thresholds }: { thresholds: MetricGaugeThreshold[] }) {
   );
 }
 
-export const MetricGauge = React.forwardRef<HTMLDivElement, MetricGaugeProps>(
-  (
-    {
-      className,
-      description,
-      label,
-      max,
-      min = 0,
-      thresholds = DEFAULT_THRESHOLDS,
-      unit,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const safeValue = clamp(value, min, max);
-    const percent = max === min ? 0 : ((safeValue - min) / (max - min)) * 100;
-    const endAngle = -90 + 180 * (percent / 100);
-    const activeThreshold = getActiveThreshold(percent, thresholds);
+export const MetricGauge = ({
+  className,
+  description,
+  label,
+  max,
+  min = 0,
+  ref,
+  thresholds = DEFAULT_THRESHOLDS,
+  unit,
+  value,
+  ...props
+}: MetricGaugeProps & React.RefAttributes<HTMLDivElement>) => {
+  const safeValue = clamp(value, min, max);
+  const percent = max === min ? 0 : ((safeValue - min) / (max - min)) * 100;
+  const endAngle = -90 + 180 * (percent / 100);
+  const activeThreshold = getActiveThreshold(percent, thresholds);
 
-    return (
-      <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="space-y-2 pb-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <CardTitle className="text-base">{label}</CardTitle>
-              {description ? (
-                <CardDescription>{description}</CardDescription>
-              ) : null}
-            </div>
-            {activeThreshold ? (
-              <Badge variant="outline">{activeThreshold.label}</Badge>
+  return (
+    <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
+      <CardHeader className="space-y-2 pb-3">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <CardTitle className="text-base">{label}</CardTitle>
+            {description ? (
+              <CardDescription>{description}</CardDescription>
             ) : null}
           </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
           {activeThreshold ? (
-            <GaugeDial
-              activeThreshold={activeThreshold}
-              endAngle={endAngle}
-              label={label}
-              max={max}
-              min={min}
-              percent={percent}
-              safeValue={safeValue}
-              unit={unit}
-            />
+            <Badge variant="outline">{activeThreshold.label}</Badge>
           ) : null}
-          <GaugeLegend thresholds={thresholds} />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {activeThreshold ? (
+          <GaugeDial
+            activeThreshold={activeThreshold}
+            endAngle={endAngle}
+            label={label}
+            max={max}
+            min={min}
+            percent={percent}
+            safeValue={safeValue}
+            unit={unit}
+          />
+        ) : null}
+        <GaugeLegend thresholds={thresholds} />
+      </CardContent>
+    </Card>
+  );
+};
 
 MetricGauge.displayName = "MetricGauge";
diff --git a/packages/ui/src/components/mini-map-panel/mini-map-panel.tsx b/packages/ui/src/components/mini-map-panel/mini-map-panel.tsx
index 753d7d8d..c32ec76a 100644
--- a/packages/ui/src/components/mini-map-panel/mini-map-panel.tsx
+++ b/packages/ui/src/components/mini-map-panel/mini-map-panel.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
 
 export type MiniMapMarker = {
@@ -25,74 +23,76 @@ export type MiniMapPanelProps = React.ComponentPropsWithoutRef<"div"> & {
   };
 };
 
-const MiniMapPanel = forwardRef<HTMLDivElement, MiniMapPanelProps>(
-  (
-    { className, markers = [], title = "Overview", viewport, world, ...props },
-    ref,
-  ) => {
-    const viewportWidth = Math.max(
-      (viewport.width / viewport.zoom / world.width) * 100,
-      8,
-    );
-    const viewportHeight = Math.max(
-      (viewport.height / viewport.zoom / world.height) * 100,
-      8,
-    );
-    const viewportLeft = Math.min(
-      Math.max((viewport.x / world.width) * 100, 0),
-      100 - viewportWidth,
-    );
-    const viewportTop = Math.min(
-      Math.max((viewport.y / world.height) * 100, 0),
-      100 - viewportHeight,
-    );
+const MiniMapPanel = ({
+  className,
+  markers = [],
+  ref,
+  title = "Overview",
+  viewport,
+  world,
+  ...props
+}: MiniMapPanelProps & React.RefAttributes<HTMLDivElement>) => {
+  const viewportWidth = Math.max(
+    (viewport.width / viewport.zoom / world.width) * 100,
+    8,
+  );
+  const viewportHeight = Math.max(
+    (viewport.height / viewport.zoom / world.height) * 100,
+    8,
+  );
+  const viewportLeft = Math.min(
+    Math.max((viewport.x / world.width) * 100, 0),
+    100 - viewportWidth,
+  );
+  const viewportTop = Math.min(
+    Math.max((viewport.y / world.height) * 100, 0),
+    100 - viewportHeight,
+  );
 
-    return (
-      <div
-        className={cn(
-          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        <div className="mb-3 flex items-center justify-between">
-          <div>
-            <div className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
-              {title}
-            </div>
-            <div className="mt-1 text-xs text-muted-foreground">
-              Zoom {Math.round(viewport.zoom * 100)}%
-            </div>
+  return (
+    <div
+      className={cn(
+        "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <div>
+          <div className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
+            {title}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            Zoom {Math.round(viewport.zoom * 100)}%
           </div>
         </div>
-        <div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background">
-          {markers.map((marker) => (
-            <div
-              className="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground"
-              key={marker.id}
-              style={{
-                left: `${(marker.x / world.width) * 100}%`,
-                top: `${(marker.y / world.height) * 100}%`,
-              }}
-              title={marker.label}
-            />
-          ))}
+      </div>
+      <div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background">
+        {markers.map((marker) => (
           <div
-            className="absolute border border-foreground/80 bg-transparent"
+            className="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground"
+            key={marker.id}
             style={{
-              height: `${viewportHeight}%`,
-              left: `${viewportLeft}%`,
-              top: `${viewportTop}%`,
-              width: `${viewportWidth}%`,
+              left: `${(marker.x / world.width) * 100}%`,
+              top: `${(marker.y / world.height) * 100}%`,
             }}
+            title={marker.label}
           />
-        </div>
+        ))}
+        <div
+          className="absolute border border-foreground/80 bg-transparent"
+          style={{
+            height: `${viewportHeight}%`,
+            left: `${viewportLeft}%`,
+            top: `${viewportTop}%`,
+            width: `${viewportWidth}%`,
+          }}
+        />
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 MiniMapPanel.displayName = "MiniMapPanel";
-
 export { MiniMapPanel };
diff --git a/packages/ui/src/components/model-comparison/model-comparison.tsx b/packages/ui/src/components/model-comparison/model-comparison.tsx
index 5463a311..6931090c 100644
--- a/packages/ui/src/components/model-comparison/model-comparison.tsx
+++ b/packages/ui/src/components/model-comparison/model-comparison.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -157,57 +156,58 @@ function ComparisonHeader({
  *
  * @public
  */
-export const ModelComparison = forwardRef<HTMLElement, ModelComparisonProps>(
-  (props, ref) => {
-    const {
-      blindDefault = false,
-      children,
-      className,
-      hideBlindToggle = false,
-      labels,
-      prompt,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const [blind, setBlind] = useState(blindDefault);
+export const ModelComparison = (
+  props: ModelComparisonProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    blindDefault = false,
+    children,
+    className,
+    hideBlindToggle = false,
+    labels,
+    prompt,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const [blind, setBlind] = useState(blindDefault);
 
-    const contextValue = useMemo<ModelComparisonContextValue>(
-      () => ({ blind, labels: resolvedLabels }),
-      [blind, resolvedLabels],
-    );
+  const contextValue = useMemo<ModelComparisonContextValue>(
+    () => ({ blind, labels: resolvedLabels }),
+    [blind, resolvedLabels],
+  );
 
-    const handleToggleBlind = useCallback(() => {
-      setBlind((value) => !value);
-    }, []);
+  const handleToggleBlind = useCallback(() => {
+    setBlind((value) => !value);
+  }, []);
 
-    return (
-      <ModelComparisonContext.Provider value={contextValue}>
-        <section
-          className={cn(
-            "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          <ComparisonHeader
-            blind={blind}
-            hideBlindToggle={hideBlindToggle}
-            labels={resolvedLabels}
-            onToggleBlind={handleToggleBlind}
-            prompt={prompt}
-          />
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {children}
-          </div>
-        </section>
-      </ModelComparisonContext.Provider>
-    );
-  },
-);
+  return (
+    <ModelComparisonContext.Provider value={contextValue}>
+      <section
+        className={cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        <ComparisonHeader
+          blind={blind}
+          hideBlindToggle={hideBlindToggle}
+          labels={resolvedLabels}
+          onToggleBlind={handleToggleBlind}
+          prompt={prompt}
+        />
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {children}
+        </div>
+      </section>
+    </ModelComparisonContext.Provider>
+  );
+};
 ModelComparison.displayName = "ModelComparison";
 
 /**
@@ -230,13 +230,12 @@ export type ModelComparisonColumnProps = {
  *
  * @public
  */
-export const ModelComparisonColumn = forwardRef<
-  HTMLElement,
-  ModelComparisonColumnProps
->((props, ref) => {
-  const { badge, children, className, label, model, ...rest } = props;
+export const ModelComparisonColumn = (
+  props: ModelComparisonColumnProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { badge, children, className, label, model, ref, ...rest } = props;
   const id = useId();
-  const { blind } = useContext(ModelComparisonContext);
+  const { blind } = use(ModelComparisonContext);
   const displayLabel = blind
     ? `${HIDDEN_LABEL_PREFIX} ${id.slice(-2)}`
     : (label ?? model);
@@ -264,7 +263,7 @@ export const ModelComparisonColumn = forwardRef<
       </div>
     </article>
   );
-});
+};
 ModelComparisonColumn.displayName = "ModelComparisonColumn";
 
 /**
@@ -287,12 +286,11 @@ export type ModelComparisonMetaProps = {
  *
  * @public
  */
-export const ModelComparisonMeta = forwardRef<
-  HTMLDListElement,
-  ModelComparisonMetaProps
->((props, ref) => {
-  const { className, cost, latency, tokens, ...rest } = props;
-  const { labels } = useContext(ModelComparisonContext);
+export const ModelComparisonMeta = (
+  props: ModelComparisonMetaProps & React.RefAttributes<HTMLDListElement>,
+) => {
+  const { className, cost, latency, ref, tokens, ...rest } = props;
+  const { labels } = use(ModelComparisonContext);
 
   const items: { caption: string; value: ReactNode }[] = [];
   if (tokens !== undefined && tokens !== null) {
@@ -328,7 +326,7 @@ export const ModelComparisonMeta = forwardRef<
       ))}
     </dl>
   );
-});
+};
 ModelComparisonMeta.displayName = "ModelComparisonMeta";
 
 /**
@@ -362,12 +360,11 @@ export type ModelComparisonVoteProps = {
  *
  * @public
  */
-export const ModelComparisonVote = forwardRef<
-  HTMLDivElement,
-  ModelComparisonVoteProps
->((props, ref) => {
-  const { buttonLabels, className, onVote, ...rest } = props;
-  const { labels: contextLabels } = useContext(ModelComparisonContext);
+export const ModelComparisonVote = (
+  props: ModelComparisonVoteProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { buttonLabels, className, onVote, ref, ...rest } = props;
+  const { labels: contextLabels } = use(ModelComparisonContext);
 
   const handleLeft = useCallback(() => {
     onVote?.("left");
@@ -401,5 +398,5 @@ export const ModelComparisonVote = forwardRef<
       </div>
     </div>
   );
-});
+};
 ModelComparisonVote.displayName = "ModelComparisonVote";
diff --git a/packages/ui/src/components/multi-select-lasso/multi-select-lasso.tsx b/packages/ui/src/components/multi-select-lasso/multi-select-lasso.tsx
index 15494f4e..ff8a9503 100644
--- a/packages/ui/src/components/multi-select-lasso/multi-select-lasso.tsx
+++ b/packages/ui/src/components/multi-select-lasso/multi-select-lasso.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -85,11 +81,10 @@ const normalizeRect = (rect: LassoRect): LassoRect => {
  *
  * @public
  */
-export const MultiSelectLasso = forwardRef<
-  HTMLDivElement,
-  MultiSelectLassoProps
->((props, ref) => {
-  const { className, count, hint, labels, rect, ...rest } = props;
+export const MultiSelectLasso = (
+  props: MultiSelectLassoProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, count, hint, labels, rect, ref, ...rest } = props;
   if (!rect) {
     return null;
   }
@@ -135,5 +130,5 @@ export const MultiSelectLasso = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 MultiSelectLasso.displayName = "MultiSelectLasso";
diff --git a/packages/ui/src/components/multi-select/multi-select.tsx b/packages/ui/src/components/multi-select/multi-select.tsx
index 6263d652..4763e635 100644
--- a/packages/ui/src/components/multi-select/multi-select.tsx
+++ b/packages/ui/src/components/multi-select/multi-select.tsx
@@ -236,129 +236,118 @@ function useMultiSelectState({
   };
 }
 
-const MultiSelectTrigger = React.forwardRef<
-  HTMLButtonElement,
-  MultiSelectTriggerProps
->(
-  (
-    {
+const MultiSelectTrigger = ({
+  className,
+  contentId,
+  disabled = false,
+  onKeyDown,
+  open,
+  placeholder = "Select options",
+  ref,
+  selectedOptions,
+  ...props
+}: MultiSelectTriggerProps & React.RefAttributes<HTMLButtonElement>) => (
+  <Button
+    aria-controls={contentId}
+    aria-expanded={open}
+    aria-haspopup="listbox"
+    className={cn(
+      "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
+      selectedOptions.length === 0 && "text-muted-foreground",
       className,
-      contentId,
-      disabled = false,
-      onKeyDown,
-      open,
-      placeholder = "Select options",
-      selectedOptions,
-      ...props
-    },
-    ref,
-  ) => (
-    <Button
-      aria-controls={contentId}
-      aria-expanded={open}
-      aria-haspopup="listbox"
-      className={cn(
-        "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
-        selectedOptions.length === 0 && "text-muted-foreground",
-        className,
-      )}
-      disabled={disabled}
-      onKeyDown={onKeyDown}
-      ref={ref}
-      role="combobox"
-      type="button"
-      variant="outline"
-      {...props}
-    >
-      <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left">
-        <TriggerContent
-          placeholder={placeholder}
-          selectedOptions={selectedOptions}
-        />
-      </span>
-      <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
-    </Button>
-  ),
+    )}
+    disabled={disabled}
+    onKeyDown={onKeyDown}
+    ref={ref}
+    role="combobox"
+    type="button"
+    variant="outline"
+    {...props}
+  >
+    <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left">
+      <TriggerContent
+        placeholder={placeholder}
+        selectedOptions={selectedOptions}
+      />
+    </span>
+    <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
+  </Button>
 );
 MultiSelectTrigger.displayName = "MultiSelectTrigger";
 
-const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
-  (
-    {
-      defaultValue = [],
-      emptyText = "No options found.",
-      onKeyDown,
-      onOpenChange,
-      onValueChange,
-      options,
-      searchable = false,
-      searchPlaceholder = "Search options...",
-      value,
-      ...props
+const MultiSelect = ({
+  defaultValue = [],
+  emptyText = "No options found.",
+  onKeyDown,
+  onOpenChange,
+  onValueChange,
+  options,
+  ref,
+  searchable = false,
+  searchPlaceholder = "Search options...",
+  value,
+  ...props
+}: MultiSelectProps & React.RefAttributes<HTMLButtonElement>) => {
+  const contentId = React.useId();
+  const { handleOpenChange, open, selectedValues, setSelectedValues } =
+    useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
+  const selectedOptions = React.useMemo(
+    () => options.filter((option) => selectedValues.includes(option.value)),
+    [options, selectedValues],
+  );
+
+  const handleSelect = React.useCallback(
+    (nextValue: string) => {
+      const nextSelectedValues = selectedValues.includes(nextValue)
+        ? selectedValues.filter((valueItem) => valueItem !== nextValue)
+        : [...selectedValues, nextValue];
+
+      setSelectedValues(nextSelectedValues);
     },
-    ref,
-  ) => {
-    const contentId = React.useId();
-    const { handleOpenChange, open, selectedValues, setSelectedValues } =
-      useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
-    const selectedOptions = React.useMemo(
-      () => options.filter((option) => selectedValues.includes(option.value)),
-      [options, selectedValues],
-    );
-
-    const handleSelect = React.useCallback(
-      (nextValue: string) => {
-        const nextSelectedValues = selectedValues.includes(nextValue)
-          ? selectedValues.filter((valueItem) => valueItem !== nextValue)
-          : [...selectedValues, nextValue];
-
-        setSelectedValues(nextSelectedValues);
-      },
-      [selectedValues, setSelectedValues],
-    );
-
-    const handleTriggerKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        onKeyDown?.(event);
-
-        if (event.defaultPrevented || props.disabled) {
-          return;
-        }
-
-        if (shouldOpenFromKey(event.key)) {
-          event.preventDefault();
-          handleOpenChange(true);
-        }
-      },
-      [handleOpenChange, onKeyDown, props.disabled],
-    );
-
-    return (
-      <Popover onOpenChange={handleOpenChange} open={open}>
-        <PopoverTrigger asChild>
-          <MultiSelectTrigger
-            {...props}
-            contentId={contentId}
-            onKeyDown={handleTriggerKeyDown}
-            open={open}
-            ref={ref}
-            selectedOptions={selectedOptions}
-          />
-        </PopoverTrigger>
-        <MultiSelectContent
+    [selectedValues, setSelectedValues],
+  );
+
+  const handleTriggerKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      onKeyDown?.(event);
+
+      if (event.defaultPrevented || props.disabled) {
+        return;
+      }
+
+      if (shouldOpenFromKey(event.key)) {
+        event.preventDefault();
+        handleOpenChange(true);
+      }
+    },
+    [handleOpenChange, onKeyDown, props.disabled],
+  );
+
+  return (
+    <Popover onOpenChange={handleOpenChange} open={open}>
+      <PopoverTrigger asChild>
+        <MultiSelectTrigger
+          {...props}
           contentId={contentId}
-          disabled={props.disabled || false}
-          emptyText={emptyText}
-          onSelect={handleSelect}
-          options={options}
-          searchable={searchable}
-          searchPlaceholder={searchPlaceholder}
-          selectedValues={selectedValues}
+          onKeyDown={handleTriggerKeyDown}
+          open={open}
+          ref={ref}
+          selectedOptions={selectedOptions}
         />
-      </Popover>
-    );
-  },
-);
+      </PopoverTrigger>
+      <MultiSelectContent
+        contentId={contentId}
+        disabled={props.disabled || false}
+        emptyText={emptyText}
+        onSelect={handleSelect}
+        options={options}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        selectedValues={selectedValues}
+      />
+    </Popover>
+  );
+};
 MultiSelect.displayName = "MultiSelect";
 
 export { MultiSelect };
diff --git a/packages/ui/src/components/navigation-menu/navigation-menu.tsx b/packages/ui/src/components/navigation-menu/navigation-menu.tsx
index 025625f0..770bca2a 100644
--- a/packages/ui/src/components/navigation-menu/navigation-menu.tsx
+++ b/packages/ui/src/components/navigation-menu/navigation-menu.tsx
@@ -1,17 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
-const NavigationMenu = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ children, className, ...props }, ref) => (
+const NavigationMenu = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Root>
+  >) => (
   <NavigationMenuPrimitive.Root
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
@@ -23,13 +25,18 @@ const NavigationMenu = forwardRef<
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-));
+);
+
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
+const NavigationMenuList = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.List>
+  >) => (
   <NavigationMenuPrimitive.List
     className={cn(
       "group flex flex-1 list-none items-center justify-center space-x-1",
@@ -38,19 +45,24 @@ const NavigationMenuList = forwardRef<
     ref={ref}
     {...props}
   />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+);
 
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
-const NavigationMenuTrigger = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const NavigationMenuTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>
+  >) => (
   <NavigationMenuPrimitive.Trigger
     className={cn(navigationMenuTriggerStyle(), "group", className)}
     ref={ref}
@@ -62,13 +74,18 @@ const NavigationMenuTrigger = forwardRef<
       className="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
     />
   </NavigationMenuPrimitive.Trigger>
-));
+);
+
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+const NavigationMenuContent = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Content>
+  >) => (
   <NavigationMenuPrimitive.Content
     className={cn(
       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
@@ -77,15 +94,19 @@ const NavigationMenuContent = forwardRef<
     ref={ref}
     {...props}
   />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+);
 
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
+const NavigationMenuViewport = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>
+  >) => (
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
@@ -96,14 +117,19 @@ const NavigationMenuViewport = forwardRef<
       {...props}
     />
   </div>
-));
+);
+
 NavigationMenuViewport.displayName =
   NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = forwardRef<
-  React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
+const NavigationMenuIndicator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>
+  >) => (
   <NavigationMenuPrimitive.Indicator
     className={cn(
       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
@@ -114,7 +140,8 @@ const NavigationMenuIndicator = forwardRef<
   >
     <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-));
+);
+
 NavigationMenuIndicator.displayName =
   NavigationMenuPrimitive.Indicator.displayName;
 
diff --git a/packages/ui/src/components/newsletter-signup/newsletter-signup.tsx b/packages/ui/src/components/newsletter-signup/newsletter-signup.tsx
index 24e5d1d4..81660a99 100644
--- a/packages/ui/src/components/newsletter-signup/newsletter-signup.tsx
+++ b/packages/ui/src/components/newsletter-signup/newsletter-signup.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   type SyntheticEvent,
   useCallback,
@@ -317,16 +316,16 @@ function useNewsletterSignupController(
   };
 }
 
-export const NewsletterSignup = forwardRef<
-  HTMLFormElement,
-  NewsletterSignupProps
->((props, ref) => {
+export const NewsletterSignup = (
+  props: NewsletterSignupProps & React.RefAttributes<HTMLFormElement>,
+) => {
   const {
     autoComplete = "email",
     className,
     labels,
     onStatusChange,
     onSubmit,
+    ref,
     validate,
     variant = "inline",
     ...rest
@@ -364,14 +363,14 @@ export const NewsletterSignup = forwardRef<
       status={controller.status}
     />
   );
-});
+};
 NewsletterSignup.displayName = "NewsletterSignup";
 
 type FormBodyProps = {
   autoComplete: string;
   className?: string;
   errorId: string;
-  formRef: React.ForwardedRef<HTMLFormElement>;
+  formRef?: React.Ref<HTMLFormElement>;
   inputId: string;
   inputRef: React.RefObject<HTMLInputElement | null>;
   labels: Required<NewsletterSignupLabels>;
diff --git a/packages/ui/src/components/number-input/number-input.tsx b/packages/ui/src/components/number-input/number-input.tsx
index 795098d5..fc559a45 100644
--- a/packages/ui/src/components/number-input/number-input.tsx
+++ b/packages/ui/src/components/number-input/number-input.tsx
@@ -105,7 +105,7 @@ function NumberInputField({
   ...props
 }: React.ComponentPropsWithoutRef<"input"> & {
   onValueChange: (value?: number) => void;
-  reference: React.ForwardedRef<HTMLInputElement>;
+  reference?: React.Ref<HTMLInputElement>;
   resolvedValue?: number;
 }) {
   return (
@@ -133,21 +133,19 @@ function NumberInputField({
   );
 }
 
-function NumberInputComponent(
-  {
-    className,
-    defaultValue,
-    disabled,
-    max,
-    min,
-    onValueChange,
-    placeholder,
-    step = 1,
-    value,
-    ...props
-  }: NumberInputProps,
-  reference: React.ForwardedRef<HTMLInputElement>,
-) {
+function NumberInputComponent({
+  className,
+  defaultValue,
+  disabled,
+  max,
+  min,
+  onValueChange,
+  placeholder,
+  ref: reference,
+  step = 1,
+  value,
+  ...props
+}: NumberInputProps & React.RefAttributes<HTMLInputElement>) {
   const { commitValue, resolvedValue } = useNumberInputState(
     value,
     defaultValue,
@@ -203,7 +201,9 @@ function NumberInputComponent(
   );
 }
 
-const NumberInput = React.forwardRef(NumberInputComponent);
+const NumberInput = NumberInputComponent as typeof NumberInputComponent & {
+  displayName?: string;
+};
 NumberInput.displayName = "NumberInput";
 
 export { NumberInput };
diff --git a/packages/ui/src/components/number-ticker/number-ticker.tsx b/packages/ui/src/components/number-ticker/number-ticker.tsx
index 8beffd65..1ffe1dbd 100644
--- a/packages/ui/src/components/number-ticker/number-ticker.tsx
+++ b/packages/ui/src/components/number-ticker/number-ticker.tsx
@@ -27,77 +27,70 @@ function getNumberTickerFormatter(
   return formatter;
 }
 
-export const NumberTicker = React.forwardRef<
-  HTMLSpanElement,
-  NumberTickerProps
->(
-  (
-    {
-      className,
-      delay = 0,
-      duration = 1.2,
-      formatOptions,
-      from = 0,
-      locale,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = React.useState(from);
-
-    React.useEffect(() => {
-      const reducedMotion =
-        typeof window !== "undefined" &&
-        typeof window.matchMedia === "function" &&
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-      if (reducedMotion || duration <= 0) {
-        setCurrentValue(value);
-        return;
-      }
-
-      let animationFrame = 0;
-      let timeoutId = 0;
-      const startDelay = Math.max(0, delay * 1000);
-      const durationMs = duration * 1000;
-
-      timeoutId = window.setTimeout(() => {
-        const startTime = performance.now();
-
-        const tick = (timestamp: number) => {
-          const elapsed = timestamp - startTime;
-          const progress = Math.min(elapsed / durationMs, 1);
-          const nextValue = from + (value - from) * progress;
-
-          setCurrentValue(nextValue);
-
-          if (progress < 1) {
-            animationFrame = window.requestAnimationFrame(tick);
-          }
-        };
-
-        animationFrame = window.requestAnimationFrame(tick);
-      }, startDelay);
-
-      return () => {
-        window.clearTimeout(timeoutId);
-        window.cancelAnimationFrame(animationFrame);
+export const NumberTicker = ({
+  className,
+  delay = 0,
+  duration = 1.2,
+  formatOptions,
+  from = 0,
+  locale,
+  ref,
+  value,
+  ...props
+}: NumberTickerProps & React.RefAttributes<HTMLSpanElement>) => {
+  const [currentValue, setCurrentValue] = React.useState(from);
+
+  React.useEffect(() => {
+    const reducedMotion =
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (reducedMotion || duration <= 0) {
+      setCurrentValue(value);
+      return;
+    }
+
+    let animationFrame = 0;
+    let timeoutId = 0;
+    const startDelay = Math.max(0, delay * 1000);
+    const durationMs = duration * 1000;
+
+    timeoutId = window.setTimeout(() => {
+      const startTime = performance.now();
+
+      const tick = (timestamp: number) => {
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / durationMs, 1);
+        const nextValue = from + (value - from) * progress;
+
+        setCurrentValue(nextValue);
+
+        if (progress < 1) {
+          animationFrame = window.requestAnimationFrame(tick);
+        }
       };
-    }, [delay, duration, from, value]);
-
-    const formatter = getNumberTickerFormatter(locale, formatOptions);
-
-    return (
-      <span
-        className={cn("tabular-nums tracking-tight", className)}
-        ref={ref}
-        {...props}
-      >
-        {formatter.format(currentValue)}
-      </span>
-    );
-  },
-);
+
+      animationFrame = window.requestAnimationFrame(tick);
+    }, startDelay);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [delay, duration, from, value]);
+
+  const formatter = getNumberTickerFormatter(locale, formatOptions);
+
+  return (
+    <span
+      className={cn("tabular-nums tracking-tight", className)}
+      ref={ref}
+      {...props}
+    >
+      {formatter.format(currentValue)}
+    </span>
+  );
+};
 
 NumberTicker.displayName = "NumberTicker";
diff --git a/packages/ui/src/components/object-card/object-card.tsx b/packages/ui/src/components/object-card/object-card.tsx
index 26330977..b1caff53 100644
--- a/packages/ui/src/components/object-card/object-card.tsx
+++ b/packages/ui/src/components/object-card/object-card.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -134,52 +132,47 @@ function ObjectCardActions({ actions }: Pick<ObjectCardProps, "actions">) {
   );
 }
 
-const ObjectCard = forwardRef<HTMLElement, ObjectCardProps>(
-  (
-    {
-      actions,
-      children,
+const ObjectCard = ({
+  actions,
+  children,
+  className,
+  footer,
+  kind = "Object",
+  metrics = [],
+  ports,
+  ref,
+  state = "idle",
+  summary,
+  title,
+  ...props
+}: ObjectCardProps & React.RefAttributes<HTMLElement>) => (
+  <article
+    className={cn(
+      "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
       className,
-      footer,
-      kind = "Object",
-      metrics = [],
-      ports,
-      state = "idle",
-      summary,
-      title,
-      ...props
-    },
-    ref,
-  ) => (
-    <article
-      className={cn(
-        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
-        className,
-      )}
-      data-state={state}
-      ref={ref}
-      {...props}
-    >
-      <div className="pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" />
-      <ObjectCardHeader
-        kind={kind}
-        ports={ports}
-        state={state}
-        summary={summary}
-        title={title}
-      />
-      <ObjectCardMetrics metrics={metrics} />
-      {children ? <div className="space-y-3">{children}</div> : null}
-      <ObjectCardActions actions={actions} />
-      {footer ? (
-        <div className="border-t border-border/60 pt-3 text-sm text-muted-foreground">
-          {footer}
-        </div>
-      ) : null}
-    </article>
-  ),
+    )}
+    data-state={state}
+    ref={ref}
+    {...props}
+  >
+    <div className="pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" />
+    <ObjectCardHeader
+      kind={kind}
+      ports={ports}
+      state={state}
+      summary={summary}
+      title={title}
+    />
+    <ObjectCardMetrics metrics={metrics} />
+    {children ? <div className="space-y-3">{children}</div> : null}
+    <ObjectCardActions actions={actions} />
+    {footer ? (
+      <div className="border-t border-border/60 pt-3 text-sm text-muted-foreground">
+        {footer}
+      </div>
+    ) : null}
+  </article>
 );
 
 ObjectCard.displayName = "ObjectCard";
-
 export { ObjectCard };
diff --git a/packages/ui/src/components/object-handle/object-handle.tsx b/packages/ui/src/components/object-handle/object-handle.tsx
index 04ed2f29..6aa3a927 100644
--- a/packages/ui/src/components/object-handle/object-handle.tsx
+++ b/packages/ui/src/components/object-handle/object-handle.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -12,32 +10,35 @@ export type ObjectHandleProps = Omit<
   label?: ReactNode;
 };
 
-const ObjectHandle = forwardRef<HTMLButtonElement, ObjectHandleProps>(
-  ({ className, hint, label = "Move", ...props }, ref) => (
-    <button
-      className={cn(
-        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
-        className,
-      )}
-      ref={ref}
-      type="button"
-      {...props}
+const ObjectHandle = ({
+  className,
+  hint,
+  label = "Move",
+  ref,
+  ...props
+}: ObjectHandleProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    className={cn(
+      "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
+      className,
+    )}
+    ref={ref}
+    type="button"
+    {...props}
+  >
+    <span
+      aria-hidden="true"
+      className="grid grid-cols-2 gap-0.5 text-[8px] leading-none"
     >
-      <span
-        aria-hidden="true"
-        className="grid grid-cols-2 gap-0.5 text-[8px] leading-none"
-      >
-        <span>•</span>
-        <span>•</span>
-        <span>•</span>
-        <span>•</span>
-      </span>
-      <span>{label}</span>
-      {hint ? <span className="text-muted-foreground/80">{hint}</span> : null}
-    </button>
-  ),
+      <span>•</span>
+      <span>•</span>
+      <span>•</span>
+      <span>•</span>
+    </span>
+    <span>{label}</span>
+    {hint ? <span className="text-muted-foreground/80">{hint}</span> : null}
+  </button>
 );
 
 ObjectHandle.displayName = "ObjectHandle";
-
 export { ObjectHandle };
diff --git a/packages/ui/src/components/object-inspector/object-inspector.tsx b/packages/ui/src/components/object-inspector/object-inspector.tsx
index 5f52d86c..0e40c540 100644
--- a/packages/ui/src/components/object-inspector/object-inspector.tsx
+++ b/packages/ui/src/components/object-inspector/object-inspector.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -173,56 +169,57 @@ const Header = (props: {
  *
  * @public
  */
-export const ObjectInspector = forwardRef<HTMLElement, ObjectInspectorProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      kind,
-      labels,
-      status = "idle",
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (!kind || !title) {
-      return (
-        <section
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
-            className,
-          )}
-          data-object-inspector
-          data-object-state="empty"
-          ref={ref}
-          {...rest}
-        >
-          <span aria-hidden="true" className="text-lg">
-            ◇
-          </span>
-          <span>{resolvedLabels.empty}</span>
-        </section>
-      );
-    }
+export const ObjectInspector = (
+  props: ObjectInspectorProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    children,
+    className,
+    kind,
+    labels,
+    ref,
+    status = "idle",
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (!kind || !title) {
     return (
       <section
         aria-label={resolvedLabels.region}
         className={cn(
-          "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+          "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
           className,
         )}
         data-object-inspector
-        data-object-kind={kind}
-        data-object-status={status}
+        data-object-state="empty"
         ref={ref}
         {...rest}
       >
-        <Header kind={kind} status={status} subtitle={subtitle} title={title} />
-        {children ? <div className="space-y-2">{children}</div> : null}
+        <span aria-hidden="true" className="text-lg">
+          ◇
+        </span>
+        <span>{resolvedLabels.empty}</span>
       </section>
     );
-  },
-);
+  }
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+        className,
+      )}
+      data-object-inspector
+      data-object-kind={kind}
+      data-object-status={status}
+      ref={ref}
+      {...rest}
+    >
+      <Header kind={kind} status={status} subtitle={subtitle} title={title} />
+      {children ? <div className="space-y-2">{children}</div> : null}
+    </section>
+  );
+};
 ObjectInspector.displayName = "ObjectInspector";
diff --git a/packages/ui/src/components/order-book/order-book.tsx b/packages/ui/src/components/order-book/order-book.tsx
index 338629ae..6a331a4b 100644
--- a/packages/ui/src/components/order-book/order-book.tsx
+++ b/packages/ui/src/components/order-book/order-book.tsx
@@ -104,58 +104,61 @@ function BookSide({
   );
 }
 
-export const OrderBook = React.forwardRef<HTMLDivElement, OrderBookProps>(
-  ({ asks, bids, className, precision = 2, ...props }, reference) => {
-    if (asks.length === 0 && bids.length === 0) {
-      return null;
-    }
+export const OrderBook = ({
+  asks,
+  bids,
+  className,
+  precision = 2,
+  ref: reference,
+  ...props
+}: OrderBookProps & React.RefAttributes<HTMLDivElement>) => {
+  if (asks.length === 0 && bids.length === 0) {
+    return null;
+  }
 
-    const askLevels = withCumulativeTotal(asks);
-    const bidLevels = withCumulativeTotal(bids);
-    const bestAsk = askLevels[0];
-    const bestBid = bidLevels[0];
-    const spread =
-      bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
+  const askLevels = withCumulativeTotal(asks);
+  const bidLevels = withCumulativeTotal(bids);
+  const bestAsk = askLevels[0];
+  const bestBid = bidLevels[0];
+  const spread =
+    bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
 
-    return (
-      <div
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              Level II
-            </p>
-            <h2 className="text-lg font-semibold text-foreground">
-              Order book
-            </h2>
-          </div>
-          <div className="rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums">
-            Spread {formatNumber(spread, precision)}
-          </div>
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            Level II
+          </p>
+          <h2 className="text-lg font-semibold text-foreground">Order book</h2>
         </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <BookSide
-            accent="ask"
-            levels={askLevels}
-            precision={precision}
-            title="Asks"
-          />
-          <BookSide
-            accent="bid"
-            levels={bidLevels}
-            precision={precision}
-            title="Bids"
-          />
+        <div className="rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums">
+          Spread {formatNumber(spread, precision)}
         </div>
       </div>
-    );
-  },
-);
+      <div className="grid gap-4 lg:grid-cols-2">
+        <BookSide
+          accent="ask"
+          levels={askLevels}
+          precision={precision}
+          title="Asks"
+        />
+        <BookSide
+          accent="bid"
+          levels={bidLevels}
+          precision={precision}
+          title="Bids"
+        />
+      </div>
+    </div>
+  );
+};
 
 OrderBook.displayName = "OrderBook";
diff --git a/packages/ui/src/components/overview-board/overview-board.tsx b/packages/ui/src/components/overview-board/overview-board.tsx
index cd764f19..ba21f1ae 100644
--- a/packages/ui/src/components/overview-board/overview-board.tsx
+++ b/packages/ui/src/components/overview-board/overview-board.tsx
@@ -1,11 +1,8 @@
-import { forwardRef } from "react";
-
 import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
-
 export type OverviewCardTone = "danger" | "default" | "warning";
 
 export type OverviewCardProps = React.ComponentPropsWithoutRef<"section"> & {
@@ -30,64 +27,60 @@ const toneAccentClassNames: Record<OverviewCardTone, string> = {
   warning: "text-amber-600 dark:text-amber-300",
 };
 
-const OverviewCard = forwardRef<HTMLElement, OverviewCardProps>(
-  (
-    {
+const OverviewCard = ({
+  className,
+  ctaLabel,
+  description,
+  handleCtaClick,
+  heading,
+  icon,
+  metric,
+  ref,
+  tone = "default",
+  ...props
+}: OverviewCardProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn(
+      "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
+      toneClassNames[tone],
       className,
-      ctaLabel,
-      description,
-      handleCtaClick,
-      heading,
-      icon,
-      metric,
-      tone = "default",
-      ...props
-    },
-    ref,
-  ) => (
-    <section
-      className={cn(
-        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
-        toneClassNames[tone],
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="space-y-2">
-          <div className="text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
-            {heading}
-          </div>
-          <div className="text-3xl font-semibold tracking-tight text-foreground">
-            {metric}
-          </div>
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="flex items-start justify-between gap-3">
+      <div className="space-y-2">
+        <div className="text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
+          {heading}
         </div>
-        <div
-          className={cn(
-            "flex size-10 items-center justify-center rounded-xl bg-background/80",
-            toneAccentClassNames[tone],
-          )}
-        >
-          {icon}
+        <div className="text-3xl font-semibold tracking-tight text-foreground">
+          {metric}
         </div>
       </div>
-      <p className="text-sm leading-6 text-muted-foreground">{description}</p>
-      {ctaLabel ? (
-        <div>
-          <Button
-            onClick={handleCtaClick}
-            size="sm"
-            type="button"
-            variant="ghost"
-          >
-            {ctaLabel}
-            <ArrowRight className="size-4" />
-          </Button>
-        </div>
-      ) : null}
-    </section>
-  ),
+      <div
+        className={cn(
+          "flex size-10 items-center justify-center rounded-xl bg-background/80",
+          toneAccentClassNames[tone],
+        )}
+      >
+        {icon}
+      </div>
+    </div>
+    <p className="text-sm leading-6 text-muted-foreground">{description}</p>
+    {ctaLabel ? (
+      <div>
+        <Button
+          onClick={handleCtaClick}
+          size="sm"
+          type="button"
+          variant="ghost"
+        >
+          {ctaLabel}
+          <ArrowRight className="size-4" />
+        </Button>
+      </div>
+    ) : null}
+  </section>
 );
 
 OverviewCard.displayName = "OverviewCard";
@@ -130,52 +123,57 @@ function getDefaultIcon(heading: ReactNode) {
   return <Inbox className="size-5" />;
 }
 
-const OverviewBoard = forwardRef<HTMLElement, OverviewBoardProps>(
-  ({ className, eyebrow, heading, items, subtitle, ...props }, ref) => (
-    <section
-      className={cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className)}
-      ref={ref}
-      {...props}
-    >
-      <div className="space-y-3">
-        {eyebrow ? (
-          <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground">
-            {eyebrow}
-          </div>
-        ) : null}
-        <div className="space-y-2">
-          <h2 className="text-3xl font-semibold tracking-tight text-foreground">
-            {heading}
-          </h2>
-          {subtitle ? (
-            <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
-              {subtitle}
-            </p>
-          ) : null}
+const OverviewBoard = ({
+  className,
+  eyebrow,
+  heading,
+  items,
+  ref,
+  subtitle,
+  ...props
+}: OverviewBoardProps & React.RefAttributes<HTMLElement>) => (
+  <section
+    className={cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className)}
+    ref={ref}
+    {...props}
+  >
+    <div className="space-y-3">
+      {eyebrow ? (
+        <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground">
+          {eyebrow}
         </div>
+      ) : null}
+      <div className="space-y-2">
+        <h2 className="text-3xl font-semibold tracking-tight text-foreground">
+          {heading}
+        </h2>
+        {subtitle ? (
+          <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+            {subtitle}
+          </p>
+        ) : null}
       </div>
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {items.map((item) => {
-          const handleCtaClick = item.handleCtaClick;
-
-          return (
-            <OverviewCard
-              ctaLabel={item.ctaLabel}
-              description={item.description}
-              handleCtaClick={handleCtaClick}
-              heading={item.heading}
-              icon={item.icon ?? getDefaultIcon(item.heading)}
-              key={item.id}
-              metric={item.metric}
-              tone={item.tone}
-            />
-          );
-        })}
-      </div>
-    </section>
-  ),
+    </div>
+    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {items.map((item) => {
+        const handleCtaClick = item.handleCtaClick;
+
+        return (
+          <OverviewCard
+            ctaLabel={item.ctaLabel}
+            description={item.description}
+            handleCtaClick={handleCtaClick}
+            heading={item.heading}
+            icon={item.icon ?? getDefaultIcon(item.heading)}
+            key={item.id}
+            metric={item.metric}
+            tone={item.tone}
+          />
+        );
+      })}
+    </div>
+  </section>
 );
 
 OverviewBoard.displayName = "OverviewBoard";
-
 export { OverviewBoard, OverviewCard };
diff --git a/packages/ui/src/components/parallel-timeline/parallel-timeline.tsx b/packages/ui/src/components/parallel-timeline/parallel-timeline.tsx
index e35921df..9589567a 100644
--- a/packages/ui/src/components/parallel-timeline/parallel-timeline.tsx
+++ b/packages/ui/src/components/parallel-timeline/parallel-timeline.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -373,54 +368,55 @@ function TrackRow({ endYear, startYear, track }: TrackRowProps): ReactNode {
  *
  * @public
  */
-export const ParallelTimeline = forwardRef<HTMLElement, ParallelTimelineProps>(
-  (props, ref) => {
-    const {
-      className,
-      endYear,
-      eras = [],
-      labels,
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      tracks,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount],
-    );
+export const ParallelTimeline = (
+  props: ParallelTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    endYear,
+    eras = [],
+    labels,
+    ref,
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    tracks,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount],
+  );
 
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <div className="flex items-stretch gap-3 border-b border-border">
-          <div aria-hidden="true" className="w-32 shrink-0" />
-          <Axis ticks={ticks} />
-        </div>
-        <div className="relative">
-          <EraBands endYear={endYear} eras={eras} startYear={startYear} />
-          {tracks.map((track) => (
-            <TrackRow
-              endYear={endYear}
-              key={track.id}
-              startYear={startYear}
-              track={track}
-            />
-          ))}
-        </div>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <div className="flex items-stretch gap-3 border-b border-border">
+        <div aria-hidden="true" className="w-32 shrink-0" />
+        <Axis ticks={ticks} />
+      </div>
+      <div className="relative">
+        <EraBands endYear={endYear} eras={eras} startYear={startYear} />
+        {tracks.map((track) => (
+          <TrackRow
+            endYear={endYear}
+            key={track.id}
+            startYear={startYear}
+            track={track}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
 ParallelTimeline.displayName = "ParallelTimeline";
diff --git a/packages/ui/src/components/password-input/password-input.tsx b/packages/ui/src/components/password-input/password-input.tsx
index e998413d..682a5a6d 100644
--- a/packages/ui/src/components/password-input/password-input.tsx
+++ b/packages/ui/src/components/password-input/password-input.tsx
@@ -14,43 +14,39 @@ export type PasswordInputProps = Omit<
   showLabel?: string;
 };
 
-const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  (
-    {
-      className,
-      hideLabel = "Hide password",
-      showLabel = "Show password",
-      ...props
-    },
-    reference,
-  ) => {
-    const [visible, setVisible] = React.useState(false);
+const PasswordInput = ({
+  className,
+  hideLabel = "Hide password",
+  ref: reference,
+  showLabel = "Show password",
+  ...props
+}: PasswordInputProps & React.RefAttributes<HTMLInputElement>) => {
+  const [visible, setVisible] = React.useState(false);
 
-    return (
-      <div className="relative">
-        <input
-          className={cn(
-            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            className,
-          )}
-          ref={reference}
-          type={visible ? "text" : "password"}
-          {...props}
-        />
-        <button
-          aria-label={visible ? hideLabel : showLabel}
-          className="absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground"
-          onClick={() => {
-            setVisible((previous) => !previous);
-          }}
-          type="button"
-        >
-          {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-        </button>
-      </div>
-    );
-  },
-);
+  return (
+    <div className="relative">
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={reference}
+        type={visible ? "text" : "password"}
+        {...props}
+      />
+      <button
+        aria-label={visible ? hideLabel : showLabel}
+        className="absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground"
+        onClick={() => {
+          setVisible((previous) => !previous);
+        }}
+        type="button"
+      >
+        {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+      </button>
+    </div>
+  );
+};
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };
diff --git a/packages/ui/src/components/plan-badge/plan-badge.tsx b/packages/ui/src/components/plan-badge/plan-badge.tsx
index 29c9c685..3cdf352a 100644
--- a/packages/ui/src/components/plan-badge/plan-badge.tsx
+++ b/packages/ui/src/components/plan-badge/plan-badge.tsx
@@ -50,30 +50,35 @@ function getPlanClasses(tier: PlanBadgeTier, state: PlanBadgeState): string {
   }
 }
 
-export const PlanBadge = React.forwardRef<HTMLSpanElement, PlanBadgeProps>(
-  ({ className, label, state = "current", tier, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
-          getPlanClasses(tier, state),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
-        <span>{label ?? getPlanLabel(tier)}</span>
-        {state === "trial" ? (
-          <span className="text-current/80">Trial</span>
-        ) : null}
-        {state === "legacy" ? (
-          <span className="text-current/80">Legacy</span>
-        ) : null}
-      </span>
-    );
-  },
-);
+export const PlanBadge = ({
+  className,
+  label,
+  ref: reference,
+  state = "current",
+  tier,
+  ...props
+}: PlanBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
+        getPlanClasses(tier, state),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span>{label ?? getPlanLabel(tier)}</span>
+      {state === "trial" ? (
+        <span className="text-current/80">Trial</span>
+      ) : null}
+      {state === "legacy" ? (
+        <span className="text-current/80">Legacy</span>
+      ) : null}
+    </span>
+  );
+};
 
 PlanBadge.displayName = "PlanBadge";
diff --git a/packages/ui/src/components/playback-ghost/playback-ghost.tsx b/packages/ui/src/components/playback-ghost/playback-ghost.tsx
index e5a86fd5..6ef710a2 100644
--- a/packages/ui/src/components/playback-ghost/playback-ghost.tsx
+++ b/packages/ui/src/components/playback-ghost/playback-ghost.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -105,57 +101,58 @@ const clamp01 = (v: number): number => {
  *
  * @public
  */
-export const PlaybackGhost = forwardRef<HTMLDivElement, PlaybackGhostProps>(
-  (props, ref) => {
-    const {
-      className,
-      kind,
-      label,
-      labels,
-      opacity = 0.4,
-      size = 40,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeOpacity = clamp01(opacity);
-    const safeSize = size < 16 ? 16 : size;
-    const ariaLabel = kind
-      ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}`
-      : resolvedLabels.region;
-    return (
-      <div
-        aria-label={ariaLabel}
-        className={cn(
-          "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
-          className,
-        )}
-        data-playback-ghost
-        data-playback-kind={kind ?? "unknown"}
-        ref={ref}
-        role="img"
-        style={{
-          left: x,
-          minHeight: safeSize,
-          minWidth: safeSize,
-          opacity: safeOpacity,
-          top: y,
-        }}
-        {...rest}
-      >
-        {kind ? (
-          <span aria-hidden="true" className="text-muted-foreground">
-            {KIND_GLYPH[kind]}
-          </span>
-        ) : null}
-        {label ? (
-          <span className="truncate" data-playback-ghost-label>
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const PlaybackGhost = (
+  props: PlaybackGhostProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    kind,
+    label,
+    labels,
+    opacity = 0.4,
+    ref,
+    size = 40,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeOpacity = clamp01(opacity);
+  const safeSize = size < 16 ? 16 : size;
+  const ariaLabel = kind
+    ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}`
+    : resolvedLabels.region;
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
+        className,
+      )}
+      data-playback-ghost
+      data-playback-kind={kind ?? "unknown"}
+      ref={ref}
+      role="img"
+      style={{
+        left: x,
+        minHeight: safeSize,
+        minWidth: safeSize,
+        opacity: safeOpacity,
+        top: y,
+      }}
+      {...rest}
+    >
+      {kind ? (
+        <span aria-hidden="true" className="text-muted-foreground">
+          {KIND_GLYPH[kind]}
+        </span>
+      ) : null}
+      {label ? (
+        <span className="truncate" data-playback-ghost-label>
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 PlaybackGhost.displayName = "PlaybackGhost";
diff --git a/packages/ui/src/components/policy-delivery-panel/policy-delivery-panel.tsx b/packages/ui/src/components/policy-delivery-panel/policy-delivery-panel.tsx
index 9225b560..9589991b 100644
--- a/packages/ui/src/components/policy-delivery-panel/policy-delivery-panel.tsx
+++ b/packages/ui/src/components/policy-delivery-panel/policy-delivery-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -153,11 +149,17 @@ const Row = (props: { policy: PolicyEntry }): React.ReactElement => {
  *
  * @public
  */
-export const PolicyDeliveryPanel = forwardRef<
-  HTMLElement,
-  PolicyDeliveryPanelProps
->((props, ref) => {
-  const { className, labels, policies, title = "Policies", ...rest } = props;
+export const PolicyDeliveryPanel = (
+  props: PolicyDeliveryPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    labels,
+    policies,
+    ref,
+    title = "Policies",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -193,5 +195,5 @@ export const PolicyDeliveryPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 PolicyDeliveryPanel.displayName = "PolicyDeliveryPanel";
diff --git a/packages/ui/src/components/popover/popover.tsx b/packages/ui/src/components/popover/popover.tsx
index dbffb951..6bb086f5 100644
--- a/packages/ui/src/components/popover/popover.tsx
+++ b/packages/ui/src/components/popover/popover.tsx
@@ -1,21 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "../../lib/utils";
-
 const Popover = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
-
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-const PopoverContent = forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = "center", className, sideOffset = 4, ...props }, ref) => (
+const PopoverContent = ({
+  align = "center",
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof PopoverPrimitive.Content>>) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       align={align}
@@ -28,7 +26,7 @@ const PopoverContent = forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+);
 
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
diff --git a/packages/ui/src/components/presence-stack/presence-stack.tsx b/packages/ui/src/components/presence-stack/presence-stack.tsx
index 4a1e2a9a..5a9d4555 100644
--- a/packages/ui/src/components/presence-stack/presence-stack.tsx
+++ b/packages/ui/src/components/presence-stack/presence-stack.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -122,46 +118,47 @@ const Avatar = (props: { user: PresenceUser }): React.ReactElement => {
  *
  * @public
  */
-export const PresenceStack = forwardRef<HTMLDivElement, PresenceStackProps>(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      max = 5,
-      onOverflowActivate,
-      users,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const visible = max >= users.length ? users : users.slice(0, max);
-    const hidden = users.length - visible.length;
-    const handleOverflow = (): void => {
-      onOverflowActivate?.();
-    };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn("inline-flex items-center pl-2", className)}
-        data-presence-stack
-        ref={ref}
-        role="group"
-        {...rest}
-      >
-        {visible.map((user) => (
-          <Avatar key={user.id} user={user} />
-        ))}
-        {hidden > 0
-          ? renderOverflow({
-              count: hidden,
-              handleClick: handleOverflow,
-              handlerProvided: Boolean(onOverflowActivate),
-              labels: resolvedLabels,
-            })
-          : null}
-      </div>
-    );
-  },
-);
+export const PresenceStack = (
+  props: PresenceStackProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    className,
+    labels,
+    max = 5,
+    onOverflowActivate,
+    ref,
+    users,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = max >= users.length ? users : users.slice(0, max);
+  const hidden = users.length - visible.length;
+  const handleOverflow = (): void => {
+    onOverflowActivate?.();
+  };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn("inline-flex items-center pl-2", className)}
+      data-presence-stack
+      ref={ref}
+      role="group"
+      {...rest}
+    >
+      {visible.map((user) => (
+        <Avatar key={user.id} user={user} />
+      ))}
+      {hidden > 0
+        ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels,
+          })
+        : null}
+    </div>
+  );
+};
 PresenceStack.displayName = "PresenceStack";
 
 const renderOverflow = (input: {
diff --git a/packages/ui/src/components/presence-sync-indicator/presence-sync-indicator.tsx b/packages/ui/src/components/presence-sync-indicator/presence-sync-indicator.tsx
index e28579fe..c44d4aa5 100644
--- a/packages/ui/src/components/presence-sync-indicator/presence-sync-indicator.tsx
+++ b/packages/ui/src/components/presence-sync-indicator/presence-sync-indicator.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -90,11 +86,10 @@ export type PresenceSyncIndicatorProps = {
  *
  * @public
  */
-export const PresenceSyncIndicator = forwardRef<
-  HTMLDivElement,
-  PresenceSyncIndicatorProps
->((props, ref) => {
-  const { className, label, labels, state, status, ...rest } = props;
+export const PresenceSyncIndicator = (
+  props: PresenceSyncIndicatorProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, label, labels, ref, state, status, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const text = label ?? STATE_LABEL[state];
   return (
@@ -126,5 +121,5 @@ export const PresenceSyncIndicator = forwardRef<
       ) : null}
     </div>
   );
-});
+};
 PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
diff --git a/packages/ui/src/components/pricing-table/pricing-table.tsx b/packages/ui/src/components/pricing-table/pricing-table.tsx
index 645dfc66..5100bb9e 100644
--- a/packages/ui/src/components/pricing-table/pricing-table.tsx
+++ b/packages/ui/src/components/pricing-table/pricing-table.tsx
@@ -3,7 +3,6 @@
 import {
   type ButtonHTMLAttributes,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useState,
@@ -231,45 +230,44 @@ function PlanCta({ cta, highlighted }: PlanCtaProps): ReactNode {
  *
  * @public
  */
-export const PricingPlan = forwardRef<HTMLDivElement, PricingPlanProps>(
-  (props, ref) => {
-    const {
-      badge,
-      className,
-      cta,
-      description,
-      features,
-      highlighted = false,
-      name,
-      period,
-      price,
-      ...rest
-    } = props;
-    return (
-      <div
-        className={cn(
-          "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
-          highlighted
-            ? "border-primary shadow-md ring-1 ring-primary/20"
-            : "border-border",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {badge ? (
-          <PlanBadgePill badge={badge} highlighted={highlighted} />
-        ) : null}
-        <PlanHeader description={description} name={name} />
-        <PlanPrice period={period} price={price} />
-        {features && features.length > 0 ? (
-          <PlanFeatures features={features} />
-        ) : null}
-        {cta ? <PlanCta cta={cta} highlighted={highlighted} /> : null}
-      </div>
-    );
-  },
-);
+export const PricingPlan = (
+  props: PricingPlanProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    badge,
+    className,
+    cta,
+    description,
+    features,
+    highlighted = false,
+    name,
+    period,
+    price,
+    ref,
+    ...rest
+  } = props;
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
+        highlighted
+          ? "border-primary shadow-md ring-1 ring-primary/20"
+          : "border-border",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {badge ? <PlanBadgePill badge={badge} highlighted={highlighted} /> : null}
+      <PlanHeader description={description} name={name} />
+      <PlanPrice period={period} price={price} />
+      {features && features.length > 0 ? (
+        <PlanFeatures features={features} />
+      ) : null}
+      {cta ? <PlanCta cta={cta} highlighted={highlighted} /> : null}
+    </div>
+  );
+};
 PricingPlan.displayName = "PricingPlan";
 
 /**
@@ -382,45 +380,46 @@ function PeriodToggle({
  *
  * @public
  */
-export const PricingTable = forwardRef<HTMLDivElement, PricingTableProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultPeriod = "monthly",
-      onPeriodChange,
-      period: controlledPeriod,
-      periodLabels,
-      showPeriodToggle = false,
-      ...rest
-    } = props;
+export const PricingTable = (
+  props: PricingTableProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    defaultPeriod = "monthly",
+    onPeriodChange,
+    period: controlledPeriod,
+    periodLabels,
+    ref,
+    showPeriodToggle = false,
+    ...rest
+  } = props;
 
-    const [uncontrolledPeriod, setUncontrolledPeriod] =
-      useState<PricingPeriod>(defaultPeriod);
-    const period = controlledPeriod ?? uncontrolledPeriod;
+  const [uncontrolledPeriod, setUncontrolledPeriod] =
+    useState<PricingPeriod>(defaultPeriod);
+  const period = controlledPeriod ?? uncontrolledPeriod;
 
-    const handlePeriodChange = useCallback(
-      (next: PricingPeriod) => {
-        if (controlledPeriod === undefined) setUncontrolledPeriod(next);
-        onPeriodChange?.(next);
-      },
-      [controlledPeriod, onPeriodChange],
-    );
+  const handlePeriodChange = useCallback(
+    (next: PricingPeriod) => {
+      if (controlledPeriod === undefined) setUncontrolledPeriod(next);
+      onPeriodChange?.(next);
+    },
+    [controlledPeriod, onPeriodChange],
+  );
 
-    return (
-      <div className={cn("flex flex-col gap-6", className)} ref={ref} {...rest}>
-        {showPeriodToggle ? (
-          <PeriodToggle
-            labels={periodLabels ?? {}}
-            onChange={handlePeriodChange}
-            period={period}
-          />
-        ) : null}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {children}
-        </div>
+  return (
+    <div className={cn("flex flex-col gap-6", className)} ref={ref} {...rest}>
+      {showPeriodToggle ? (
+        <PeriodToggle
+          labels={periodLabels ?? {}}
+          onChange={handlePeriodChange}
+          period={period}
+        />
+      ) : null}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 PricingTable.displayName = "PricingTable";
diff --git a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.tsx b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.tsx
index f1061136..259ac83f 100644
--- a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.tsx
+++ b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.tsx
@@ -3,10 +3,9 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState,
@@ -117,7 +116,7 @@ type ViewerCtx = {
 const ViewerContext = createContext<null | ViewerCtx>(null);
 
 function useViewerContext(): ViewerCtx {
-  const ctx = useContext(ViewerContext);
+  const ctx = use(ViewerContext);
   if (!ctx) {
     throw new Error("PrimarySourceViewer subcomponent used outside its root.");
   }
@@ -162,10 +161,12 @@ function useViewerState(
  *
  * @public
  */
-export const PrimarySourceToolbar = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 px-4 py-2",
@@ -177,7 +178,7 @@ export const PrimarySourceToolbar = forwardRef<
   >
     {children}
   </div>
-));
+);
 PrimarySourceToolbar.displayName = "PrimarySourceToolbar";
 
 type ToolbarButtonProps = {
@@ -186,22 +187,27 @@ type ToolbarButtonProps = {
   onActivate: () => void;
 } & Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">;
 
-const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => (
-    <button
-      aria-label={ariaLabel}
-      className={cn(
-        "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className,
-      )}
-      onClick={onActivate}
-      ref={ref}
-      type="button"
-      {...rest}
-    >
-      {glyph}
-    </button>
-  ),
+const ToolbarButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>) => (
+  <button
+    aria-label={ariaLabel}
+    className={cn(
+      "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className,
+    )}
+    onClick={onActivate}
+    ref={ref}
+    type="button"
+    {...rest}
+  >
+    {glyph}
+  </button>
 );
 ToolbarButton.displayName = "ToolbarButton";
 
@@ -210,10 +216,11 @@ ToolbarButton.displayName = "ToolbarButton";
  *
  * @public
  */
-export const PrimarySourceZoomIn = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceZoomIn = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomIn } = useViewerContext();
   return (
     <ToolbarButton
@@ -224,7 +231,7 @@ export const PrimarySourceZoomIn = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
 
 /**
@@ -232,10 +239,11 @@ PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
  *
  * @public
  */
-export const PrimarySourceZoomOut = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceZoomOut = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, zoomOut } = useViewerContext();
   return (
     <ToolbarButton
@@ -246,7 +254,7 @@ export const PrimarySourceZoomOut = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
 
 /**
@@ -254,10 +262,11 @@ PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
  *
  * @public
  */
-export const PrimarySourceRotate = forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type">
->(({ ...rest }, ref) => {
+export const PrimarySourceRotate = ({
+  ref,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick" | "type"> &
+  React.RefAttributes<HTMLButtonElement>) => {
   const { labels, rotate } = useViewerContext();
   return (
     <ToolbarButton
@@ -268,7 +277,7 @@ export const PrimarySourceRotate = forwardRef<
       {...rest}
     />
   );
-});
+};
 PrimarySourceRotate.displayName = "PrimarySourceRotate";
 
 /**
@@ -310,10 +319,12 @@ export type PrimarySourceAnnotationProps = {
  *
  * @public
  */
-export const PrimarySourceAnnotations = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceAnnotations = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Annotations"
     className={cn("pointer-events-none absolute inset-0 z-10", className)}
@@ -322,7 +333,7 @@ export const PrimarySourceAnnotations = forwardRef<
   >
     {children}
   </div>
-));
+);
 PrimarySourceAnnotations.displayName = "PrimarySourceAnnotations";
 
 type AnnotationTooltipProps = {
@@ -365,16 +376,16 @@ function AnnotationTooltip({
  *
  * @public
  */
-export const PrimarySourceAnnotation = forwardRef<
-  HTMLButtonElement,
-  PrimarySourceAnnotationProps
->((props, ref) => {
+export const PrimarySourceAnnotation = (
+  props: PrimarySourceAnnotationProps & React.RefAttributes<HTMLButtonElement>,
+) => {
   const {
     category,
     className,
     color = "amber",
     id,
     note,
+    ref,
     region,
     ...rest
   } = props;
@@ -412,7 +423,7 @@ export const PrimarySourceAnnotation = forwardRef<
       />
     </button>
   );
-});
+};
 PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
 
 /**
@@ -420,10 +431,12 @@ PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
  *
  * @public
  */
-export const PrimarySourceTranscription = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"aside">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceTranscription = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"aside"> & React.RefAttributes<HTMLDivElement>) => (
   <aside
     aria-label="Transcription"
     className={cn(
@@ -438,7 +451,7 @@ export const PrimarySourceTranscription = forwardRef<
     </h3>
     <div className="space-y-2 text-foreground">{children}</div>
   </aside>
-));
+);
 PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
 
 /**
@@ -446,10 +459,12 @@ PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
  *
  * @public
  */
-export const PrimarySourceContext = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"footer">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceContext = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"footer"> & React.RefAttributes<HTMLElement>) => (
   <footer
     className={cn(
       "grid gap-6 border-t border-border bg-muted/30 p-4 md:grid-cols-2",
@@ -460,7 +475,7 @@ export const PrimarySourceContext = forwardRef<
   >
     {children}
   </footer>
-));
+);
 PrimarySourceContext.displayName = "PrimarySourceContext";
 
 /**
@@ -469,10 +484,12 @@ PrimarySourceContext.displayName = "PrimarySourceContext";
  *
  * @public
  */
-export const PrimarySourceMetadata = forwardRef<
-  HTMLDListElement,
-  ComponentPropsWithoutRef<"dl">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceMetadata = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"dl"> & React.RefAttributes<HTMLDListElement>) => (
   <dl
     aria-label="Metadata"
     className={cn(
@@ -484,7 +501,7 @@ export const PrimarySourceMetadata = forwardRef<
   >
     {children}
   </dl>
-));
+);
 PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
 
 /**
@@ -492,10 +509,12 @@ PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
  *
  * @public
  */
-export const PrimarySourceQuestions = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->(({ children, className, ...rest }, ref) => (
+export const PrimarySourceQuestions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: ComponentPropsWithoutRef<"div"> & React.RefAttributes<HTMLDivElement>) => (
   <div
     aria-label="Discussion questions"
     className={cn("space-y-2 text-sm", className)}
@@ -507,7 +526,7 @@ export const PrimarySourceQuestions = forwardRef<
     </h3>
     <div className="space-y-1 text-foreground">{children}</div>
   </div>
-));
+);
 PrimarySourceQuestions.displayName = "PrimarySourceQuestions";
 
 type ChildBuckets = {
@@ -639,16 +658,16 @@ export type PrimarySourceViewerProps = {
  *
  * @public
  */
-export const PrimarySourceViewer = forwardRef<
-  HTMLElement,
-  PrimarySourceViewerProps
->((props, ref) => {
+export const PrimarySourceViewer = (
+  props: PrimarySourceViewerProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     children,
     className,
     labels,
     origin,
     period,
+    ref,
     source,
     title,
     ...rest
@@ -697,5 +716,5 @@ export const PrimarySourceViewer = forwardRef<
       </section>
     </ViewerContext.Provider>
   );
-});
+};
 PrimarySourceViewer.displayName = "PrimarySourceViewer";
diff --git a/packages/ui/src/components/progress-tracker/progress-tracker.tsx b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
index f7079a0c..0da8488b 100644
--- a/packages/ui/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
@@ -195,7 +195,7 @@ function useChecklistProgress(
 }
 
 function useProgressTrackerContext(): ProgressTrackerContextValue {
-  const context = React.useContext(ProgressTrackerContext);
+  const context = React.use(ProgressTrackerContext);
 
   if (!context) {
     throw new Error(
diff --git a/packages/ui/src/components/prompt-templates/prompt-templates.tsx b/packages/ui/src/components/prompt-templates/prompt-templates.tsx
index 0036744e..a66a9ad7 100644
--- a/packages/ui/src/components/prompt-templates/prompt-templates.tsx
+++ b/packages/ui/src/components/prompt-templates/prompt-templates.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useCallback,
   useId,
@@ -595,37 +594,37 @@ function TemplateGrid({ controller, labels }: GridProps): ReactNode {
   );
 }
 
-export const PromptTemplates = forwardRef<HTMLElement, PromptTemplatesProps>(
-  (props, ref) => {
-    const { categories, className, labels, onSelect, templates, ...rest } =
-      props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
-    const controller = usePromptTemplatesController(templates, onSelect);
+export const PromptTemplates = (
+  props: PromptTemplatesProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { categories, className, labels, onSelect, ref, templates, ...rest } =
+    props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+  const controller = usePromptTemplatesController(templates, onSelect);
 
-    return (
-      <section
-        className={cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        <FilterBar
-          categories={categories ?? []}
-          labels={resolvedLabels}
-          onCategoryChange={controller.handleCategoryChange}
-          onQueryChange={controller.handleQueryChange}
-          query={controller.query}
-          searchId={controller.searchId}
-          selectedCategory={controller.selectedCategory}
-        />
-        <TemplateGrid controller={controller} labels={resolvedLabels} />
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <FilterBar
+        categories={categories ?? []}
+        labels={resolvedLabels}
+        onCategoryChange={controller.handleCategoryChange}
+        onQueryChange={controller.handleQueryChange}
+        query={controller.query}
+        searchId={controller.searchId}
+        selectedCategory={controller.selectedCategory}
+      />
+      <TemplateGrid controller={controller} labels={resolvedLabels} />
+    </section>
+  );
+};
 PromptTemplates.displayName = "PromptTemplates";
diff --git a/packages/ui/src/components/property-section/property-section.tsx b/packages/ui/src/components/property-section/property-section.tsx
index 610c16c1..6e7434b1 100644
--- a/packages/ui/src/components/property-section/property-section.tsx
+++ b/packages/ui/src/components/property-section/property-section.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -139,31 +135,32 @@ const Body = (props: {
  *
  * @public
  */
-export const PropertySection = forwardRef<HTMLElement, PropertySectionProps>(
-  (props, ref) => {
-    const {
-      className,
-      collapsible = false,
-      entries,
-      labels,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "rounded-lg border bg-background text-foreground",
-          className,
-        )}
-        data-property-section
-        ref={ref}
-        {...rest}
-      >
-        <Body collapsible={collapsible} entries={entries} title={title} />
-      </section>
-    );
-  },
-);
+export const PropertySection = (
+  props: PropertySectionProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    collapsible = false,
+    entries,
+    labels,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "rounded-lg border bg-background text-foreground",
+        className,
+      )}
+      data-property-section
+      ref={ref}
+      {...rest}
+    >
+      <Body collapsible={collapsible} entries={entries} title={title} />
+    </section>
+  );
+};
 PropertySection.displayName = "PropertySection";
diff --git a/packages/ui/src/components/radio-group/radio-group.tsx b/packages/ui/src/components/radio-group/radio-group.tsx
index 2a8d92b9..df760cd3 100644
--- a/packages/ui/src/components/radio-group/radio-group.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.tsx
@@ -1,16 +1,15 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
-const RadioGroup = forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+const RadioGroup = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof RadioGroupPrimitive.Root>>) => {
   return (
     <RadioGroupPrimitive.Root
       className={cn("grid gap-2", className)}
@@ -18,13 +17,16 @@ const RadioGroup = forwardRef<
       ref={ref}
     />
   );
-});
+};
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioGroupItem = forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+const RadioGroupItem = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof RadioGroupPrimitive.Item>>) => {
   return (
     <RadioGroupPrimitive.Item
       className={cn(
@@ -39,7 +41,7 @@ const RadioGroupItem = forwardRef<
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+};
 
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };
diff --git a/packages/ui/src/components/relationship-inspector/relationship-inspector.tsx b/packages/ui/src/components/relationship-inspector/relationship-inspector.tsx
index a038331a..ffa629df 100644
--- a/packages/ui/src/components/relationship-inspector/relationship-inspector.tsx
+++ b/packages/ui/src/components/relationship-inspector/relationship-inspector.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -171,11 +167,17 @@ const Group = (props: {
  *
  * @public
  */
-export const RelationshipInspector = forwardRef<
-  HTMLElement,
-  RelationshipInspectorProps
->((props, ref) => {
-  const { className, edges, labels, title = "Relationships", ...rest } = props;
+export const RelationshipInspector = (
+  props: RelationshipInspectorProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    edges,
+    labels,
+    ref,
+    title = "Relationships",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const inbound = edges.filter((edge) => edge.direction === "inbound");
   const outbound = edges.filter((edge) => edge.direction === "outbound");
@@ -210,5 +212,5 @@ export const RelationshipInspector = forwardRef<
       )}
     </section>
   );
-});
+};
 RelationshipInspector.displayName = "RelationshipInspector";
diff --git a/packages/ui/src/components/right-dock/right-dock.tsx b/packages/ui/src/components/right-dock/right-dock.tsx
index f7ecc293..21e2463b 100644
--- a/packages/ui/src/components/right-dock/right-dock.tsx
+++ b/packages/ui/src/components/right-dock/right-dock.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -10,32 +8,37 @@ export type RightDockProps = React.ComponentPropsWithoutRef<"aside"> & {
   title?: ReactNode;
 };
 
-const RightDock = forwardRef<HTMLElement, RightDockProps>(
-  ({ children, className, footer, header, title, ...props }, ref) => (
-    <aside
-      className={cn(
-        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {header || title ? (
-        <div className="border-b border-border/60 px-4 py-3">
-          {title ? (
-            <div className="text-sm font-medium text-foreground">{title}</div>
-          ) : null}
-          {header ? <div className="mt-2">{header}</div> : null}
-        </div>
-      ) : null}
-      <div className="flex-1 overflow-auto p-4">{children}</div>
-      {footer ? (
-        <div className="border-t border-border/60 p-4">{footer}</div>
-      ) : null}
-    </aside>
-  ),
+const RightDock = ({
+  children,
+  className,
+  footer,
+  header,
+  ref,
+  title,
+  ...props
+}: RightDockProps & React.RefAttributes<HTMLElement>) => (
+  <aside
+    className={cn(
+      "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {header || title ? (
+      <div className="border-b border-border/60 px-4 py-3">
+        {title ? (
+          <div className="text-sm font-medium text-foreground">{title}</div>
+        ) : null}
+        {header ? <div className="mt-2">{header}</div> : null}
+      </div>
+    ) : null}
+    <div className="flex-1 overflow-auto p-4">{children}</div>
+    {footer ? (
+      <div className="border-t border-border/60 p-4">{footer}</div>
+    ) : null}
+  </aside>
 );
 
 RightDock.displayName = "RightDock";
-
 export { RightDock };
diff --git a/packages/ui/src/components/role-badge/role-badge.tsx b/packages/ui/src/components/role-badge/role-badge.tsx
index 890408d3..b690b113 100644
--- a/packages/ui/src/components/role-badge/role-badge.tsx
+++ b/packages/ui/src/components/role-badge/role-badge.tsx
@@ -39,23 +39,27 @@ function getRoleClasses(accountRole: RoleBadgeRole): string {
   }
 }
 
-export const RoleBadge = React.forwardRef<HTMLSpanElement, RoleBadgeProps>(
-  ({ accountRole, className, label, ...props }, reference) => {
-    return (
-      <span
-        className={cn(
-          badgeVariants({ variant: "outline" }),
-          "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getRoleClasses(accountRole),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        {label ?? getRoleLabel(accountRole)}
-      </span>
-    );
-  },
-);
+export const RoleBadge = ({
+  accountRole,
+  className,
+  label,
+  ref: reference,
+  ...props
+}: RoleBadgeProps & React.RefAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        badgeVariants({ variant: "outline" }),
+        "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getRoleClasses(accountRole),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      {label ?? getRoleLabel(accountRole)}
+    </span>
+  );
+};
 
 RoleBadge.displayName = "RoleBadge";
diff --git a/packages/ui/src/components/route-map/route-map.tsx b/packages/ui/src/components/route-map/route-map.tsx
index a8d44187..a8e50aad 100644
--- a/packages/ui/src/components/route-map/route-map.tsx
+++ b/packages/ui/src/components/route-map/route-map.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
   useMemo,
@@ -452,7 +451,9 @@ function Stage(props: StageProps): ReactNode {
  *
  * @public
  */
-export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
+export const RouteMap = (
+  props: RouteMapProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     animated = false,
     animationDurationSeconds = 4,
@@ -463,6 +464,7 @@ export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
     color = "red",
     labels,
     lineStyle = "solid",
+    ref,
     showProgressIndicator = false,
     waypoints,
     ...rest
@@ -508,5 +510,5 @@ export const RouteMap = forwardRef<HTMLElement, RouteMapProps>((props, ref) => {
       <DataSummary titleId={titleId} waypoints={waypoints} />
     </section>
   );
-});
+};
 RouteMap.displayName = "RouteMap";
diff --git a/packages/ui/src/components/routing-assignment-panel/routing-assignment-panel.tsx b/packages/ui/src/components/routing-assignment-panel/routing-assignment-panel.tsx
index df6eaaa6..5ea68fc6 100644
--- a/packages/ui/src/components/routing-assignment-panel/routing-assignment-panel.tsx
+++ b/packages/ui/src/components/routing-assignment-panel/routing-assignment-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -173,11 +169,17 @@ const Row = (props: { assignment: RoutingAssignment }): React.ReactElement => {
  *
  * @public
  */
-export const RoutingAssignmentPanel = forwardRef<
-  HTMLElement,
-  RoutingAssignmentPanelProps
->((props, ref) => {
-  const { assignments, className, labels, title = "Routing", ...rest } = props;
+export const RoutingAssignmentPanel = (
+  props: RoutingAssignmentPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    assignments,
+    className,
+    labels,
+    ref,
+    title = "Routing",
+    ...rest
+  } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -213,5 +215,5 @@ export const RoutingAssignmentPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 RoutingAssignmentPanel.displayName = "RoutingAssignmentPanel";
diff --git a/packages/ui/src/components/run-timeline/run-timeline.tsx b/packages/ui/src/components/run-timeline/run-timeline.tsx
index 1da9f9be..633ea7bf 100644
--- a/packages/ui/src/components/run-timeline/run-timeline.tsx
+++ b/packages/ui/src/components/run-timeline/run-timeline.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -307,54 +303,55 @@ const resolveLanes = (
  *
  * @public
  */
-export const RunTimeline = forwardRef<HTMLElement, RunTimelineProps>(
-  (props, ref) => {
-    const {
-      className,
-      cursor,
-      end,
-      formatValue,
-      labels,
-      lanes,
-      phases,
-      start,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeEnd = end <= start ? start + 1 : end;
-    const resolvedLanes = resolveLanes(lanes);
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn("flex w-full flex-col gap-2", className)}
-        data-run-timeline
-        ref={ref}
-        {...rest}
-      >
-        <Endpoints
+export const RunTimeline = (
+  props: RunTimelineProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    cursor,
+    end,
+    formatValue,
+    labels,
+    lanes,
+    phases,
+    ref,
+    start,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeEnd = end <= start ? start + 1 : end;
+  const resolvedLanes = resolveLanes(lanes);
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn("flex w-full flex-col gap-2", className)}
+      data-run-timeline
+      ref={ref}
+      {...rest}
+    >
+      <Endpoints
+        cursor={cursor}
+        end={safeEnd}
+        format={formatValue}
+        start={start}
+      />
+      {phases.length === 0 ? (
+        <p
+          className="rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground"
+          data-run-timeline-state="empty"
+        >
+          {resolvedLabels.empty}
+        </p>
+      ) : (
+        <TrackBody
           cursor={cursor}
           end={safeEnd}
-          format={formatValue}
+          lanes={resolvedLanes}
+          phases={phases}
           start={start}
         />
-        {phases.length === 0 ? (
-          <p
-            className="rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground"
-            data-run-timeline-state="empty"
-          >
-            {resolvedLabels.empty}
-          </p>
-        ) : (
-          <TrackBody
-            cursor={cursor}
-            end={safeEnd}
-            lanes={resolvedLanes}
-            phases={phases}
-            start={start}
-          />
-        )}
-      </section>
-    );
-  },
-);
+      )}
+    </section>
+  );
+};
 RunTimeline.displayName = "RunTimeline";
diff --git a/packages/ui/src/components/runtime-overview-panel/runtime-overview-panel.tsx b/packages/ui/src/components/runtime-overview-panel/runtime-overview-panel.tsx
index e6a0a688..bd6e06fd 100644
--- a/packages/ui/src/components/runtime-overview-panel/runtime-overview-panel.tsx
+++ b/packages/ui/src/components/runtime-overview-panel/runtime-overview-panel.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -141,11 +137,10 @@ const Tile = (props: { metric: RuntimeMetric }): React.ReactElement => {
  *
  * @public
  */
-export const RuntimeOverviewPanel = forwardRef<
-  HTMLElement,
-  RuntimeOverviewPanelProps
->((props, ref) => {
-  const { className, labels, metrics, title = "Runtime", ...rest } = props;
+export const RuntimeOverviewPanel = (
+  props: RuntimeOverviewPanelProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, labels, metrics, ref, title = "Runtime", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return (
     <section
@@ -179,5 +174,5 @@ export const RuntimeOverviewPanel = forwardRef<
       )}
     </section>
   );
-});
+};
 RuntimeOverviewPanel.displayName = "RuntimeOverviewPanel";
diff --git a/packages/ui/src/components/scope-selector/scope-selector.tsx b/packages/ui/src/components/scope-selector/scope-selector.tsx
index c776070a..99d27be6 100644
--- a/packages/ui/src/components/scope-selector/scope-selector.tsx
+++ b/packages/ui/src/components/scope-selector/scope-selector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Check, ChevronRight, Search } from "lucide-react";
 
@@ -445,52 +445,48 @@ function useScopeSelectorState({
   };
 }
 
-const ScopeSelector = forwardRef<HTMLButtonElement, ScopeSelectorProps>(
-  (
-    {
-      className,
-      defaultValue,
-      disabled,
-      emptyMessage = "No scopes available.",
-      nodes,
-      onValueChange,
-      placeholder = "Select scope",
-      searchPlaceholder = "Search scopes...",
-      value,
-    },
-    ref,
-  ) => {
-    const state = useScopeSelectorState({
-      defaultValue,
-      nodes,
-      onValueChange,
-      value,
-    });
+const ScopeSelector = ({
+  className,
+  defaultValue,
+  disabled,
+  emptyMessage = "No scopes available.",
+  nodes,
+  onValueChange,
+  placeholder = "Select scope",
+  ref,
+  searchPlaceholder = "Search scopes...",
+  value,
+}: ScopeSelectorProps & React.RefAttributes<HTMLButtonElement>) => {
+  const state = useScopeSelectorState({
+    defaultValue,
+    nodes,
+    onValueChange,
+    value,
+  });
 
-    return (
-      <Popover onOpenChange={state.handleOpenChange} open={state.open}>
-        <PopoverTrigger asChild>
-          <Button
-            className={cn("w-full justify-between", className)}
-            disabled={disabled}
-            ref={ref}
-            variant="outline"
-          >
-            <span className="truncate text-left">
-              {state.selectedPathLabel ?? placeholder}
-            </span>
-            <ChevronRight className="size-4 shrink-0 rotate-90 text-muted-foreground" />
-          </Button>
-        </PopoverTrigger>
-        <ScopeSelectorPopoverBody
-          emptyMessage={emptyMessage}
-          searchPlaceholder={searchPlaceholder}
-          state={state}
-        />
-      </Popover>
-    );
-  },
-);
+  return (
+    <Popover onOpenChange={state.handleOpenChange} open={state.open}>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn("w-full justify-between", className)}
+          disabled={disabled}
+          ref={ref}
+          variant="outline"
+        >
+          <span className="truncate text-left">
+            {state.selectedPathLabel ?? placeholder}
+          </span>
+          <ChevronRight className="size-4 shrink-0 rotate-90 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <ScopeSelectorPopoverBody
+        emptyMessage={emptyMessage}
+        searchPlaceholder={searchPlaceholder}
+        state={state}
+      />
+    </Popover>
+  );
+};
 
 ScopeSelector.displayName = "ScopeSelector";
 
diff --git a/packages/ui/src/components/scroll-area/scroll-area.tsx b/packages/ui/src/components/scroll-area/scroll-area.tsx
index 6d12224c..c681a4c6 100644
--- a/packages/ui/src/components/scroll-area/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area/scroll-area.tsx
@@ -1,15 +1,15 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 import { cn } from "../../lib/utils";
 
-const ScrollArea = forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ children, className, ...props }, ref) => (
+const ScrollArea = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof ScrollAreaPrimitive.Root>>) => (
   <ScrollAreaPrimitive.Root
     className={cn("relative overflow-hidden", className)}
     ref={ref}
@@ -21,13 +21,21 @@ const ScrollArea = forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-));
+);
+
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+  >) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     className={cn(
       "flex touch-none select-none transition-colors",
@@ -43,7 +51,7 @@ const ScrollBar = forwardRef<
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+);
 
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 export { ScrollArea, ScrollBar };
diff --git a/packages/ui/src/components/segmented-control/segmented-control.tsx b/packages/ui/src/components/segmented-control/segmented-control.tsx
index 07cd765d..c33db535 100644
--- a/packages/ui/src/components/segmented-control/segmented-control.tsx
+++ b/packages/ui/src/components/segmented-control/segmented-control.tsx
@@ -54,29 +54,39 @@ export type SegmentedControlItemProps = React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof segmentedControlItemVariants>;
 
-const SegmentedControl = React.forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
-  SegmentedControlProps
->(({ className, size, ...props }, ref) => (
+const SegmentedControl = ({
+  className,
+  ref,
+  size,
+  ...props
+}: SegmentedControlProps &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Root>
+  >) => (
   <ToggleGroupPrimitive.Root
     className={cn(segmentedControlVariants({ size }), className)}
     ref={ref}
     type="single"
     {...props}
   />
-));
+);
 SegmentedControl.displayName = "SegmentedControl";
 
-const SegmentedControlItem = React.forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
-  SegmentedControlItemProps
->(({ className, size, ...props }, ref) => (
+const SegmentedControlItem = ({
+  className,
+  ref,
+  size,
+  ...props
+}: SegmentedControlItemProps &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Item>
+  >) => (
   <ToggleGroupPrimitive.Item
     className={cn(segmentedControlItemVariants({ size }), className)}
     ref={ref}
     {...props}
   />
-));
+);
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
 export {
diff --git a/packages/ui/src/components/select/select.tsx b/packages/ui/src/components/select/select.tsx
index cb2c698a..d60f92d1 100644
--- a/packages/ui/src/components/select/select.tsx
+++ b/packages/ui/src/components/select/select.tsx
@@ -1,22 +1,19 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-
 const Select = SelectPrimitive.Root;
-
 const SelectGroup = SelectPrimitive.Group;
-
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const SelectTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Trigger>>) => (
   <SelectPrimitive.Trigger
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -30,13 +27,18 @@ const SelectTrigger = forwardRef<
       <ChevronDown className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
+);
+
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>
+  >) => (
   <SelectPrimitive.ScrollUpButton
     className={cn(
       "flex cursor-default items-center justify-center py-1",
@@ -47,13 +49,18 @@ const SelectScrollUpButton = forwardRef<
   >
     <ChevronUp className="size-4" />
   </SelectPrimitive.ScrollUpButton>
-));
+);
+
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>
+  >) => (
   <SelectPrimitive.ScrollDownButton
     className={cn(
       "flex cursor-default items-center justify-center py-1",
@@ -64,14 +71,19 @@ const SelectScrollDownButton = forwardRef<
   >
     <ChevronDown className="size-4" />
   </SelectPrimitive.ScrollDownButton>
-));
+);
+
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
-const SelectContent = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = "popper", ...props }, ref) => (
+const SelectContent = ({
+  children,
+  className,
+  position = "popper",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Content>>) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -97,25 +109,32 @@ const SelectContent = forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
+);
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Label>>) => (
   <SelectPrimitive.Label
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
+const SelectItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
+  React.RefAttributes<React.ComponentRef<typeof SelectPrimitive.Item>>) => (
   <SelectPrimitive.Item
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -129,22 +148,27 @@ const SelectItem = forwardRef<
         <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
+);
+
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SelectPrimitive.Separator>
+  >) => (
   <SelectPrimitive.Separator
     className={cn("-m-1 h-px bg-muted", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
diff --git a/packages/ui/src/components/selection-halo/selection-halo.tsx b/packages/ui/src/components/selection-halo/selection-halo.tsx
index b2fba6f5..d822ef0a 100644
--- a/packages/ui/src/components/selection-halo/selection-halo.tsx
+++ b/packages/ui/src/components/selection-halo/selection-halo.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -67,60 +63,61 @@ export type SelectionHaloProps = {
  *
  * @public
  */
-export const SelectionHalo = forwardRef<HTMLDivElement, SelectionHaloProps>(
-  (props, ref) => {
-    const {
-      bounds,
-      className,
-      label,
-      labels,
-      pulsing = false,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
-          pulsing ? "animate-pulse" : "",
-          className,
-        )}
-        data-pulsing={pulsing ? "true" : undefined}
-        data-selection-halo
-        ref={ref}
-        style={{
-          height: `${bounds.height.toString()}px`,
-          left: `${bounds.x.toString()}px`,
-          top: `${bounds.y.toString()}px`,
-          width: `${bounds.width.toString()}px`,
-        }}
-        {...rest}
-      >
-        {(["nw", "ne", "se", "sw"] as const).map((corner) => (
-          <span
-            aria-hidden="true"
-            className={cn(
-              "absolute size-2 rounded-sm border-2 border-primary bg-background",
-              corner === "nw" && "-left-1 -top-1",
-              corner === "ne" && "-right-1 -top-1",
-              corner === "se" && "-bottom-1 -right-1",
-              corner === "sw" && "-bottom-1 -left-1",
-            )}
-            data-handle-corner={corner}
-            key={corner}
-          />
-        ))}
-        {label ? (
-          <span
-            className="absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm"
-            data-selection-label
-          >
-            {label}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+export const SelectionHalo = (
+  props: SelectionHaloProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    bounds,
+    className,
+    label,
+    labels,
+    pulsing = false,
+    ref,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
+        pulsing ? "animate-pulse" : "",
+        className,
+      )}
+      data-pulsing={pulsing ? "true" : undefined}
+      data-selection-halo
+      ref={ref}
+      style={{
+        height: `${bounds.height.toString()}px`,
+        left: `${bounds.x.toString()}px`,
+        top: `${bounds.y.toString()}px`,
+        width: `${bounds.width.toString()}px`,
+      }}
+      {...rest}
+    >
+      {(["nw", "ne", "se", "sw"] as const).map((corner) => (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "absolute size-2 rounded-sm border-2 border-primary bg-background",
+            corner === "nw" && "-left-1 -top-1",
+            corner === "ne" && "-right-1 -top-1",
+            corner === "se" && "-bottom-1 -right-1",
+            corner === "sw" && "-bottom-1 -left-1",
+          )}
+          data-handle-corner={corner}
+          key={corner}
+        />
+      ))}
+      {label ? (
+        <span
+          className="absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm"
+          data-selection-label
+        >
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 SelectionHalo.displayName = "SelectionHalo";
diff --git a/packages/ui/src/components/selection-presence/selection-presence.tsx b/packages/ui/src/components/selection-presence/selection-presence.tsx
index a197808c..445b4c26 100644
--- a/packages/ui/src/components/selection-presence/selection-presence.tsx
+++ b/packages/ui/src/components/selection-presence/selection-presence.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -67,11 +63,10 @@ export type SelectionPresenceProps = {
  *
  * @public
  */
-export const SelectionPresence = forwardRef<
-  HTMLDivElement,
-  SelectionPresenceProps
->((props, ref) => {
-  const { className, color, height, labels, name, width, x, y, ...rest } =
+export const SelectionPresence = (
+  props: SelectionPresenceProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, color, height, labels, name, ref, width, x, y, ...rest } =
     props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const accent = color ?? "var(--foreground)";
@@ -110,5 +105,5 @@ export const SelectionPresence = forwardRef<
       )}
     </div>
   );
-});
+};
 SelectionPresence.displayName = "SelectionPresence";
diff --git a/packages/ui/src/components/separator/separator.tsx b/packages/ui/src/components/separator/separator.tsx
index 6b39a0a2..5d43485c 100644
--- a/packages/ui/src/components/separator/separator.tsx
+++ b/packages/ui/src/components/separator/separator.tsx
@@ -1,32 +1,28 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 import { cn } from "../../lib/utils";
 
-const Separator = forwardRef<
-  React.ComponentRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, decorative = true, orientation = "horizontal", ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-      )}
-      decorative={decorative}
-      orientation={orientation}
-      ref={ref}
-      {...props}
-    />
-  ),
+const Separator = ({
+  className,
+  decorative = true,
+  orientation = "horizontal",
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof SeparatorPrimitive.Root>>) => (
+  <SeparatorPrimitive.Root
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    decorative={decorative}
+    orientation={orientation}
+    ref={ref}
+    {...props}
+  />
 );
-Separator.displayName = SeparatorPrimitive.Root.displayName;
 
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 export { Separator };
diff --git a/packages/ui/src/components/sheet/sheet.tsx b/packages/ui/src/components/sheet/sheet.tsx
index 1b3d40a8..eacba78d 100644
--- a/packages/ui/src/components/sheet/sheet.tsx
+++ b/packages/ui/src/components/sheet/sheet.tsx
@@ -1,25 +1,20 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-
 const Sheet = SheetPrimitive.Root;
-
 const SheetTrigger = SheetPrimitive.Trigger;
-
 const SheetClose = SheetPrimitive.Close;
-
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const SheetOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Overlay>>) => (
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -28,7 +23,8 @@ const SheetOverlay = forwardRef<
     {...props}
     ref={ref}
   />
-));
+);
+
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
@@ -55,10 +51,14 @@ type SheetContentProps = {} & React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof sheetVariants>;
 
-const SheetContent = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ children, className, side = "right", ...props }, ref) => (
+const SheetContent = ({
+  children,
+  className,
+  ref,
+  side = "right",
+  ...props
+}: SheetContentProps &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Content>>) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -73,7 +73,8 @@ const SheetContent = forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-));
+);
+
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
@@ -88,6 +89,7 @@ const SheetHeader = ({
     {...props}
   />
 );
+
 SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
@@ -102,30 +104,39 @@ const SheetFooter = ({
     {...props}
   />
 );
+
 SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+const SheetTitle = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> &
+  React.RefAttributes<React.ComponentRef<typeof SheetPrimitive.Title>>) => (
   <SheetPrimitive.Title
     className={cn("text-lg font-semibold text-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+const SheetDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> &
+  React.RefAttributes<
+    React.ComponentRef<typeof SheetPrimitive.Description>
+  >) => (
   <SheetPrimitive.Description
     className={cn("text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
diff --git a/packages/ui/src/components/sidebar-provider/sidebar-provider.tsx b/packages/ui/src/components/sidebar-provider/sidebar-provider.tsx
index 9e1d15df..6f2f27cc 100644
--- a/packages/ui/src/components/sidebar-provider/sidebar-provider.tsx
+++ b/packages/ui/src/components/sidebar-provider/sidebar-provider.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  type ReactNode,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, type ReactNode, use, useMemo, useState } from "react";
 
 type SidebarContextType = {
   open: boolean;
@@ -16,7 +10,7 @@ type SidebarContextType = {
 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 
 export function useSidebar() {
-  const context = useContext(SidebarContext);
+  const context = use(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within SidebarProvider");
   }
diff --git a/packages/ui/src/components/slider/slider.tsx b/packages/ui/src/components/slider/slider.tsx
index 4d5e6b19..8c6c1514 100644
--- a/packages/ui/src/components/slider/slider.tsx
+++ b/packages/ui/src/components/slider/slider.tsx
@@ -1,15 +1,14 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "../../lib/utils";
 
-const Slider = forwardRef<
-  React.ComponentRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Slider = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &
+  React.RefAttributes<React.ComponentRef<typeof SliderPrimitive.Root>>) => (
   <SliderPrimitive.Root
     className={cn(
       "relative flex w-full touch-none select-none items-center",
@@ -23,7 +22,7 @@ const Slider = forwardRef<
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+);
 
+Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };
diff --git a/packages/ui/src/components/snap-guides/snap-guides.tsx b/packages/ui/src/components/snap-guides/snap-guides.tsx
index 4d4cc6fa..18fb0a42 100644
--- a/packages/ui/src/components/snap-guides/snap-guides.tsx
+++ b/packages/ui/src/components/snap-guides/snap-guides.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -69,43 +69,43 @@ export type SnapGuidesProps = {
  *
  * @public
  */
-export const SnapGuides = forwardRef<HTMLDivElement, SnapGuidesProps>(
-  (props, ref) => {
-    const { className, guides, labels, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn("pointer-events-none absolute inset-0 z-30", className)}
-        data-snap-guide-count={guides.length}
-        ref={ref}
-        {...rest}
-      >
-        {guides.map((guide) => {
-          const isVertical = guide.orientation === "vertical";
-          const offset = isVertical ? guide.x : guide.y;
-          return (
-            <span
-              aria-hidden="true"
-              className={cn(
-                "absolute border-primary/70",
-                isVertical
-                  ? "inset-y-0 w-px border-l border-dashed"
-                  : "inset-x-0 h-px border-t border-dashed",
-              )}
-              data-snap-guide-id={guide.id}
-              data-snap-orientation={guide.orientation}
-              key={guide.id}
-              style={
-                isVertical
-                  ? { left: `${offset.toString()}px` }
-                  : { top: `${offset.toString()}px` }
-              }
-            />
-          );
-        })}
-      </div>
-    );
-  },
-);
+export const SnapGuides = (
+  props: SnapGuidesProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const { className, guides, labels, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn("pointer-events-none absolute inset-0 z-30", className)}
+      data-snap-guide-count={guides.length}
+      ref={ref}
+      {...rest}
+    >
+      {guides.map((guide) => {
+        const isVertical = guide.orientation === "vertical";
+        const offset = isVertical ? guide.x : guide.y;
+        return (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "absolute border-primary/70",
+              isVertical
+                ? "inset-y-0 w-px border-l border-dashed"
+                : "inset-x-0 h-px border-t border-dashed",
+            )}
+            data-snap-guide-id={guide.id}
+            data-snap-orientation={guide.orientation}
+            key={guide.id}
+            style={
+              isVertical
+                ? { left: `${offset.toString()}px` }
+                : { top: `${offset.toString()}px` }
+            }
+          />
+        );
+      })}
+    </div>
+  );
+};
 SnapGuides.displayName = "SnapGuides";
diff --git a/packages/ui/src/components/sparkline-grid/sparkline-grid.tsx b/packages/ui/src/components/sparkline-grid/sparkline-grid.tsx
index b0b8b879..152b09e2 100644
--- a/packages/ui/src/components/sparkline-grid/sparkline-grid.tsx
+++ b/packages/ui/src/components/sparkline-grid/sparkline-grid.tsx
@@ -37,10 +37,14 @@ const gridColumns = {
   4: "md:grid-cols-2 xl:grid-cols-4",
 };
 
-export const SparklineGrid = React.forwardRef<
-  HTMLDivElement,
-  SparklineGridProps
->(({ className, columns = 2, items, ...props }, reference) => {
+// eslint-disable-next-line max-lines-per-function
+export const SparklineGrid = ({
+  className,
+  columns = 2,
+  items,
+  ref: reference,
+  ...props
+}: SparklineGridProps & React.RefAttributes<HTMLDivElement>) => {
   if (items.length === 0) {
     return null;
   }
@@ -106,6 +110,6 @@ export const SparklineGrid = React.forwardRef<
       })}
     </div>
   );
-});
+};
 
 SparklineGrid.displayName = "SparklineGrid";
diff --git a/packages/ui/src/components/spinner/unicode-spinner.tsx b/packages/ui/src/components/spinner/unicode-spinner.tsx
index 0ac8655d..cc6f1501 100644
--- a/packages/ui/src/components/spinner/unicode-spinner.tsx
+++ b/packages/ui/src/components/spinner/unicode-spinner.tsx
@@ -663,71 +663,64 @@ export type UnicodeSpinnerProps = Omit<
   size?: keyof typeof UNICODE_SPINNER_SIZE_CLASSES;
 };
 
-export const UnicodeSpinner = React.forwardRef<
-  HTMLSpanElement,
-  UnicodeSpinnerProps
->(
-  (
-    {
-      animation = "braille",
-      className,
-      interval,
-      label,
-      paused = false,
-      size = "md",
-      ...props
-    },
-    ref,
-  ) => {
-    const preset = UNICODE_SPINNER_PRESETS[animation];
-    const resolvedInterval = interval ?? preset.interval;
-    const [frameIndex, setFrameIndex] = React.useState(0);
+export const UnicodeSpinner = ({
+  animation = "braille",
+  className,
+  interval,
+  label,
+  paused = false,
+  ref,
+  size = "md",
+  ...props
+}: UnicodeSpinnerProps & React.RefAttributes<HTMLSpanElement>) => {
+  const preset = UNICODE_SPINNER_PRESETS[animation];
+  const resolvedInterval = interval ?? preset.interval;
+  const [frameIndex, setFrameIndex] = React.useState(0);
 
-    React.useEffect(() => {
-      setFrameIndex(0);
-    }, [animation]);
+  React.useEffect(() => {
+    setFrameIndex(0);
+  }, [animation]);
 
-    React.useEffect(() => {
-      if (paused) {
-        return;
-      }
+  React.useEffect(() => {
+    if (paused) {
+      return;
+    }
 
-      const timer = window.setInterval(() => {
-        setFrameIndex((current) => (current + 1) % preset.frames.length);
-      }, resolvedInterval);
+    const timer = window.setInterval(() => {
+      setFrameIndex((current) => (current + 1) % preset.frames.length);
+    }, resolvedInterval);
 
-      return () => {
-        window.clearInterval(timer);
-      };
-    }, [paused, preset.frames.length, resolvedInterval]);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [paused, preset.frames.length, resolvedInterval]);
 
-    const frame = preset.frames[frameIndex] ?? preset.frames[0] ?? "⠋";
-    const accessibleLabel = label ? `Loading ${label}` : "Loading";
+  const frame = preset.frames[frameIndex] ?? preset.frames[0] ?? "⠋";
+  const accessibleLabel = label ? `Loading ${label}` : "Loading";
 
-    return (
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-2 font-mono leading-none text-foreground",
+        UNICODE_SPINNER_SIZE_CLASSES[size],
+        className,
+      )}
+      ref={ref}
+      role="status"
+      {...props}
+    >
       <span
-        className={cn(
-          "inline-flex items-center gap-2 font-mono leading-none text-foreground",
-          UNICODE_SPINNER_SIZE_CLASSES[size],
-          className,
-        )}
-        ref={ref}
-        role="status"
-        {...props}
+        aria-hidden="true"
+        className="inline-block min-w-[1em] whitespace-pre"
       >
-        <span
-          aria-hidden="true"
-          className="inline-block min-w-[1em] whitespace-pre"
-        >
-          {frame}
-        </span>
-        {label ? (
-          <span className="text-sm font-medium text-foreground">{label}</span>
-        ) : null}
-        <span className="sr-only">{accessibleLabel}</span>
+        {frame}
       </span>
-    );
-  },
-);
+      {label ? (
+        <span className="text-sm font-medium text-foreground">{label}</span>
+      ) : null}
+      <span className="sr-only">{accessibleLabel}</span>
+    </span>
+  );
+};
 
 UnicodeSpinner.displayName = "UnicodeSpinner";
diff --git a/packages/ui/src/components/stat-card/stat-card.tsx b/packages/ui/src/components/stat-card/stat-card.tsx
index 6a5be573..c9c291b8 100644
--- a/packages/ui/src/components/stat-card/stat-card.tsx
+++ b/packages/ui/src/components/stat-card/stat-card.tsx
@@ -75,63 +75,59 @@ function TrendIcon({ trend }: { trend: StatCardTrend }) {
   return <ArrowRight className="size-3.5" />;
 }
 
-const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
-  (
-    {
-      change,
-      className,
-      description,
-      icon,
-      label,
-      meta,
-      tone,
-      trend = "neutral",
-      value,
-      ...props
-    },
-    reference,
-  ) => (
-    <Card
-      className={cn(statCardVariants({ tone }), className)}
-      ref={reference}
-      {...props}
-    >
-      <div className={accentVariants({ tone })} />
-      <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
-        <div className="space-y-1">
-          <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
-            {label}
-          </CardDescription>
-          <div className="text-3xl font-semibold tracking-tight">{value}</div>
+const StatCard = ({
+  change,
+  className,
+  description,
+  icon,
+  label,
+  meta,
+  ref: reference,
+  tone,
+  trend = "neutral",
+  value,
+  ...props
+}: StatCardProps & React.RefAttributes<HTMLDivElement>) => (
+  <Card
+    className={cn(statCardVariants({ tone }), className)}
+    ref={reference}
+    {...props}
+  >
+    <div className={accentVariants({ tone })} />
+    <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
+      <div className="space-y-1">
+        <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
+          {label}
+        </CardDescription>
+        <div className="text-3xl font-semibold tracking-tight">{value}</div>
+      </div>
+      {icon ? (
+        <div className="rounded-lg border bg-muted/50 p-2 text-muted-foreground">
+          {icon}
         </div>
-        {icon ? (
-          <div className="rounded-lg border bg-muted/50 p-2 text-muted-foreground">
-            {icon}
+      ) : null}
+    </CardHeader>
+    {description || change || meta ? (
+      <CardContent className="space-y-3">
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+        {change || meta ? (
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            {change ? (
+              <div className={changeVariants({ trend })}>
+                <TrendIcon trend={trend} />
+                <span>{change}</span>
+              </div>
+            ) : null}
+            {meta ? (
+              <div className="text-xs text-muted-foreground">{meta}</div>
+            ) : null}
           </div>
         ) : null}
-      </CardHeader>
-      {description || change || meta ? (
-        <CardContent className="space-y-3">
-          {description ? (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          ) : null}
-          {change || meta ? (
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              {change ? (
-                <div className={changeVariants({ trend })}>
-                  <TrendIcon trend={trend} />
-                  <span>{change}</span>
-                </div>
-              ) : null}
-              {meta ? (
-                <div className="text-xs text-muted-foreground">{meta}</div>
-              ) : null}
-            </div>
-          ) : null}
-        </CardContent>
-      ) : null}
-    </Card>
-  ),
+      </CardContent>
+    ) : null}
+  </Card>
 );
 
 StatCard.displayName = "StatCard";
diff --git a/packages/ui/src/components/state-badge-overlay/state-badge-overlay.tsx b/packages/ui/src/components/state-badge-overlay/state-badge-overlay.tsx
index eb56a6ac..b403ffd8 100644
--- a/packages/ui/src/components/state-badge-overlay/state-badge-overlay.tsx
+++ b/packages/ui/src/components/state-badge-overlay/state-badge-overlay.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -121,15 +117,15 @@ export type StateBadgeOverlayProps = {
  *
  * @public
  */
-export const StateBadgeOverlay = forwardRef<
-  HTMLDivElement,
-  StateBadgeOverlayProps
->((props, ref) => {
+export const StateBadgeOverlay = (
+  props: StateBadgeOverlayProps & React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     anchor = "top-right",
     className,
     label,
     labels,
+    ref,
     state,
     x,
     y,
@@ -165,5 +161,5 @@ export const StateBadgeOverlay = forwardRef<
       {text}
     </div>
   );
-});
+};
 StateBadgeOverlay.displayName = "StateBadgeOverlay";
diff --git a/packages/ui/src/components/status-board/status-board.tsx b/packages/ui/src/components/status-board/status-board.tsx
index e3dc703b..2dfeb2ec 100644
--- a/packages/ui/src/components/status-board/status-board.tsx
+++ b/packages/ui/src/components/status-board/status-board.tsx
@@ -173,38 +173,34 @@ function StatusBoardCard({ item }: { item: StatusBoardItem }) {
   );
 }
 
-export const StatusBoard = React.forwardRef<HTMLDivElement, StatusBoardProps>(
-  (
-    {
-      className,
-      columns = 3,
-      description,
-      items,
-      title = "Status board",
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div className={cn("space-y-4", className)} ref={ref} {...props}>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-1">
-            <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-            {description ? (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-          <StatusBoardSummary items={items} />
+export const StatusBoard = ({
+  className,
+  columns = 3,
+  description,
+  items,
+  ref,
+  title = "Status board",
+  ...props
+}: StatusBoardProps & React.RefAttributes<HTMLDivElement>) => {
+  return (
+    <div className={cn("space-y-4", className)} ref={ref} {...props}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
         </div>
+        <StatusBoardSummary items={items} />
+      </div>
 
-        <div className={cn("grid gap-4", getColumnsClassName(columns))}>
-          {items.map((item) => (
-            <StatusBoardCard item={item} key={item.label} />
-          ))}
-        </div>
+      <div className={cn("grid gap-4", getColumnsClassName(columns))}>
+        {items.map((item) => (
+          <StatusBoardCard item={item} key={item.label} />
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 StatusBoard.displayName = "StatusBoard";
diff --git a/packages/ui/src/components/status-indicator/status-indicator.tsx b/packages/ui/src/components/status-indicator/status-indicator.tsx
index 865c84ff..15325b8f 100644
--- a/packages/ui/src/components/status-indicator/status-indicator.tsx
+++ b/packages/ui/src/components/status-indicator/status-indicator.tsx
@@ -148,46 +148,42 @@ export type StatusIndicatorProps = React.HTMLAttributes<HTMLSpanElement> &
     showDot?: boolean;
   };
 
-const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(
-  (
-    {
-      children,
-      className,
-      label,
-      pulse = false,
-      showDot = true,
-      size,
-      tone,
-      variant,
-      ...props
-    },
-    reference,
-  ) => {
-    const content = children ?? label;
+const StatusIndicator = ({
+  children,
+  className,
+  label,
+  pulse = false,
+  ref: reference,
+  showDot = true,
+  size,
+  tone,
+  variant,
+  ...props
+}: StatusIndicatorProps & React.RefAttributes<HTMLSpanElement>) => {
+  const content = children ?? label;
 
-    return (
-      <span
-        className={cn(
-          statusIndicatorVariants({ size, tone, variant }),
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        {showDot ? (
-          <span
-            aria-hidden="true"
-            className={cn(
-              dotVariants({ size, tone }),
-              pulse ? "animate-pulse" : undefined,
-            )}
-          />
-        ) : null}
-        {content}
-      </span>
-    );
-  },
-);
+  return (
+    <span
+      className={cn(
+        statusIndicatorVariants({ size, tone, variant }),
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      {showDot ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            dotVariants({ size, tone }),
+            pulse ? "animate-pulse" : undefined,
+          )}
+        />
+      ) : null}
+      {content}
+    </span>
+  );
+};
 
 StatusIndicator.displayName = "StatusIndicator";
 
diff --git a/packages/ui/src/components/sticky-metric/sticky-metric.tsx b/packages/ui/src/components/sticky-metric/sticky-metric.tsx
index 7f26c23e..46b29129 100644
--- a/packages/ui/src/components/sticky-metric/sticky-metric.tsx
+++ b/packages/ui/src/components/sticky-metric/sticky-metric.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -103,57 +99,58 @@ export type StickyMetricProps = {
  *
  * @public
  */
-export const StickyMetric = forwardRef<HTMLDivElement, StickyMetricProps>(
-  (props, ref) => {
-    const {
-      anchor = "top-right",
-      className,
-      detail,
-      label,
-      labels,
-      tone = "neutral",
-      value,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (
-      <div
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
-          className,
-        )}
-        data-sticky-anchor={anchor}
-        data-sticky-metric
-        data-sticky-tone={tone}
-        ref={ref}
-        role="status"
-        style={{
-          left: x,
-          top: y,
-          transform: ANCHOR_OFFSET[anchor].transform,
-        }}
-        {...rest}
-      >
+export const StickyMetric = (
+  props: StickyMetricProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    anchor = "top-right",
+    className,
+    detail,
+    label,
+    labels,
+    ref,
+    tone = "neutral",
+    value,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return (
+    <div
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
+        className,
+      )}
+      data-sticky-anchor={anchor}
+      data-sticky-metric
+      data-sticky-tone={tone}
+      ref={ref}
+      role="status"
+      style={{
+        left: x,
+        top: y,
+        transform: ANCHOR_OFFSET[anchor].transform,
+      }}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
+        className={cn("size-1.5 rounded-full", TONE_DOT[tone])}
+        data-sticky-metric-dot
+      />
+      <span className="font-medium text-muted-foreground">{label}</span>
+      <span className="font-semibold text-foreground">{value}</span>
+      {detail ? (
         <span
-          aria-hidden="true"
-          className={cn("size-1.5 rounded-full", TONE_DOT[tone])}
-          data-sticky-metric-dot
-        />
-        <span className="font-medium text-muted-foreground">{label}</span>
-        <span className="font-semibold text-foreground">{value}</span>
-        {detail ? (
-          <span
-            className="text-[10px] text-muted-foreground"
-            data-sticky-metric-detail
-          >
-            {detail}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+          className="text-[10px] text-muted-foreground"
+          data-sticky-metric-detail
+        >
+          {detail}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 StickyMetric.displayName = "StickyMetric";
diff --git a/packages/ui/src/components/story-map/story-map.tsx b/packages/ui/src/components/story-map/story-map.tsx
index 2c3f19fb..27cda67f 100644
--- a/packages/ui/src/components/story-map/story-map.tsx
+++ b/packages/ui/src/components/story-map/story-map.tsx
@@ -4,12 +4,11 @@ import {
   Children,
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   isValidElement,
   type ReactElement,
   type ReactNode,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -105,7 +104,7 @@ type Ctx = {
 const StoryMapContext = createContext<Ctx | null>(null);
 
 function useStoryMapContext(): Ctx {
-  const ctx = useContext(StoryMapContext);
+  const ctx = use(StoryMapContext);
   if (!ctx) {
     throw new Error("StoryMap subcomponent used outside its root.");
   }
@@ -190,65 +189,66 @@ function ChapterHeader({ subtitle, title }: ChapterHeaderProps): ReactNode {
  *
  * @public
  */
-export const StoryMapChapter = forwardRef<HTMLElement, StoryMapChapterProps>(
-  (props, forwardedRef) => {
-    const {
-      center,
-      children,
-      className,
-      color = "red",
-      id,
-      media,
-      subtitle,
-      title,
-      zoom = 2,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const chapterId = id ?? generatedId;
-    const localRef = useRef<HTMLElement | null>(null);
-    const { registerChapter, registerMarker, unregisterMarker } =
-      useStoryMapContext();
-
-    useEffect(() => {
-      registerMarker({ center, color, id: chapterId, zoom });
-      return () => {
-        unregisterMarker(chapterId);
-      };
-    }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
-
-    const refCallback = useCallback(
-      (node: HTMLElement | null) => {
-        localRef.current = node;
-        registerChapter(chapterId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [chapterId, forwardedRef, registerChapter],
-    );
+export const StoryMapChapter = (
+  props: StoryMapChapterProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    center,
+    children,
+    className,
+    color = "red",
+    id,
+    media,
+    ref: forwardedRef,
+    subtitle,
+    title,
+    zoom = 2,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const chapterId = id ?? generatedId;
+  const localRef = useRef<HTMLElement | null>(null);
+  const { registerChapter, registerMarker, unregisterMarker } =
+    useStoryMapContext();
 
-    return (
-      <article
-        className={cn(
-          "flex min-h-screen flex-col justify-center gap-3 py-12",
-          className,
-        )}
-        data-chapter-id={chapterId}
-        id={chapterId}
-        ref={refCallback}
-        {...rest}
-      >
-        <ChapterHeader subtitle={subtitle} title={title} />
-        {media ? <ChapterMedia media={media} /> : null}
-        {children ? (
-          <div className="space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground">
-            {children}
-          </div>
-        ) : null}
-      </article>
-    );
-  },
-);
+  useEffect(() => {
+    registerMarker({ center, color, id: chapterId, zoom });
+    return () => {
+      unregisterMarker(chapterId);
+    };
+  }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
+
+  const refCallback = useCallback(
+    (node: HTMLElement | null) => {
+      localRef.current = node;
+      registerChapter(chapterId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [chapterId, forwardedRef, registerChapter],
+  );
+
+  return (
+    <article
+      className={cn(
+        "flex min-h-screen flex-col justify-center gap-3 py-12",
+        className,
+      )}
+      data-chapter-id={chapterId}
+      id={chapterId}
+      ref={refCallback}
+      {...rest}
+    >
+      <ChapterHeader subtitle={subtitle} title={title} />
+      {media ? <ChapterMedia media={media} /> : null}
+      {children ? (
+        <div className="space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground">
+          {children}
+        </div>
+      ) : null}
+    </article>
+  );
+};
 StoryMapChapter.displayName = "StoryMapChapter";
 
 type Marker = RegisterArguments;
@@ -464,7 +464,9 @@ type ShellProps = {
   titleId: string;
 };
 
-const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
+const Shell = function Shell(
+  props: ShellProps & React.RefAttributes<HTMLElement>,
+) {
   const {
     activeId,
     backdrop,
@@ -474,6 +476,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
     labels,
     markers,
     orderedIds,
+    ref,
     titleId,
   } = props;
   return (
@@ -524,7 +527,7 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
       </div>
     </section>
   );
-});
+};
 
 /**
  * Scroll-driven narrative map. Place {@link StoryMapChapter} children
@@ -554,8 +557,11 @@ const Shell = forwardRef<HTMLElement, ShellProps>(function Shell(props, ref) {
  *
  * @public
  */
-export const StoryMap = forwardRef<HTMLElement, StoryMapProps>((props, ref) => {
-  const { backdrop, backdropAlt, children, className, labels, ...rest } = props;
+export const StoryMap = (
+  props: StoryMapProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { backdrop, backdropAlt, children, className, labels, ref, ...rest } =
+    props;
   const titleId = useId();
   const resolvedLabels = useMemo(
     () => ({ ...DEFAULT_LABELS, ...labels }),
@@ -605,5 +611,5 @@ export const StoryMap = forwardRef<HTMLElement, StoryMapProps>((props, ref) => {
       </Shell>
     </StoryMapContext.Provider>
   );
-});
+};
 StoryMap.displayName = "StoryMap";
diff --git a/packages/ui/src/components/subscription-card/subscription-card.tsx b/packages/ui/src/components/subscription-card/subscription-card.tsx
index 85c5acaf..eb93ed34 100644
--- a/packages/ui/src/components/subscription-card/subscription-card.tsx
+++ b/packages/ui/src/components/subscription-card/subscription-card.tsx
@@ -147,74 +147,68 @@ function SubscriptionActions({
   );
 }
 
-export const SubscriptionCard = React.forwardRef<
-  React.ComponentRef<typeof Card>,
-  SubscriptionCardProps
->(
-  (
-    {
-      className,
-      note,
-      plan,
-      priceLabel,
-      primaryActionLabel,
-      renewalLabel,
-      seatsLabel,
-      secondaryActionLabel,
-      status,
-      usageLabel,
-      ...props
-    },
-    reference,
-  ) => {
-    return (
-      <Card
-        className={cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <CardHeader className="space-y-4 pb-4">
-          <div className="flex items-start justify-between gap-3">
-            <div className="space-y-1">
-              <CardTitle className="text-lg">Subscription</CardTitle>
-              <CardDescription>
-                Billing overview for the current workspace plan.
-              </CardDescription>
-            </div>
-            <span
-              className={cn(
-                "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
-                getStatusClasses(status),
-              )}
-            >
-              {getStatusLabel(status)}
-            </span>
+export const SubscriptionCard = ({
+  className,
+  note,
+  plan,
+  priceLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewalLabel,
+  seatsLabel,
+  secondaryActionLabel,
+  status,
+  usageLabel,
+  ...props
+}: SubscriptionCardProps &
+  React.RefAttributes<React.ComponentRef<typeof Card>>) => {
+  return (
+    <Card
+      className={cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <CardHeader className="space-y-4 pb-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle className="text-lg">Subscription</CardTitle>
+            <CardDescription>
+              Billing overview for the current workspace plan.
+            </CardDescription>
           </div>
-          <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
-            <div>
-              <p className="text-sm font-medium">Current plan</p>
-              <p className="text-xs text-muted-foreground">{renewalLabel}</p>
-            </div>
-            <PlanBadge state={getPlanState(status)} tier={plan} />
+          <span
+            className={cn(
+              "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
+              getStatusClasses(status),
+            )}
+          >
+            {getStatusLabel(status)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
+          <div>
+            <p className="text-sm font-medium">Current plan</p>
+            <p className="text-xs text-muted-foreground">{renewalLabel}</p>
           </div>
-        </CardHeader>
-        <SubscriptionDetails
-          note={note}
-          priceLabel={priceLabel}
-          renewalLabel={renewalLabel}
-          seatsLabel={seatsLabel}
-          usageLabel={usageLabel}
-        />
-        <SubscriptionActions
-          primaryActionLabel={primaryActionLabel}
-          secondaryActionLabel={secondaryActionLabel}
-        />
-      </Card>
-    );
-  },
-);
+          <PlanBadge state={getPlanState(status)} tier={plan} />
+        </div>
+      </CardHeader>
+      <SubscriptionDetails
+        note={note}
+        priceLabel={priceLabel}
+        renewalLabel={renewalLabel}
+        seatsLabel={seatsLabel}
+        usageLabel={usageLabel}
+      />
+      <SubscriptionActions
+        primaryActionLabel={primaryActionLabel}
+        secondaryActionLabel={secondaryActionLabel}
+      />
+    </Card>
+  );
+};
 
 SubscriptionCard.displayName = "SubscriptionCard";
diff --git a/packages/ui/src/components/switch/switch.tsx b/packages/ui/src/components/switch/switch.tsx
index c8613426..d5387960 100644
--- a/packages/ui/src/components/switch/switch.tsx
+++ b/packages/ui/src/components/switch/switch.tsx
@@ -6,10 +6,12 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "../../lib/utils";
 
-const Switch = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+const Switch = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+  React.RefAttributes<React.ComponentRef<typeof SwitchPrimitives.Root>>) => (
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
@@ -24,7 +26,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-));
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };
diff --git a/packages/ui/src/components/table/table.tsx b/packages/ui/src/components/table/table.tsx
index e057082b..7270ee78 100644
--- a/packages/ui/src/components/table/table.tsx
+++ b/packages/ui/src/components/table/table.tsx
@@ -1,11 +1,11 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
 
-const Table = forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+const Table = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableElement> &
+  React.RefAttributes<HTMLTableElement>) => (
   <div className="relative w-full overflow-auto">
     <table
       className={cn("w-full caption-bottom text-sm", className)}
@@ -13,33 +13,42 @@ const Table = forwardRef<
       {...props}
     />
   </div>
-));
+);
+
 Table.displayName = "Table";
 
-const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableHeader = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <thead className={cn("[&_tr]:border-b", className)} ref={ref} {...props} />
-));
+);
+
 TableHeader.displayName = "TableHeader";
 
-const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableBody = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <tbody
     className={cn("[&_tr:last-child]:border-0", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableBody.displayName = "TableBody";
 
-const TableFooter = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableFooter = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement> &
+  React.RefAttributes<HTMLTableSectionElement>) => (
   <tfoot
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
@@ -48,13 +57,16 @@ const TableFooter = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableFooter.displayName = "TableFooter";
 
-const TableRow = forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+const TableRow = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableRowElement> &
+  React.RefAttributes<HTMLTableRowElement>) => (
   <tr
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
@@ -63,13 +75,16 @@ const TableRow = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableRow.displayName = "TableRow";
 
-const TableHead = forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableHead = ({
+  className,
+  ref,
+  ...props
+}: React.ThHTMLAttributes<HTMLTableCellElement> &
+  React.RefAttributes<HTMLTableCellElement>) => (
   <th
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
@@ -78,31 +93,38 @@ const TableHead = forwardRef<
     ref={ref}
     {...props}
   />
-));
+);
+
 TableHead.displayName = "TableHead";
 
-const TableCell = forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableCell = ({
+  className,
+  ref,
+  ...props
+}: React.TdHTMLAttributes<HTMLTableCellElement> &
+  React.RefAttributes<HTMLTableCellElement>) => (
   <td
     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableCell.displayName = "TableCell";
 
-const TableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
+const TableCaption = ({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement> &
+  React.RefAttributes<HTMLTableCaptionElement>) => (
   <caption
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     ref={ref}
     {...props}
   />
-));
+);
+
 TableCaption.displayName = "TableCaption";
 
 export {
diff --git a/packages/ui/src/components/tabs/tabs.tsx b/packages/ui/src/components/tabs/tabs.tsx
index 9b9922b5..de1417a2 100644
--- a/packages/ui/src/components/tabs/tabs.tsx
+++ b/packages/ui/src/components/tabs/tabs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, use, useMemo, useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -15,7 +15,7 @@ type TabsContextValue = {
 const TabsContext = createContext<null | TabsContextValue>(null);
 
 function useTabsContext(): TabsContextValue {
-  const context = useContext(TabsContext);
+  const context = use(TabsContext);
   if (!context) {
     throw new Error("Tab components must be used within a Tabs component");
   }
diff --git a/packages/ui/src/components/tags-input/tags-input.tsx b/packages/ui/src/components/tags-input/tags-input.tsx
index ad614e58..513b2505 100644
--- a/packages/ui/src/components/tags-input/tags-input.tsx
+++ b/packages/ui/src/components/tags-input/tags-input.tsx
@@ -168,66 +168,62 @@ export type TagsInputProps = Omit<
   value?: string[];
 };
 
-const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
-  (
-    {
-      className,
-      defaultValue = [],
-      disabled = false,
-      onBlur,
-      onKeyDown,
-      onValueChange,
-      placeholder = "Add a tag",
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [inputValue, setInputValue] = React.useState("");
-    const { tags, updateTags } = useTagsInputState({
-      defaultValue,
-      onValueChange,
-      value,
-    });
-    const { handleKeyDown, removeTag } = useTagsInputHandlers({
-      disabled,
-      inputValue,
-      onKeyDown,
-      setInputValue,
-      tags,
-      updateTags,
-    });
-
-    return (
-      <div
-        aria-disabled={disabled || undefined}
-        className={cn(
-          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          disabled && "cursor-not-allowed opacity-50",
-          className,
-        )}
-        data-disabled={disabled ? "true" : undefined}
-        role="group"
-      >
-        <TagList disabled={disabled} onRemove={removeTag} tags={tags} />
-        <input
-          {...props}
-          className="min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed"
-          disabled={disabled}
-          onBlur={onBlur}
-          onChange={(event) => {
-            setInputValue(event.target.value);
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          ref={ref}
-          type="text"
-          value={inputValue}
-        />
-      </div>
-    );
-  },
-);
+const TagsInput = ({
+  className,
+  defaultValue = [],
+  disabled = false,
+  onBlur,
+  onKeyDown,
+  onValueChange,
+  placeholder = "Add a tag",
+  ref,
+  value,
+  ...props
+}: TagsInputProps & React.RefAttributes<HTMLInputElement>) => {
+  const [inputValue, setInputValue] = React.useState("");
+  const { tags, updateTags } = useTagsInputState({
+    defaultValue,
+    onValueChange,
+    value,
+  });
+  const { handleKeyDown, removeTag } = useTagsInputHandlers({
+    disabled,
+    inputValue,
+    onKeyDown,
+    setInputValue,
+    tags,
+    updateTags,
+  });
+
+  return (
+    <div
+      aria-disabled={disabled || undefined}
+      className={cn(
+        "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      data-disabled={disabled ? "true" : undefined}
+      role="group"
+    >
+      <TagList disabled={disabled} onRemove={removeTag} tags={tags} />
+      <input
+        {...props}
+        className="min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed"
+        disabled={disabled}
+        onBlur={onBlur}
+        onChange={(event) => {
+          setInputValue(event.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        ref={ref}
+        type="text"
+        value={inputValue}
+      />
+    </div>
+  );
+};
 TagsInput.displayName = "TagsInput";
 
 export { TagsInput };
diff --git a/packages/ui/src/components/textarea/textarea.tsx b/packages/ui/src/components/textarea/textarea.tsx
index 71d9d2fa..2d1685d5 100644
--- a/packages/ui/src/components/textarea/textarea.tsx
+++ b/packages/ui/src/components/textarea/textarea.tsx
@@ -1,23 +1,22 @@
-import { forwardRef } from "react";
-
 import { cn } from "../../lib/utils";
-
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
+const Textarea = ({
+  className,
+  ref,
+  ...props
+}: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+};
 
+Textarea.displayName = "Textarea";
 export { Textarea };
diff --git a/packages/ui/src/components/thread-bubble/thread-bubble.tsx b/packages/ui/src/components/thread-bubble/thread-bubble.tsx
index 56a710ad..c9c57907 100644
--- a/packages/ui/src/components/thread-bubble/thread-bubble.tsx
+++ b/packages/ui/src/components/thread-bubble/thread-bubble.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -112,70 +108,79 @@ const Message = (props: { message: ThreadMessage }): React.ReactElement => {
  *
  * @public
  */
-export const ThreadBubble = forwardRef<HTMLElement, ThreadBubbleProps>(
-  (props, ref) => {
-    const { className, footer, labels, messages, onResolve, title, ...rest } =
-      props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const handleResolve = (): void => {
-      onResolve?.();
-    };
-    return (
-      <section
-        aria-label={resolvedLabels.region}
-        className={cn(
-          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
-          className,
-        )}
-        data-thread-bubble
-        ref={ref}
-        {...rest}
-      >
-        {title || onResolve ? (
-          <header className="flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground">
-            {title ? (
-              <span className="truncate font-semibold" data-thread-bubble-title>
-                {title}
-              </span>
-            ) : (
-              <span aria-hidden="true" />
-            )}
-            {onResolve ? (
-              <button
-                className="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                data-thread-bubble-resolve
-                onClick={handleResolve}
-                type="button"
-              >
-                Resolve
-              </button>
-            ) : null}
-          </header>
-        ) : null}
-        {messages.length === 0 ? (
-          <p
-            className="px-1 py-2 text-center text-[11px] text-muted-foreground"
-            data-thread-bubble-state="empty"
-          >
-            {resolvedLabels.empty}
-          </p>
-        ) : (
-          <ul className="space-y-2 overflow-y-auto" data-thread-bubble-list>
-            {messages.map((message) => (
-              <Message key={message.id} message={message} />
-            ))}
-          </ul>
-        )}
-        {footer ? (
-          <footer
-            className="border-t border-border pt-2"
-            data-thread-bubble-footer
-          >
-            {footer}
-          </footer>
-        ) : null}
-      </section>
-    );
-  },
-);
+// eslint-disable-next-line max-lines-per-function
+export const ThreadBubble = (
+  props: ThreadBubbleProps & React.RefAttributes<HTMLElement>,
+) => {
+  const {
+    className,
+    footer,
+    labels,
+    messages,
+    onResolve,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const handleResolve = (): void => {
+    onResolve?.();
+  };
+  return (
+    <section
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+        className,
+      )}
+      data-thread-bubble
+      ref={ref}
+      {...rest}
+    >
+      {title || onResolve ? (
+        <header className="flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground">
+          {title ? (
+            <span className="truncate font-semibold" data-thread-bubble-title>
+              {title}
+            </span>
+          ) : (
+            <span aria-hidden="true" />
+          )}
+          {onResolve ? (
+            <button
+              className="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-thread-bubble-resolve
+              onClick={handleResolve}
+              type="button"
+            >
+              Resolve
+            </button>
+          ) : null}
+        </header>
+      ) : null}
+      {messages.length === 0 ? (
+        <p
+          className="px-1 py-2 text-center text-[11px] text-muted-foreground"
+          data-thread-bubble-state="empty"
+        >
+          {resolvedLabels.empty}
+        </p>
+      ) : (
+        <ul className="space-y-2 overflow-y-auto" data-thread-bubble-list>
+          {messages.map((message) => (
+            <Message key={message.id} message={message} />
+          ))}
+        </ul>
+      )}
+      {footer ? (
+        <footer
+          className="border-t border-border pt-2"
+          data-thread-bubble-footer
+        >
+          {footer}
+        </footer>
+      ) : null}
+    </section>
+  );
+};
 ThreadBubble.displayName = "ThreadBubble";
diff --git a/packages/ui/src/components/threshold-ring/threshold-ring.tsx b/packages/ui/src/components/threshold-ring/threshold-ring.tsx
index 47353ee1..1d9b4114 100644
--- a/packages/ui/src/components/threshold-ring/threshold-ring.tsx
+++ b/packages/ui/src/components/threshold-ring/threshold-ring.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -170,71 +166,72 @@ const Tick = (props: { geom: Geometry }): null | React.ReactElement => {
  *
  * @public
  */
-export const ThresholdRing = forwardRef<SVGSVGElement, ThresholdRingProps>(
-  (props, ref) => {
-    const {
-      centerLabel,
-      className,
-      labels,
-      max = 1,
-      size = 64,
-      stroke = 6,
-      threshold,
-      tone = "neutral",
-      value,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const geom = computeGeometry({ max, size, stroke, threshold, value });
-    const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
-    return (
-      <svg
-        aria-label={resolvedLabels.region}
-        className={cn("inline-block", className)}
-        data-threshold-ring
-        data-threshold-tone={tone}
-        height={geom.size}
-        ref={ref}
-        role="img"
-        viewBox={`0 0 ${geom.size} ${geom.size}`}
-        width={geom.size}
-        {...rest}
-      >
-        <circle
-          className="stroke-muted"
-          cx={geom.cx}
-          cy={geom.cy}
-          fill="none"
-          r={geom.r}
-          strokeWidth={geom.stroke}
-        />
-        <circle
-          className={cn("transition-all duration-300", TONE_STROKE[tone])}
-          cx={geom.cx}
-          cy={geom.cy}
-          data-threshold-ring-arc
-          fill="none"
-          r={geom.r}
-          strokeDasharray={dash}
-          strokeLinecap="round"
-          strokeWidth={geom.stroke}
-          transform={`rotate(-90 ${geom.cx} ${geom.cy})`}
-        />
-        <Tick geom={geom} />
-        {centerLabel ? (
-          <text
-            className="fill-foreground text-[10px] font-semibold"
-            data-threshold-ring-label
-            dominantBaseline="central"
-            textAnchor="middle"
-            x={geom.cx}
-            y={geom.cy}
-          >
-            {centerLabel}
-          </text>
-        ) : null}
-      </svg>
-    );
-  },
-);
+export const ThresholdRing = (
+  props: ThresholdRingProps & React.RefAttributes<SVGSVGElement>,
+) => {
+  const {
+    centerLabel,
+    className,
+    labels,
+    max = 1,
+    ref,
+    size = 64,
+    stroke = 6,
+    threshold,
+    tone = "neutral",
+    value,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const geom = computeGeometry({ max, size, stroke, threshold, value });
+  const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
+  return (
+    <svg
+      aria-label={resolvedLabels.region}
+      className={cn("inline-block", className)}
+      data-threshold-ring
+      data-threshold-tone={tone}
+      height={geom.size}
+      ref={ref}
+      role="img"
+      viewBox={`0 0 ${geom.size} ${geom.size}`}
+      width={geom.size}
+      {...rest}
+    >
+      <circle
+        className="stroke-muted"
+        cx={geom.cx}
+        cy={geom.cy}
+        fill="none"
+        r={geom.r}
+        strokeWidth={geom.stroke}
+      />
+      <circle
+        className={cn("transition-all duration-300", TONE_STROKE[tone])}
+        cx={geom.cx}
+        cy={geom.cy}
+        data-threshold-ring-arc
+        fill="none"
+        r={geom.r}
+        strokeDasharray={dash}
+        strokeLinecap="round"
+        strokeWidth={geom.stroke}
+        transform={`rotate(-90 ${geom.cx} ${geom.cy})`}
+      />
+      <Tick geom={geom} />
+      {centerLabel ? (
+        <text
+          className="fill-foreground text-[10px] font-semibold"
+          data-threshold-ring-label
+          dominantBaseline="central"
+          textAnchor="middle"
+          x={geom.cx}
+          y={geom.cy}
+        >
+          {centerLabel}
+        </text>
+      ) : null}
+    </svg>
+  );
+};
 ThresholdRing.displayName = "ThresholdRing";
diff --git a/packages/ui/src/components/ticker-tape/ticker-tape.tsx b/packages/ui/src/components/ticker-tape/ticker-tape.tsx
index 9b1ffe3e..12ed20b1 100644
--- a/packages/ui/src/components/ticker-tape/ticker-tape.tsx
+++ b/packages/ui/src/components/ticker-tape/ticker-tape.tsx
@@ -84,47 +84,49 @@ function TickerTapeRow({ items }: { items: TickerTapeItem[] }) {
   );
 }
 
-export const TickerTape = React.forwardRef<HTMLDivElement, TickerTapeProps>(
-  (
-    { className, items, pauseOnHover = true, speedSeconds = 28, ...props },
-    reference,
-  ) => {
-    if (items.length === 0) {
-      return null;
-    }
+export const TickerTape = ({
+  className,
+  items,
+  pauseOnHover = true,
+  ref: reference,
+  speedSeconds = 28,
+  ...props
+}: TickerTapeProps & React.RefAttributes<HTMLDivElement>) => {
+  if (items.length === 0) {
+    return null;
+  }
 
-    return (
+  return (
+    <div
+      aria-label="TickerTape"
+      className={cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
+        className,
+      )}
+      ref={reference}
+      role="region"
+      {...props}
+    >
+      <style>{tickerTapeKeyframes}</style>
       <div
-        aria-label="TickerTape"
         className={cn(
-          "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
-          className,
+          "flex w-max items-stretch",
+          pauseOnHover && "hover:[animation-play-state:paused]",
         )}
-        ref={reference}
-        role="region"
-        {...props}
+        style={{
+          animationDuration: `${speedSeconds}s`,
+          animationIterationCount: "infinite",
+          animationName: "ticker-tape-scroll",
+          animationTimingFunction: "linear",
+        }}
       >
-        <style>{tickerTapeKeyframes}</style>
-        <div
-          className={cn(
-            "flex w-max items-stretch",
-            pauseOnHover && "hover:[animation-play-state:paused]",
-          )}
-          style={{
-            animationDuration: `${speedSeconds}s`,
-            animationIterationCount: "infinite",
-            animationName: "ticker-tape-scroll",
-            animationTimingFunction: "linear",
-          }}
-        >
+        <TickerTapeRow items={items} />
+        <div aria-hidden="true">
           <TickerTapeRow items={items} />
-          <div aria-hidden="true">
-            <TickerTapeRow items={items} />
-          </div>
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 TickerTape.displayName = "TickerTape";
diff --git a/packages/ui/src/components/timeline-scrubber/timeline-scrubber.tsx b/packages/ui/src/components/timeline-scrubber/timeline-scrubber.tsx
index 37610740..5e208731 100644
--- a/packages/ui/src/components/timeline-scrubber/timeline-scrubber.tsx
+++ b/packages/ui/src/components/timeline-scrubber/timeline-scrubber.tsx
@@ -3,7 +3,6 @@
 import {
   type ChangeEvent,
   type ComponentPropsWithoutRef,
-  forwardRef,
   type ReactNode,
   useId,
 } from "react";
@@ -224,16 +223,16 @@ const TickMark = (props: {
  *
  * @public
  */
-export const TimelineScrubber = forwardRef<
-  HTMLDivElement,
-  TimelineScrubberProps
->((props, ref) => {
+export const TimelineScrubber = (
+  props: TimelineScrubberProps & React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     className,
     end,
     formatValue,
     labels,
     onValueChange,
+    ref,
     start,
     step = 1,
     ticks,
@@ -286,5 +285,5 @@ export const TimelineScrubber = forwardRef<
       />
     </div>
   );
-});
+};
 TimelineScrubber.displayName = "TimelineScrubber";
diff --git a/packages/ui/src/components/timeline/timeline.tsx b/packages/ui/src/components/timeline/timeline.tsx
index 360f6da2..1bfb63d8 100644
--- a/packages/ui/src/components/timeline/timeline.tsx
+++ b/packages/ui/src/components/timeline/timeline.tsx
@@ -3,9 +3,8 @@
 import {
   type ComponentPropsWithoutRef,
   createContext,
-  forwardRef,
   type ReactNode,
-  useContext,
+  use,
   useMemo,
 } from "react";
 
@@ -109,7 +108,7 @@ const TimelineContext = createContext<TimelineContextValue>({
  * @public
  */
 export function useTimelineOrientation(): TimelineOrientation {
-  return useContext(TimelineContext).orientation;
+  return use(TimelineContext).orientation;
 }
 
 const timelineVariants = cva("flex", {
@@ -152,27 +151,31 @@ export type TimelineProps = ComponentPropsWithoutRef<"ol"> &
  *
  * @public
  */
-export const Timeline = forwardRef<HTMLOListElement, TimelineProps>(
-  ({ children, className, orientation, ...rest }, ref) => {
-    const resolvedOrientation: TimelineOrientation = orientation ?? "vertical";
-    const contextValue = useMemo<TimelineContextValue>(
-      () => ({ orientation: resolvedOrientation }),
-      [resolvedOrientation],
-    );
-    return (
-      <TimelineContext.Provider value={contextValue}>
-        <ol
-          className={cn(timelineVariants({ orientation }), className)}
-          data-orientation={resolvedOrientation}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </ol>
-      </TimelineContext.Provider>
-    );
-  },
-);
+export const Timeline = ({
+  children,
+  className,
+  orientation,
+  ref,
+  ...rest
+}: TimelineProps & React.RefAttributes<HTMLOListElement>) => {
+  const resolvedOrientation: TimelineOrientation = orientation ?? "vertical";
+  const contextValue = useMemo<TimelineContextValue>(
+    () => ({ orientation: resolvedOrientation }),
+    [resolvedOrientation],
+  );
+  return (
+    <TimelineContext.Provider value={contextValue}>
+      <ol
+        className={cn(timelineVariants({ orientation }), className)}
+        data-orientation={resolvedOrientation}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </ol>
+    </TimelineContext.Provider>
+  );
+};
 Timeline.displayName = "Timeline";
 
 /**
@@ -320,50 +323,49 @@ function ItemBody({
  *
  * @public
  */
-export const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color,
-      date,
-      description,
-      icon,
-      isLast = false,
-      status = "upcoming",
-      title,
-      ...rest
-    } = props;
-    const orientation = useTimelineOrientation();
-    return (
-      <li
-        className={cn(
-          "relative",
-          orientation === "horizontal"
-            ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1"
-            : "flex items-start gap-3 pb-6 last:pb-0",
-          className,
-        )}
-        data-status={status}
-        ref={ref}
-        {...rest}
+export const TimelineItem = (
+  props: TimelineItemProps & React.RefAttributes<HTMLLIElement>,
+) => {
+  const {
+    children,
+    className,
+    color,
+    date,
+    description,
+    icon,
+    isLast = false,
+    ref,
+    status = "upcoming",
+    title,
+    ...rest
+  } = props;
+  const orientation = useTimelineOrientation();
+  return (
+    <li
+      className={cn(
+        "relative",
+        orientation === "horizontal"
+          ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1"
+          : "flex items-start gap-3 pb-6 last:pb-0",
+        className,
+      )}
+      data-status={status}
+      ref={ref}
+      {...rest}
+    >
+      {isLast ? null : <Connector orientation={orientation} status={status} />}
+      <Marker color={color} icon={icon} status={status} />
+      <ItemBody
+        date={date}
+        description={description}
+        orientation={orientation}
+        title={title}
       >
-        {isLast ? null : (
-          <Connector orientation={orientation} status={status} />
-        )}
-        <Marker color={color} icon={icon} status={status} />
-        <ItemBody
-          date={date}
-          description={description}
-          orientation={orientation}
-          title={title}
-        >
-          {children}
-        </ItemBody>
-      </li>
-    );
-  },
-);
+        {children}
+      </ItemBody>
+    </li>
+  );
+};
 TimelineItem.displayName = "TimelineItem";
 
 export { timelineVariants };
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
index a41dd9ff..1a71d06c 100644
--- a/packages/ui/src/components/toast/toast.tsx
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -28,22 +28,30 @@ const toastVariants = cva(
   },
 );
 
-const Toast = React.forwardRef<
-  HTMLDivElement,
-  ToastProps & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, reference) => (
+const Toast = ({
+  className,
+  ref: reference,
+  variant,
+  ...props
+}: ToastProps &
+  VariantProps<typeof toastVariants> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn(toastVariants({ variant }), className)}
     ref={reference}
     {...props}
   />
-));
+);
 Toast.displayName = "Toast";
 
-const ToastAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<"button"> & { altText?: string }
->(({ altText, className, ...props }, reference) => (
+const ToastAction = ({
+  altText,
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<"button"> & {
+  altText?: string;
+} & React.RefAttributes<HTMLButtonElement>) => (
   <button
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
@@ -53,13 +61,15 @@ const ToastAction = React.forwardRef<
     type="button"
     {...props}
   />
-));
+);
 ToastAction.displayName = "ToastAction";
 
-const ToastClose = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<"button">
->(({ className, ...props }, reference) => (
+const ToastClose = ({
+  className,
+  ref: reference,
+  ...props
+}: React.ComponentPropsWithoutRef<"button"> &
+  React.RefAttributes<HTMLButtonElement>) => (
   <button
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
@@ -72,31 +82,35 @@ const ToastClose = React.forwardRef<
   >
     <span className="sr-only">Close</span>✕
   </button>
-));
+);
 ToastClose.displayName = "ToastClose";
 
-const ToastTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const ToastTitle = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm font-semibold", className)}
     ref={reference}
     {...props}
   />
-));
+);
 ToastTitle.displayName = "ToastTitle";
 
-const ToastDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, reference) => (
+const ToastDescription = ({
+  className,
+  ref: reference,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+  React.RefAttributes<HTMLDivElement>) => (
   <div
     className={cn("text-sm opacity-90", className)}
     ref={reference}
     {...props}
   />
-));
+);
 ToastDescription.displayName = "ToastDescription";
 
 export { Toast, ToastAction, ToastClose, ToastDescription, ToastTitle };
diff --git a/packages/ui/src/components/toggle-group/toggle-group.tsx b/packages/ui/src/components/toggle-group/toggle-group.tsx
index de0e364f..0baaf185 100644
--- a/packages/ui/src/components/toggle-group/toggle-group.tsx
+++ b/packages/ui/src/components/toggle-group/toggle-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import type { VariantProps } from "class-variance-authority";
@@ -13,11 +13,18 @@ const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
   variant: "default",
 });
 
-const ToggleGroup = forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ children, className, size, variant, ...props }, ref) => {
+const ToggleGroup = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Root>
+  >) => {
   const contextValue = useMemo(() => ({ size, variant }), [size, variant]);
 
   return (
@@ -31,16 +38,23 @@ const ToggleGroup = forwardRef<
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
   );
-});
+};
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = forwardRef<
-  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ children, className, size, variant, ...props }, ref) => {
-  const context = useContext(ToggleGroupContext);
+const ToggleGroupItem = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<
+    React.ComponentRef<typeof ToggleGroupPrimitive.Item>
+  >) => {
+  const context = use(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -57,7 +71,7 @@ const ToggleGroupItem = forwardRef<
       {children}
     </ToggleGroupPrimitive.Item>
   );
-});
+};
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
diff --git a/packages/ui/src/components/toggle/toggle.tsx b/packages/ui/src/components/toggle/toggle.tsx
index 9023b9f4..d1f70b26 100644
--- a/packages/ui/src/components/toggle/toggle.tsx
+++ b/packages/ui/src/components/toggle/toggle.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -29,18 +26,21 @@ const toggleVariants = cva(
   },
 );
 
-const Toggle = forwardRef<
-  React.ComponentRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, size, variant, ...props }, ref) => (
+const Toggle = ({
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants> &
+  React.RefAttributes<React.ComponentRef<typeof TogglePrimitive.Root>>) => (
   <TogglePrimitive.Root
     className={cn(toggleVariants({ className, size, variant }))}
     ref={ref}
     {...props}
   />
-));
+);
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
-
 export { Toggle, toggleVariants };
diff --git a/packages/ui/src/components/tooltip/tooltip.tsx b/packages/ui/src/components/tooltip/tooltip.tsx
index 4194ce4d..1ddbe882 100644
--- a/packages/ui/src/components/tooltip/tooltip.tsx
+++ b/packages/ui/src/components/tooltip/tooltip.tsx
@@ -1,21 +1,18 @@
 "use client";
-
-import { forwardRef } from "react";
-
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "../../lib/utils";
-
 const TooltipProvider = TooltipPrimitive.Provider;
-
 const Tooltip = TooltipPrimitive.Root;
-
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = forwardRef<
-  React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent = ({
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  React.RefAttributes<React.ComponentRef<typeof TooltipPrimitive.Content>>) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       className={cn(
@@ -27,7 +24,7 @@ const TooltipContent = forwardRef<
       {...props}
     />
   </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+);
 
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/packages/ui/src/components/top-bar/top-bar.tsx b/packages/ui/src/components/top-bar/top-bar.tsx
index 4ec2e51b..700cff56 100644
--- a/packages/ui/src/components/top-bar/top-bar.tsx
+++ b/packages/ui/src/components/top-bar/top-bar.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import type { ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
@@ -11,50 +9,51 @@ export type TopBarProps = React.ComponentPropsWithoutRef<"header"> & {
   trailing?: ReactNode;
 };
 
-const TopBar = forwardRef<HTMLElement, TopBarProps>(
-  (
-    { children, className, leading, subtitle, title, trailing, ...props },
-    ref,
-  ) => (
-    <header
-      className={cn(
-        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-3">
-        {leading ? (
-          <div className="flex shrink-0 items-center gap-2">{leading}</div>
-        ) : null}
-        {title || subtitle ? (
-          <div className="min-w-0">
-            {title ? (
-              <div className="truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground">
-                {title}
-              </div>
-            ) : null}
-            {subtitle ? (
-              <div className="truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-                {subtitle}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      {children ? (
-        <div className="flex flex-1 items-center justify-center">
-          {children}
+const TopBar = ({
+  children,
+  className,
+  leading,
+  ref,
+  subtitle,
+  title,
+  trailing,
+  ...props
+}: TopBarProps & React.RefAttributes<HTMLElement>) => (
+  <header
+    className={cn(
+      "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      {leading ? (
+        <div className="flex shrink-0 items-center gap-2">{leading}</div>
+      ) : null}
+      {title || subtitle ? (
+        <div className="min-w-0">
+          {title ? (
+            <div className="truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground">
+              {title}
+            </div>
+          ) : null}
+          {subtitle ? (
+            <div className="truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+              {subtitle}
+            </div>
+          ) : null}
         </div>
       ) : null}
-      <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
-        {trailing}
-      </div>
-    </header>
-  ),
+    </div>
+    {children ? (
+      <div className="flex flex-1 items-center justify-center">{children}</div>
+    ) : null}
+    <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+      {trailing}
+    </div>
+  </header>
 );
 
 TopBar.displayName = "TopBar";
-
 export { TopBar };
diff --git a/packages/ui/src/components/transaction-list/transaction-list.tsx b/packages/ui/src/components/transaction-list/transaction-list.tsx
index cbc822fd..436fe2d3 100644
--- a/packages/ui/src/components/transaction-list/transaction-list.tsx
+++ b/packages/ui/src/components/transaction-list/transaction-list.tsx
@@ -1,8 +1,4 @@
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
@@ -201,59 +197,60 @@ export type TransactionListProps = {
   transactions: Transaction[];
 } & ComponentPropsWithoutRef<"div">;
 
-type TransactionListComponent = ReturnType<
-  typeof forwardRef<HTMLDivElement, TransactionListProps>
-> & {
+type TransactionListComponent = ((
+  props: TransactionListProps & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement) & {
   Pinned: typeof TransactionListPinned;
   SubscriptionRow: typeof TransactionListSubscriptionRow;
 };
 
-const TransactionListBase = forwardRef<HTMLDivElement, TransactionListProps>(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      currency,
-      emptyMessage,
-      labels,
-      locale,
-      transactions,
-      ...rest
-    } = props;
-    const isEmpty = transactions.length === 0;
-    const hasPinned = Boolean(children);
-    return (
-      <div
-        className={cn(
-          "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
-          className,
-        )}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-        {isEmpty && !hasPinned && emptyMessage ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            {emptyMessage}
-          </p>
-        ) : null}
-        {isEmpty ? null : (
-          <ul className="flex flex-col gap-1.5">
-            {transactions.map((transaction) => (
-              <TransactionListItem
-                currency={currency}
-                key={transaction.id}
-                labels={labels}
-                locale={locale}
-                transaction={transaction}
-              />
-            ))}
-          </ul>
-        )}
-      </div>
-    );
-  },
-);
+const TransactionListBase = (
+  props: TransactionListProps & React.RefAttributes<HTMLDivElement>,
+) => {
+  const {
+    children,
+    className,
+    currency,
+    emptyMessage,
+    labels,
+    locale,
+    ref,
+    transactions,
+    ...rest
+  } = props;
+  const isEmpty = transactions.length === 0;
+  const hasPinned = Boolean(children);
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+      {isEmpty && !hasPinned && emptyMessage ? (
+        <p className="py-6 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </p>
+      ) : null}
+      {isEmpty ? null : (
+        <ul className="flex flex-col gap-1.5">
+          {transactions.map((transaction) => (
+            <TransactionListItem
+              currency={currency}
+              key={transaction.id}
+              labels={labels}
+              locale={locale}
+              transaction={transaction}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
 TransactionListBase.displayName = "TransactionList";
 
 /**
@@ -269,14 +266,16 @@ export type TransactionListPinnedProps = ComponentPropsWithoutRef<"div">;
  *
  * @public
  */
-export const TransactionListPinned = forwardRef<
-  HTMLDivElement,
-  TransactionListPinnedProps
->(({ children, className, ...rest }, ref) => (
+export const TransactionListPinned = ({
+  children,
+  className,
+  ref,
+  ...rest
+}: TransactionListPinnedProps & React.RefAttributes<HTMLDivElement>) => (
   <div className={cn("flex flex-col gap-1.5", className)} ref={ref} {...rest}>
     {children}
   </div>
-));
+);
 TransactionListPinned.displayName = "TransactionList.Pinned";
 
 type TransactionListItemProps = {
@@ -386,10 +385,10 @@ function SubscriptionMeta({
  *
  * @public
  */
-export const TransactionListSubscriptionRow = forwardRef<
-  HTMLDivElement,
-  TransactionListSubscriptionRowProps
->((props, ref) => {
+export const TransactionListSubscriptionRow = (
+  props: TransactionListSubscriptionRowProps &
+    React.RefAttributes<HTMLDivElement>,
+) => {
   const {
     amountCents,
     className,
@@ -399,6 +398,7 @@ export const TransactionListSubscriptionRow = forwardRef<
     locale,
     meta,
     plan,
+    ref,
     renewsAt,
     status,
     ...rest
@@ -440,7 +440,7 @@ export const TransactionListSubscriptionRow = forwardRef<
       </span>
     </div>
   );
-});
+};
 TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
 
 /**
@@ -470,6 +470,7 @@ TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
  *
  * @public
  */
-export const TransactionList = TransactionListBase as TransactionListComponent;
+export const TransactionList =
+  TransactionListBase as unknown as TransactionListComponent;
 TransactionList.Pinned = TransactionListPinned;
 TransactionList.SubscriptionRow = TransactionListSubscriptionRow;
diff --git a/packages/ui/src/components/tree-view/tree-view.tsx b/packages/ui/src/components/tree-view/tree-view.tsx
index b6fb29b8..34423bd6 100644
--- a/packages/ui/src/components/tree-view/tree-view.tsx
+++ b/packages/ui/src/components/tree-view/tree-view.tsx
@@ -2,7 +2,6 @@
 
 import {
   type ComponentPropsWithoutRef,
-  forwardRef,
   type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
   useCallback,
@@ -385,81 +384,81 @@ function TreeRows({
  *
  * @public
  */
-export const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(
-  (props, ref) => {
-    const {
-      className,
-      defaultExpanded,
-      defaultSelected,
-      expanded,
-      labels,
-      nodes,
-      onExpandedChange,
-      onSelect,
-      selected,
-      selectionMode = "single",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels],
-    );
+// eslint-disable-next-line max-lines-per-function
+export const TreeView = (
+  props: TreeViewProps & React.RefAttributes<HTMLUListElement>,
+) => {
+  const {
+    className,
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    labels,
+    nodes,
+    onExpandedChange,
+    onSelect,
+    ref,
+    selected,
+    selectionMode = "single",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
 
-    const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState(
-      {
-        defaultExpanded,
-        defaultSelected,
-        expanded,
-        onExpandedChange,
-        onSelect,
-        selected,
-        selectionMode,
-      },
-    );
+  const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState({
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    onExpandedChange,
+    onSelect,
+    selected,
+    selectionMode,
+  });
 
-    const flat = useMemo(
-      () => flattenVisible({ expanded: expandedSet, nodes }),
-      [expandedSet, nodes],
-    );
+  const flat = useMemo(
+    () => flattenVisible({ expanded: expandedSet, nodes }),
+    [expandedSet, nodes],
+  );
 
-    const [activeId, setActiveId] = useState<string | undefined>(
-      () => flat[0]?.node.id,
-    );
+  const [activeId, setActiveId] = useState<string | undefined>(
+    () => flat[0]?.node.id,
+  );
 
-    const handleKeyDown = useKeyboardHandler({
-      activeId,
-      applyExpand,
-      applySelect,
-      expandedSet,
-      flat,
-      setActiveId,
-    });
+  const handleKeyDown = useKeyboardHandler({
+    activeId,
+    applyExpand,
+    applySelect,
+    expandedSet,
+    flat,
+    setActiveId,
+  });
 
-    return (
-      <ul
-        aria-label={resolvedLabels.region}
-        aria-multiselectable={selectionMode === "multiple" || undefined}
-        className={cn(
-          "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          className,
-        )}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        role="tree"
-        tabIndex={0}
-        {...rest}
-      >
-        <TreeRows
-          activeId={activeId}
-          applyExpand={applyExpand}
-          applySelect={applySelect}
-          expandedSet={expandedSet}
-          flat={flat}
-          selectedSet={selectedSet}
-          setActiveId={setActiveId}
-        />
-      </ul>
-    );
-  },
-);
+  return (
+    <ul
+      aria-label={resolvedLabels.region}
+      aria-multiselectable={selectionMode === "multiple" || undefined}
+      className={cn(
+        "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      role="tree"
+      tabIndex={0}
+      {...rest}
+    >
+      <TreeRows
+        activeId={activeId}
+        applyExpand={applyExpand}
+        applySelect={applySelect}
+        expandedSet={expandedSet}
+        flat={flat}
+        selectedSet={selectedSet}
+        setActiveId={setActiveId}
+      />
+    </ul>
+  );
+};
 TreeView.displayName = "TreeView";
diff --git a/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx b/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
index 31763f9b..30cf4323 100644
--- a/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
+++ b/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 
@@ -182,60 +182,54 @@ function getSortedItems(items: UsageBreakdownItem[], maxItems?: number) {
     : rankedItems;
 }
 
-const UsageBreakdown = forwardRef<HTMLDivElement, UsageBreakdownProps>(
-  (
-    {
-      className,
-      description,
-      emptyMessage = "No usage data available.",
-      items,
-      maxItems,
-      title = "Usage breakdown",
-      ...props
-    },
-    ref,
-  ) => {
-    const sortedItems = useMemo(
-      () => getSortedItems(items, maxItems),
-      [items, maxItems],
-    );
-    const totalValue = useMemo(
-      () => sortedItems.reduce((sum, item) => sum + item.value, 0),
-      [sortedItems],
-    );
-    const maxValue = sortedItems[0]?.value ?? 0;
-
-    return (
-      <Card className={cn("w-full", className)} ref={ref} {...props}>
-        <CardHeader>
-          <CardTitle>{title}</CardTitle>
-          {description ? (
-            <CardDescription>{description}</CardDescription>
-          ) : null}
-        </CardHeader>
-        <CardContent>
-          {sortedItems.length === 0 ? (
-            <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
-              {emptyMessage}
-            </div>
-          ) : (
-            <ol className="space-y-3">
-              {sortedItems.map((item, index) => (
-                <UsageBreakdownRow
-                  item={item}
-                  key={item.id}
-                  maxValue={maxValue}
-                  rank={index + 1}
-                  totalValue={totalValue}
-                />
-              ))}
-            </ol>
-          )}
-        </CardContent>
-      </Card>
-    );
-  },
-);
+const UsageBreakdown = ({
+  className,
+  description,
+  emptyMessage = "No usage data available.",
+  items,
+  maxItems,
+  ref,
+  title = "Usage breakdown",
+  ...props
+}: UsageBreakdownProps & React.RefAttributes<HTMLDivElement>) => {
+  const sortedItems = useMemo(
+    () => getSortedItems(items, maxItems),
+    [items, maxItems],
+  );
+  const totalValue = useMemo(
+    () => sortedItems.reduce((sum, item) => sum + item.value, 0),
+    [sortedItems],
+  );
+  const maxValue = sortedItems[0]?.value ?? 0;
+
+  return (
+    <Card className={cn("w-full", className)} ref={ref} {...props}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>
+        {sortedItems.length === 0 ? (
+          <div className="rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        ) : (
+          <ol className="space-y-3">
+            {sortedItems.map((item, index) => (
+              <UsageBreakdownRow
+                item={item}
+                key={item.id}
+                maxValue={maxValue}
+                rank={index + 1}
+                totalValue={totalValue}
+              />
+            ))}
+          </ol>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
 
 UsageBreakdown.displayName = "UsageBreakdown";
 
diff --git a/packages/ui/src/components/viewport-bookmarks/viewport-bookmarks.tsx b/packages/ui/src/components/viewport-bookmarks/viewport-bookmarks.tsx
index d4640ebf..87ed3f3d 100644
--- a/packages/ui/src/components/viewport-bookmarks/viewport-bookmarks.tsx
+++ b/packages/ui/src/components/viewport-bookmarks/viewport-bookmarks.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -146,16 +142,16 @@ const RowBody = (props: { bookmark: ViewportBookmark }): React.ReactElement => {
  *
  * @public
  */
-export const ViewportBookmarks = forwardRef<
-  HTMLElement,
-  ViewportBookmarksProps
->((props, ref) => {
+export const ViewportBookmarks = (
+  props: ViewportBookmarksProps & React.RefAttributes<HTMLElement>,
+) => {
   const {
     activeId,
     bookmarks,
     className,
     labels,
     onSelect,
+    ref,
     title = "Saved views",
     ...rest
   } = props;
@@ -196,5 +192,5 @@ export const ViewportBookmarks = forwardRef<
       )}
     </section>
   );
-});
+};
 ViewportBookmarks.displayName = "ViewportBookmarks";
diff --git a/packages/ui/src/components/wallet-card/wallet-card.tsx b/packages/ui/src/components/wallet-card/wallet-card.tsx
index f88964cc..26cced0f 100644
--- a/packages/ui/src/components/wallet-card/wallet-card.tsx
+++ b/packages/ui/src/components/wallet-card/wallet-card.tsx
@@ -105,65 +105,58 @@ function WalletActions({
   );
 }
 
-export const WalletCard = React.forwardRef<
-  React.ComponentRef<typeof Card>,
-  WalletCardProps
->(
-  (
-    {
-      availableLabel,
-      balanceLabel,
-      className,
-      note,
-      pendingLabel,
-      primaryActionLabel,
-      renewsLabel,
-      secondaryActionLabel,
-      status,
-      ...props
-    },
-    reference,
-  ) => {
-    return (
-      <Card
-        className={cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <CardHeader className="space-y-4 pb-4">
-          <div className="space-y-1">
-            <CardTitle className="text-lg">Wallet</CardTitle>
-            <CardDescription>
-              Track credits, pending top-ups, and replenishment timing.
-            </CardDescription>
-          </div>
-          <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
-            <div>
-              <p className="text-sm font-medium">Available balance</p>
-              <p className="text-xs text-muted-foreground">
-                {renewsLabel ?? "Credits refresh automatically when enabled."}
-              </p>
-            </div>
-            <CreditBadge amount={balanceLabel} status={status} />
+export const WalletCard = ({
+  availableLabel,
+  balanceLabel,
+  className,
+  note,
+  pendingLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewsLabel,
+  secondaryActionLabel,
+  status,
+  ...props
+}: WalletCardProps & React.RefAttributes<React.ComponentRef<typeof Card>>) => {
+  return (
+    <Card
+      className={cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <CardHeader className="space-y-4 pb-4">
+        <div className="space-y-1">
+          <CardTitle className="text-lg">Wallet</CardTitle>
+          <CardDescription>
+            Track credits, pending top-ups, and replenishment timing.
+          </CardDescription>
+        </div>
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3">
+          <div>
+            <p className="text-sm font-medium">Available balance</p>
+            <p className="text-xs text-muted-foreground">
+              {renewsLabel ?? "Credits refresh automatically when enabled."}
+            </p>
           </div>
-        </CardHeader>
-        <WalletDetails
-          availableLabel={availableLabel}
-          balanceLabel={balanceLabel}
-          note={note}
-          pendingLabel={pendingLabel}
-          renewsLabel={renewsLabel}
-        />
-        <WalletActions
-          primaryActionLabel={primaryActionLabel}
-          secondaryActionLabel={secondaryActionLabel}
-        />
-      </Card>
-    );
-  },
-);
+          <CreditBadge amount={balanceLabel} status={status} />
+        </div>
+      </CardHeader>
+      <WalletDetails
+        availableLabel={availableLabel}
+        balanceLabel={balanceLabel}
+        note={note}
+        pendingLabel={pendingLabel}
+        renewsLabel={renewsLabel}
+      />
+      <WalletActions
+        primaryActionLabel={primaryActionLabel}
+        secondaryActionLabel={secondaryActionLabel}
+      />
+    </Card>
+  );
+};
 
 WalletCard.displayName = "WalletCard";
diff --git a/packages/ui/src/components/watchlist/watchlist.tsx b/packages/ui/src/components/watchlist/watchlist.tsx
index 841e5c2c..47462ae2 100644
--- a/packages/ui/src/components/watchlist/watchlist.tsx
+++ b/packages/ui/src/components/watchlist/watchlist.tsx
@@ -86,60 +86,56 @@ function WatchlistRow({ item }: { item: WatchlistItem }): React.JSX.Element {
   );
 }
 
-export const Watchlist = React.forwardRef<HTMLDivElement, WatchlistProps>(
-  (
-    {
-      className,
-      eyebrow = "Tracked symbols",
-      items,
-      title = "Watchlist",
-      ...props
-    },
-    reference,
-  ) => {
-    if (items.length === 0) {
-      return null;
-    }
+export const Watchlist = ({
+  className,
+  eyebrow = "Tracked symbols",
+  items,
+  ref: reference,
+  title = "Watchlist",
+  ...props
+}: WatchlistProps & React.RefAttributes<HTMLDivElement>) => {
+  if (items.length === 0) {
+    return null;
+  }
 
-    const advancing = items.filter((item) => item.change >= 0).length;
-    const declining = items.length - advancing;
+  const advancing = items.filter((item) => item.change >= 0).length;
+  const declining = items.length - advancing;
 
-    return (
-      <section
-        aria-label={title}
-        className={cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className,
-        )}
-        ref={reference}
-        {...props}
-      >
-        <header className="mb-3 flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
-              {eyebrow}
-            </p>
-            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-          </div>
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400">
-              <ArrowUpRight className="size-3" />
-              {advancing} up
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400">
-              <ArrowDownRight className="size-3" />
-              {declining} down
-            </span>
-          </div>
-        </header>
-        <ul className="divide-y divide-border/60">
-          {items.map((item) => (
-            <WatchlistRow item={item} key={item.symbol} />
-          ))}
-        </ul>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      aria-label={title}
+      className={cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className,
+      )}
+      ref={reference}
+      {...props}
+    >
+      <header className="mb-3 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
+            {eyebrow}
+          </p>
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400">
+            <ArrowUpRight className="size-3" />
+            {advancing} up
+          </span>
+          <span className="inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400">
+            <ArrowDownRight className="size-3" />
+            {declining} down
+          </span>
+        </div>
+      </header>
+      <ul className="divide-y divide-border/60">
+        {items.map((item) => (
+          <WatchlistRow item={item} key={item.symbol} />
+        ))}
+      </ul>
+    </section>
+  );
+};
 
 Watchlist.displayName = "Watchlist";
diff --git a/packages/ui/src/components/workspace-switcher/workspace-switcher.tsx b/packages/ui/src/components/workspace-switcher/workspace-switcher.tsx
index f1a2b949..977b6d7f 100644
--- a/packages/ui/src/components/workspace-switcher/workspace-switcher.tsx
+++ b/packages/ui/src/components/workspace-switcher/workspace-switcher.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -20,69 +20,72 @@ export type WorkspaceSwitcherProps = Omit<
   workspaces: WorkspaceOption[];
 };
 
-const WorkspaceSwitcher = forwardRef<HTMLDivElement, WorkspaceSwitcherProps>(
-  (
-    { className, defaultValue, onValueChange, value, workspaces, ...props },
-    ref,
-  ) => {
-    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
-    const [internalValue, setInternalValue] = useState(fallbackValue);
-    const currentValue = value ?? internalValue;
+const WorkspaceSwitcher = ({
+  className,
+  defaultValue,
+  onValueChange,
+  ref,
+  value,
+  workspaces,
+  ...props
+}: WorkspaceSwitcherProps & React.RefAttributes<HTMLDivElement>) => {
+  const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+  const [internalValue, setInternalValue] = useState(fallbackValue);
+  const currentValue = value ?? internalValue;
 
-    const currentWorkspace = useMemo(
-      () => workspaces.find((workspace) => workspace.id === currentValue),
-      [currentValue, workspaces],
-    );
+  const currentWorkspace = useMemo(
+    () => workspaces.find((workspace) => workspace.id === currentValue),
+    [currentValue, workspaces],
+  );
 
-    function handleSelect(nextValue: string) {
-      if (value === undefined) {
-        setInternalValue(nextValue);
-      }
-      onValueChange?.(nextValue);
+  function handleSelect(nextValue: string) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
     }
+    onValueChange?.(nextValue);
+  }
 
-    return (
-      <div
-        className={cn(
-          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
-          className,
-        )}
-        ref={ref}
-        role="radiogroup"
-        {...props}
-      >
-        {workspaces.map((workspace) => {
-          const isActive = workspace.id === currentValue;
-          return (
-            <button
-              aria-checked={isActive}
-              className={cn(
-                "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-              key={workspace.id}
-              onClick={() => {
-                handleSelect(workspace.id);
-              }}
-              role="radio"
-              title={workspace.description}
-              type="button"
-            >
-              {workspace.label}
-            </button>
-          );
-        })}
-        {currentWorkspace?.description ? (
-          <span className="hidden pl-2 pr-1 text-xs text-muted-foreground md:inline">
-            {currentWorkspace.description}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      className={cn(
+        "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+        className,
+      )}
+      ref={ref}
+      role="radiogroup"
+      {...props}
+    >
+      {workspaces.map((workspace) => {
+        const isActive = workspace.id === currentValue;
+        return (
+          <button
+            aria-checked={isActive}
+            className={cn(
+              "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            key={workspace.id}
+            onClick={() => {
+              handleSelect(workspace.id);
+            }}
+            role="radio"
+            title={workspace.description}
+            type="button"
+          >
+            {workspace.label}
+          </button>
+        );
+      })}
+      {currentWorkspace?.description ? (
+        <span className="hidden pl-2 pr-1 text-xs text-muted-foreground md:inline">
+          {currentWorkspace.description}
+        </span>
+      ) : null}
+    </div>
+  );
+};
 
 WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
 
diff --git a/packages/ui/src/components/world-breadcrumbs/world-breadcrumbs.tsx b/packages/ui/src/components/world-breadcrumbs/world-breadcrumbs.tsx
index d5ca1cdb..852a1dc2 100644
--- a/packages/ui/src/components/world-breadcrumbs/world-breadcrumbs.tsx
+++ b/packages/ui/src/components/world-breadcrumbs/world-breadcrumbs.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -147,58 +143,58 @@ const Crumb = (props: {
  *
  * @public
  */
-export const WorldBreadcrumbs = forwardRef<HTMLElement, WorldBreadcrumbsProps>(
-  (props, ref) => {
-    const { className, crumbs, labels, onSelect, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (crumbs.length === 0) {
-      return (
-        <nav
-          aria-label={resolvedLabels.region}
-          className={cn(
-            "inline-flex items-center text-xs text-muted-foreground",
-            className,
-          )}
-          data-world-breadcrumbs
-          data-world-breadcrumbs-state="empty"
-          ref={ref}
-          {...rest}
-        >
-          {resolvedLabels.empty}
-        </nav>
-      );
-    }
+export const WorldBreadcrumbs = (
+  props: WorldBreadcrumbsProps & React.RefAttributes<HTMLElement>,
+) => {
+  const { className, crumbs, labels, onSelect, ref, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (crumbs.length === 0) {
     return (
       <nav
         aria-label={resolvedLabels.region}
         className={cn(
-          "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+          "inline-flex items-center text-xs text-muted-foreground",
           className,
         )}
         data-world-breadcrumbs
+        data-world-breadcrumbs-state="empty"
         ref={ref}
         {...rest}
       >
-        {crumbs.map((crumb, index) => (
-          <span className="inline-flex items-center gap-1.5" key={crumb.id}>
-            <Crumb
-              crumb={crumb}
-              isLast={index === crumbs.length - 1}
-              onSelect={onSelect}
-            />
-            {index < crumbs.length - 1 ? (
-              <span
-                aria-hidden="true"
-                className="text-muted-foreground/60"
-                data-world-breadcrumb-sep
-              >
-                ›
-              </span>
-            ) : null}
-          </span>
-        ))}
+        {resolvedLabels.empty}
       </nav>
     );
-  },
-);
+  }
+  return (
+    <nav
+      aria-label={resolvedLabels.region}
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+        className,
+      )}
+      data-world-breadcrumbs
+      ref={ref}
+      {...rest}
+    >
+      {crumbs.map((crumb, index) => (
+        <span className="inline-flex items-center gap-1.5" key={crumb.id}>
+          <Crumb
+            crumb={crumb}
+            isLast={index === crumbs.length - 1}
+            onSelect={onSelect}
+          />
+          {index < crumbs.length - 1 ? (
+            <span
+              aria-hidden="true"
+              className="text-muted-foreground/60"
+              data-world-breadcrumb-sep
+            >
+              ›
+            </span>
+          ) : null}
+        </span>
+      ))}
+    </nav>
+  );
+};
 WorldBreadcrumbs.displayName = "WorldBreadcrumbs";
diff --git a/packages/ui/src/components/world-clock-bar/world-clock-bar.tsx b/packages/ui/src/components/world-clock-bar/world-clock-bar.tsx
index 582b813c..2ac82f0e 100644
--- a/packages/ui/src/components/world-clock-bar/world-clock-bar.tsx
+++ b/packages/ui/src/components/world-clock-bar/world-clock-bar.tsx
@@ -134,49 +134,42 @@ function WorldClockCard({
   );
 }
 
-export const WorldClockBar = React.forwardRef<
-  HTMLDivElement,
-  WorldClockBarProps
->(
-  (
-    {
-      className,
-      now,
-      showDate = true,
-      title = "World clock",
-      updateIntervalMs = 60_000,
-      zones,
-      ...props
-    },
-    ref,
-  ) => {
-    const liveNow = useLiveDate(now, updateIntervalMs);
-
-    return (
-      <div className={cn("space-y-3", className)} ref={ref} {...props}>
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-            <p className="text-sm text-muted-foreground">
-              Synchronized time across distributed teams and regions.
-            </p>
-          </div>
-          <Badge variant="outline">{zones.length} zones</Badge>
-        </div>
+export const WorldClockBar = ({
+  className,
+  now,
+  ref,
+  showDate = true,
+  title = "World clock",
+  updateIntervalMs = 60_000,
+  zones,
+  ...props
+}: WorldClockBarProps & React.RefAttributes<HTMLDivElement>) => {
+  const liveNow = useLiveDate(now, updateIntervalMs);
 
-        <div className="flex gap-3 overflow-x-auto pb-1">
-          {zones.map((zone) => (
-            <WorldClockCard
-              date={liveNow}
-              key={`${zone.city}-${zone.timeZone}`}
-              showDate={showDate}
-              zone={zone}
-            />
-          ))}
+  return (
+    <div className={cn("space-y-3", className)} ref={ref} {...props}>
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          <p className="text-sm text-muted-foreground">
+            Synchronized time across distributed teams and regions.
+          </p>
         </div>
+        <Badge variant="outline">{zones.length} zones</Badge>
+      </div>
+
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {zones.map((zone) => (
+          <WorldClockCard
+            date={liveNow}
+            key={`${zone.city}-${zone.timeZone}`}
+            showDate={showDate}
+            zone={zone}
+          />
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 WorldClockBar.displayName = "WorldClockBar";
diff --git a/packages/ui/src/components/zoom-hud/zoom-hud.tsx b/packages/ui/src/components/zoom-hud/zoom-hud.tsx
index e39bdf00..019bf133 100644
--- a/packages/ui/src/components/zoom-hud/zoom-hud.tsx
+++ b/packages/ui/src/components/zoom-hud/zoom-hud.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Minus, Plus, RotateCcw } from "lucide-react";
 
 import { cn } from "../../lib/utils";
@@ -12,50 +10,55 @@ export type ZoomHUDProps = React.ComponentPropsWithoutRef<"div"> & {
   zoom: number;
 };
 
-const ZoomHUD = forwardRef<HTMLDivElement, ZoomHUDProps>(
-  ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => (
-    <div
-      className={cn(
-        "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
-        className,
-      )}
-      ref={ref}
-      {...props}
+const ZoomHUD = ({
+  className,
+  onReset,
+  onZoomIn,
+  onZoomOut,
+  ref,
+  zoom,
+  ...props
+}: ZoomHUDProps & React.RefAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <Button
+      aria-label="Zoom out"
+      onClick={onZoomOut}
+      size="icon"
+      type="button"
+      variant="ghost"
     >
-      <Button
-        aria-label="Zoom out"
-        onClick={onZoomOut}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <Minus className="size-4" />
-      </Button>
-      <div className="min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground">
-        {Math.round(zoom * 100)}%
-      </div>
-      <Button
-        aria-label="Zoom in"
-        onClick={onZoomIn}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <Plus className="size-4" />
-      </Button>
-      <Button
-        aria-label="Reset zoom"
-        onClick={onReset}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <RotateCcw className="size-4" />
-      </Button>
+      <Minus className="size-4" />
+    </Button>
+    <div className="min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground">
+      {Math.round(zoom * 100)}%
     </div>
-  ),
+    <Button
+      aria-label="Zoom in"
+      onClick={onZoomIn}
+      size="icon"
+      type="button"
+      variant="ghost"
+    >
+      <Plus className="size-4" />
+    </Button>
+    <Button
+      aria-label="Reset zoom"
+      onClick={onReset}
+      size="icon"
+      type="button"
+      variant="ghost"
+    >
+      <RotateCcw className="size-4" />
+    </Button>
+  </div>
 );
 
 ZoomHUD.displayName = "ZoomHUD";
-
 export { ZoomHUD };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40e57535..aebad239 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -229,13 +229,13 @@ importers:
         specifier: '>=0.4.0'
         version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react:
-        specifier: '>=18.0.0'
+        specifier: '>=19.0.0'
         version: 19.2.4
       react-day-picker:
         specifier: ^9.13.0
         version: 9.13.2(react@19.2.4)
       react-dom:
-        specifier: '>=18.0.0'
+        specifier: '>=19.0.0'
         version: 19.2.4(react@19.2.4)
       react-hook-form:
         specifier: ^7.73.1