@terrafirmagreg-team/kit 0.0.0-stage → 1.2.0

package/src/components/toc/base.tsx

@@ -0,0 +1,66 @@
+'use client';
+import {
+  AnchorProvider,
+  ScrollProvider,
+  type AnchorProviderProps,
+} from 'fumadocs-core/toc';
+import { useRef, type ComponentProps } from 'react';
+import { TOCContext } from '@terrafirmagreg-team/kit/hooks/use-toc';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+
+export {
+  AnchorProvider,
+  ScrollProvider,
+  TOCItem,
+  useActiveAnchor,
+  useActiveAnchors,
+  useItems,
+  useTOC,
+  useTOCListener,
+  useTOCSelector,
+} from 'fumadocs-core/toc';
+export type {
+  AnchorProviderProps,
+  ScrollProviderProps,
+  TOCItemInfo,
+  TOCItemProps,
+  TOCItemType,
+  TableOfContents,
+} from 'fumadocs-core/toc';
+
+export type TOCProviderProps = AnchorProviderProps;
+
+export function TOCProvider({ toc, children, ...props }: TOCProviderProps) {
+  return (
+    <TOCContext value={toc}>
+      <AnchorProvider toc={toc} {...props}>
+        {children}
+      </AnchorProvider>
+    </TOCContext>
+  );
+}
+
+export function TOCScrollArea({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const viewRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={mergeRefs(viewRef, ref)}
+      className={cn(
+        'relative min-h-0 text-sm overflow-x-clip overflow-y-auto overscroll-contain [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollProvider containerRef={viewRef}>
+        {props.children}
+      </ScrollProvider>
+    </div>
+  );
+}
+

package/src/components/toc/block.tsx

@@ -0,0 +1,112 @@
+'use client';
+import { useEffect, useRef, type ComponentProps } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+import * as Primitive from './base';
+import { TOCEmpty } from './default';
+
+export { TOCEmpty };
+
+export type TOCItemsProps = ComponentProps<'div'>;
+
+export function TOCItems({
+  ref,
+  className,
+  children,
+  ...props
+}: TOCItemsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const blockRef = useRef<HTMLDivElement>(null);
+  const tocInfo = Primitive.useTOC();
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const block = blockRef.current;
+    if (!container || !block) return;
+
+    const positions = new Map<string, [number, number]>();
+    let height = 0;
+
+    const update = (items: Primitive.TOCItemInfo[]) => {
+      let top = -1;
+      let bottom = -1;
+      for (const item of items) {
+        if (!item.active) continue;
+        const pos = positions.get(item.original.url);
+        if (!pos) continue;
+        if (top === -1) top = pos[0];
+        bottom = pos[1];
+      }
+      if (top === -1) return;
+      block.style.clipPath = `inset(${top}px 0 ${height - bottom}px round 8px)`;
+      if (!block.hasAttribute('data-ready'))
+        requestAnimationFrame(() => block.setAttribute('data-ready', ''));
+    };
+
+    const observer = new ResizeObserver(() => {
+      positions.clear();
+      for (const anchor of container.getElementsByTagName('a')) {
+        const href = anchor.getAttribute('href');
+        if (href)
+          positions.set(href, [
+            anchor.offsetTop,
+            anchor.offsetTop + anchor.offsetHeight,
+          ]);
+      }
+      height = container.clientHeight;
+      update(tocInfo.get());
+    });
+
+    observer.observe(container);
+    tocInfo.listen(update);
+    return () => {
+      observer.disconnect();
+      tocInfo.unlisten(update);
+    };
+  }, [tocInfo]);
+
+  return (
+    <div
+      ref={mergeRefs(containerRef, ref)}
+      className={cn('relative flex flex-col', className)}
+      {...props}
+    >
+      <div
+        ref={blockRef}
+        className="absolute inset-0 bg-linear-to-r from-primary/10 [clip-path:inset(0_0_100%)] data-ready:transition-[clip-path] duration-300 ease-out"
+      />
+      {children}
+    </div>
+  );
+}
+
+function getItemOffset(depth: number): number {
+  if (depth <= 2) return 8;
+  if (depth === 3) return 20;
+  return 32;
+}
+
+export function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & { item: Primitive.TOCItemType }) {
+  return (
+    <Primitive.TOCItem
+      href={item.url}
+      {...props}
+      className={cn(
+        'group prose relative py-1 pe-2 text-[0.8125rem]/5 scroll-m-4 text-muted-foreground hover:text-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-primary',
+        props.className,
+      )}
+      style={{ paddingInlineStart: getItemOffset(item.depth), ...props.style }}
+    >
+      {item._step !== undefined && (
+        <span className="inline-flex size-4 me-1.5 items-center justify-center rounded-full align-text-bottom bg-muted text-muted-foreground font-mono font-medium text-[10px] transition-colors group-data-[active=true]:bg-primary group-data-[active=true]:text-primary-foreground">
+          {item._step}
+        </span>
+      )}
+      {item.title}
+    </Primitive.TOCItem>
+  );
+}
+

package/src/components/toc/clerk.tsx

@@ -0,0 +1,266 @@
+'use client';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+import * as Primitive from './base';
+import { useTOCItems } from '@terrafirmagreg-team/kit/hooks/use-toc';
+import { TOCEmpty } from './default';
+
+export { TOCEmpty };
+
+interface SvgResult {
+  content: ReactNode;
+  width: number;
+  height: number;
+  positions: [number, number, number][];
+}
+
+export type TOCItemsProps = ComponentProps<'div'>;
+
+export function TOCItems({
+  ref,
+  className,
+  children,
+  ...props
+}: TOCItemsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const items = useTOCItems();
+  const [svg, setSvg] = useState<SvgResult | null>(null);
+
+  const onPrint = useCallback(() => {
+    const container = containerRef.current;
+    if (!container || container.clientHeight === 0) return;
+    if (items.length === 0) {
+      setSvg(null);
+      return;
+    }
+
+    let w = 0;
+    let h = 0;
+    let d = '';
+    const positions: [number, number, number][] = [];
+    const output: ReactNode[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const element = container.querySelector<HTMLElement>(`a[href="${item.url}"]`);
+      if (!element) continue;
+      const styles = getComputedStyle(element);
+      const x = getLineOffset(item.depth) + 0.5;
+      const top = element.offsetTop + parseFloat(styles.paddingTop);
+      const bottom =
+        element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+
+      w = Math.max(x + 8, w);
+      h = Math.max(h, bottom);
+      if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+      else {
+        const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [0, 0, 0];
+        d += ` L ${upperX} ${upperBottom} ${x} ${top} L${x} ${bottom}`;
+      }
+
+      if (item._step !== undefined)
+        output.push(
+          <g key={i} transform={`translate(${x}, ${(top + bottom) / 2})`}>
+            <circle cx="0" cy="0" r="8" className="fill-primary" />
+            <text
+              x="0"
+              y="0"
+              textAnchor="middle"
+              alignmentBaseline="central"
+              dominantBaseline="middle"
+              className="fill-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100"
+            >
+              {item._step}
+            </text>
+          </g>,
+        );
+      positions.push([top, bottom, x]);
+    }
+
+    output.unshift(
+      <path
+        key="path"
+        d={d}
+        className="stroke-primary"
+        strokeWidth="1"
+        fill="none"
+      />,
+    );
+
+    setSvg({ content: output, width: w, height: h, positions });
+  }, [items]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(onPrint);
+    observer.observe(container);
+    onPrint();
+    return () => {
+      observer.unobserve(container);
+    };
+  }, [onPrint]);
+
+  return (
+    <div
+      ref={mergeRefs(containerRef, ref)}
+      className={cn('relative flex flex-col', className)}
+      {...props}
+    >
+      {svg && <ThumbTrack computed={svg} />}
+      {children}
+    </div>
+  );
+}
+
+function ThumbTrack({ computed }: { computed: SvgResult }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const tocInfo = Primitive.useTOC();
+
+  function calculate(items: Primitive.TOCItemInfo[]): CSSProperties {
+    const out: Record<string, string> = {};
+    const startIdx = items.findIndex((item) => item.active);
+    if (startIdx === -1) return out;
+    const endIdx = items.findLastIndex((item) => item.active);
+    out['--track-top'] = `${computed.positions[startIdx][0]}px`;
+    out['--track-bottom'] = `${computed.positions[endIdx][1]}px`;
+    return out as CSSProperties;
+  }
+
+  Primitive.useTOCListener((items) => {
+    const element = ref.current;
+    if (!element) return;
+    for (const [k, v] of Object.entries(calculate(items)))
+      element.style.setProperty(k, v);
+  });
+
+  return (
+    <div
+      ref={ref}
+      className="absolute top-0 inset-s-0 origin-center rtl:-scale-x-100"
+      style={{
+        width: computed.width,
+        height: computed.height,
+        ...calculate(tocInfo.get()),
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={`0 0 ${computed.width} ${computed.height}`}
+        className="absolute transition-[clip-path]"
+        style={{
+          width: computed.width,
+          height: computed.height,
+          clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`,
+        }}
+      >
+        {computed.content}
+      </svg>
+    </div>
+  );
+}
+
+const BASE = 8;
+
+function getItemOffset(depth: number): number {
+  if (depth <= 2) return 20;
+  if (depth === 3) return 32;
+  return 44;
+}
+
+function getLineOffset(depth: number): number {
+  if (depth <= 2) return BASE;
+  if (depth === 3) return 20;
+  return 32;
+}
+
+export function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & { item: Primitive.TOCItemType }) {
+  const items = useTOCItems();
+  const { isFirst, isLast, svg } = useMemo(() => {
+    const index = items.indexOf(item);
+    const isFirst = index === 0;
+    const isLast = index === items.length - 1;
+    const l1 = getLineOffset(item.depth);
+    const l0 = isFirst ? l1 : getLineOffset(items[index - 1].depth);
+    const l2 = isLast ? l1 : getLineOffset(items[index + 1].depth);
+
+    return {
+      isFirst,
+      isLast,
+      svg: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn(
+            'absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100',
+            l1 !== l2 && 'h-full bottom-1.5',
+          )}
+          style={{ width: Math.max(l0, l1) + 9 }}
+        >
+          {l0 !== l1 && (
+            <path
+              d={`M ${l0 + 0.5} 0 L ${l0 + 0.5} 0 ${l1 + 0.5} 12`}
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+              className="stroke-foreground/10"
+            />
+          )}
+          <line
+            x1={l1 + 0.5}
+            y1={l0 === l1 ? '6' : '12'}
+            x2={l1 + 0.5}
+            y2="100%"
+            strokeWidth="1"
+            className="stroke-foreground/10"
+          />
+          {item._step !== undefined && (
+            <g transform={`translate(${l1 + 0.5}, ${l1 === l2 ? '3' : '6'})`}>
+              <circle cx="0" cy="50%" r="8" className="fill-muted" />
+              <text
+                x="0"
+                y="50%"
+                textAnchor="middle"
+                alignmentBaseline="central"
+                dominantBaseline="middle"
+                className="fill-muted-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100"
+              >
+                {item._step}
+              </text>
+            </g>
+          )}
+        </svg>
+      ),
+    };
+  }, [items, item]);
+
+  return (
+    <Primitive.TOCItem
+      href={item.url}
+      {...props}
+      className={cn(
+        'prose prose-sm relative py-1.5 scroll-m-4 text-muted-foreground hover:text-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-primary',
+        isFirst && 'pt-0',
+        isLast && 'pb-0',
+        props.className,
+      )}
+      style={{ paddingInlineStart: getItemOffset(item.depth), ...props.style }}
+    >
+      {svg}
+      {item.title}
+    </Primitive.TOCItem>
+  );
+}
+