marquee

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
9import { useDirection } from "@/registry/bases/base/ui/direction";
10 
11const ROOT_NAME = "Marquee";
12const CONTENT_NAME = "MarqueeContent";
13 
14type Side = "left" | "right" | "top" | "bottom";
15type Orientation = "horizontal" | "vertical";
16type Direction = "ltr" | "rtl";
17 
18type RootElement = HTMLDivElement;
19type ContentElement = HTMLDivElement;
20 
21interface Dimensions {
22  width: number;
23  height: number;
24}
25 
26interface ElementDimensions {
27  rootSize: number;
28  contentSize: number;
29}
30 
31function createResizeObserverStore() {
32  const listeners = new Set<() => void>();
33  let observer: ResizeObserver | null = null;
34  const elements = new Map<Element, Dimensions>();
35  const refCounts = new Map<Element, number>();
36  const isSupported = typeof ResizeObserver !== "undefined";
37  let notificationScheduled = false;
38 
39  const snapshotCache = new WeakMap<
40    Element,
41    WeakMap<
42      Element,
43      { horizontal: ElementDimensions; vertical: ElementDimensions }
44    >
45  >();
46 
47  function notify() {
48    if (notificationScheduled) return;
49    notificationScheduled = true;
50    queueMicrotask(() => {
51      notificationScheduled = false;
52      for (const callback of listeners) {
53        callback();
54      }
55    });
56  }
57 
58  function cleanup() {
59    if (observer) {
60      observer.disconnect();
61      observer = null;
62    }
63    elements.clear();
64    refCounts.clear();
65  }
66 
67  function subscribe(callback: () => void) {
68    listeners.add(callback);
69    return () => {
70      listeners.delete(callback);
71      if (listeners.size === 0) {
72        cleanup();
73      }
74    };
75  }
76 
77  function getSnapshot(
78    rootElement: RootElement | null,
79    contentElement: ContentElement | null,
80    orientation: Orientation,
81  ): ElementDimensions | null {
82    if (!rootElement || !contentElement) return null;
83 
84    const rootDims = elements.get(rootElement);
85    const contentDims = elements.get(contentElement);
86 
87    if (!rootDims || !contentDims) return null;
88 
89    const rootSize =
90      orientation === "vertical" ? rootDims.height : rootDims.width;
91    const contentSize =
92      orientation === "vertical" ? contentDims.height : contentDims.width;
93 
94// … truncated