@inklu/docs 0.2.0

package/src/components/layout/site-header.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { motion } from "motion/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ThemeSwitcher } from "@/components/layout/theme-switcher";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { tap as tapSound, turn as turnSound } from "@/lib/utils/audio";
+import { Badge } from "../ui/badge";
+import { BrandLogo } from "../ui/brand-logo";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+export type SiteHeaderProps = {
+  navItems?: { label: string; href: string }[];
+  logo?: React.ReactNode;
+  version?: string;
+  githubUrl?: string;
+  right?: React.ReactNode;
+};
+
+export function SiteHeader({
+  navItems = [],
+  logo = <BrandLogo />,
+  version = "v0.1",
+  githubUrl = "https://github.com/your-username/your-repo",
+  right,
+}: SiteHeaderProps) {
+  const pathname = usePathname();
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : (pathname?.startsWith(href) ?? false);
+
+  return (
+    <header className="sticky top-4 z-(--z-header) flex w-full items-center justify-between rounded-xl">
+      {/* Brand mark — doubles as the home link. */}
+      <Link
+        href="/"
+        aria-label="Home"
+        className="flex items-center text-foreground transition-opacity hover:opacity-80"
+      >
+        {logo}
+      </Link>
+
+      {/* Nav links, centered. */}
+      <nav className="absolute left-1/2 flex -translate-x-1/2 items-center gap-4 md:gap-5">
+        {navItems.map((item) => {
+          const active = isActive(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={active ? "page" : undefined}
+              onClick={() => {
+                if (!active) turnSound(item.href === "/" ? "back" : "forward");
+              }}
+              className={cn(
+                "relative font-medium text-sm leading-5 transition-colors px-3 py-1.5 rounded-full",
+                active
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {active && (
+                <motion.div
+                  layoutId="activeHeaderNavBg"
+                  className="absolute inset-0 bg-secondary/60 rounded-full"
+                  transition={{ type: "spring", duration: 0.3, bounce: 0 }}
+                />
+              )}
+              <span className="relative z-10">{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="flex items-center gap-1">
+        {version && (
+          <HoverCard>
+            <HoverCardTrigger
+              render={
+                <Badge
+                  variant={"secondary"}
+                  className="align-middle cursor-default hover:bg-secondary/80 transition-colors"
+                >
+                  {version}
+                </Badge>
+              }
+            />
+            <HoverCardContent
+              side="bottom"
+              sideOffset={8}
+              align="center"
+              className="w-64 p-2"
+            >
+              <div className="space-y-1.5">
+                <h1 className=" font-medium">Release {version}</h1>
+                <p className="text-muted-foreground">
+                  You are viewing the documentation for the latest release.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+        {right}
+        {githubUrl && (
+          <TooltipProvider delay={200}>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    render={(props: React.ComponentProps<"a">) => (
+                      <a
+                        {...props}
+                        href={githubUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => {
+                          props.onClick?.(e);
+                          tapSound();
+                        }}
+                      />
+                    )}
+                  >
+                    <GitHubLogoIcon />
+                    <span className="hidden sm:inline">GitHub</span>
+                  </Button>
+                }
+              />
+              <TooltipContent side="bottom" sideOffset={6}>
+                View source on GitHub
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        <ThemeSwitcher />
+      </div>
+    </header>
+  );
+}

package/src/components/layout/site-layout.tsx

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { ScrollFade } from "../shared/scroll-fade";
+
+export type SiteLayoutProps = {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+};
+
+export function SiteLayout({ children, header, footer }: SiteLayoutProps) {
+  return (
+    <div className="relative flex flex-col items-center min-h-screen pb-24 overflow-x-clip">
+      {/* Top scroll fade */}
+      <ScrollFade />
+
+      <section className="w-full px-6 flex flex-col gap-3 pt-3">
+        {header}
+        {children}
+      </section>
+
+      {footer && (
+        <div className="flex flex-col gap-10 items-center text-center mt-32 px-4">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/layout/site-provider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type * as React from "react";
+import { DirectionProvider } from "../ui/direction";
+import { AnchoredToastProvider, ToastProvider } from "../ui/toast";
+import { ThemeProvider } from "./theme-provider";
+
+export function SiteProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <DirectionProvider direction="ltr">
+        <ToastProvider position="bottom-right">
+          <AnchoredToastProvider>{children}</AnchoredToastProvider>
+        </ToastProvider>
+      </DirectionProvider>
+    </ThemeProvider>
+  );
+}

package/src/components/layout/site-template.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+import type * as React from "react";
+
+export function SiteTemplate({ children }: { children: React.ReactNode }) {
+  const reduced = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={reduced ? false : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={
+        reduced ? { duration: 0 } : { duration: 0.24, ease: [0.22, 1, 0.36, 1] }
+      }
+    >
+      {children}
+    </motion.div>
+  );
+}

package/src/components/layout/theme-provider.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ComponentProps } from "react";
+
+export function ThemeProvider(
+  props: ComponentProps<typeof NextThemesProvider>,
+) {
+  return <NextThemesProvider {...props} />;
+}

package/src/components/layout/theme-switcher.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { MorphIcon } from "../motion-primitives/morph-icon";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon-sm" aria-label="Toggle theme">
+        <SunIcon aria-hidden="true" />
+      </Button>
+    );
+  }
+
+  const currentTheme = theme === "system" ? systemTheme : theme;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+    >
+      <MorphIcon
+        isActive={currentTheme === "dark"}
+        activeIcon={<MoonIcon aria-hidden="true" />}
+        inactiveIcon={<SunIcon aria-hidden="true" />}
+        variant="rotate"
+      />
+    </Button>
+  );
+}

package/src/components/motion-primitives/morph-icon.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import type * as React from "react";
+
+const CARD_DELAY_STEP = 0.067;
+
+// Active permutation: TR BR / TL BL (indices in a 2×2 grid 0-3)
+const ACTIVE_ORDER = [1, 3, 0, 2];
+const DEFAULT_ORDER = [0, 1, 2, 3];
+
+export interface CardsViewIconProps {
+  /** Whether the icon is in its active (animated) state. */
+  isActive: boolean;
+  /** Extra classes applied to the root element. */
+  className?: string;
+}
+
+export function CardsViewIcon({ isActive, className }: CardsViewIconProps) {
+  const order = isActive ? ACTIVE_ORDER : DEFAULT_ORDER;
+
+  return (
+    <motion.span
+      className={`inline-grid h-3 w-3 place-content-center grid-cols-2 gap-[2.5px] ${className ?? ""}`}
+      aria-hidden="true"
+    >
+      {order.map((id, i) => (
+        <motion.span
+          key={id}
+          layout
+          className="size-[4px] rounded-[1px] bg-current"
+          animate={isActive ? { opacity: [0.65, 1, 1] } : { opacity: 1 }}
+          transition={{
+            duration: 0.42,
+            delay: i === 0 ? 0 : i * CARD_DELAY_STEP,
+            ease: "easeOut",
+            layout: {
+              duration: 0.45,
+              delay: i === 0 ? 0 : i * CARD_DELAY_STEP,
+              ease: "easeInOut",
+            },
+          }}
+        />
+      ))}
+    </motion.span>
+  );
+}
+
+export interface MorphIconProps {
+  isActive: boolean;
+  activeIcon: React.ReactNode;
+  inactiveIcon: React.ReactNode;
+  className?: string;
+  variant?: "scale" | "rotate" | "slide";
+}
+
+export function MorphIcon({
+  isActive,
+  activeIcon,
+  inactiveIcon,
+  className,
+  variant = "rotate",
+}: MorphIconProps) {
+  const variants = {
+    scale: {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+    },
+    rotate: {
+      initial: { opacity: 0, rotate: -90, scale: 0.95 },
+      animate: { opacity: 1, rotate: 0, scale: 1 },
+      exit: { opacity: 0, rotate: 90, scale: 0.95 },
+    },
+    slide: {
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 10 },
+    },
+  };
+
+  return (
+    <AnimatePresence mode="popLayout" initial={false}>
+      <motion.span
+        key={isActive ? "active" : "inactive"}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        variants={variants[variant]}
+        transition={{ duration: 0.15, ease: [0.23, 1, 0.32, 1] }}
+        className={`inline-flex items-center justify-center ${className ?? ""}`}
+      >
+        {isActive ? activeIcon : inactiveIcon}
+      </motion.span>
+    </AnimatePresence>
+  );
+}

package/src/components/motion-primitives/progressive-blur.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { type HTMLMotionProps, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const GRADIENT_ANGLES = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+};
+
+export type ProgressiveBlurProps = {
+  direction?: keyof typeof GRADIENT_ANGLES;
+  blurLayers?: number;
+  className?: string;
+  blurIntensity?: number;
+} & HTMLMotionProps<"div">;
+
+export function ProgressiveBlur({
+  direction = "bottom",
+  blurLayers = 8,
+  className,
+  blurIntensity = 0.25,
+  ...props
+}: ProgressiveBlurProps) {
+  const layers = Math.max(blurLayers, 2);
+  const segmentSize = 1 / (blurLayers + 1);
+
+  return (
+    <div className={cn("relative", className)}>
+      {Array.from({ length: layers }).map((_, index) => {
+        const angle = GRADIENT_ANGLES[direction];
+        const gradientStops = [
+          index * segmentSize,
+          (index + 1) * segmentSize,
+          (index + 2) * segmentSize,
+          (index + 3) * segmentSize,
+        ].map(
+          (pos, posIndex) =>
+            `rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`,
+        );
+
+        const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(
+          ", ",
+        )})`;
+
+        return (
+          <motion.div
+            // biome-ignore lint/suspicious/noArrayIndexKey: Layers are static
+            key={index}
+            className="pointer-events-none absolute inset-0 rounded-[inherit]"
+            style={{
+              maskImage: gradient,
+              WebkitMaskImage: gradient,
+              backdropFilter: `blur(${index * blurIntensity}px)`,
+              WebkitBackdropFilter: `blur(${index * blurIntensity}px)`,
+            }}
+            {...props}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/motion-primitives/sliding-number.tsx

@@ -0,0 +1,131 @@
+"use client";
+import {
+  type MotionValue,
+  motion,
+  motionValue,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import { useEffect, useId } from "react";
+import useMeasure from "react-use-measure";
+
+const TRANSITION = {
+  type: "spring" as const,
+  bounce: 0,
+  duration: 0.3,
+};
+
+function Digit({ value, place }: { value: number; place: number }) {
+  const valueRoundedToPlace = Math.floor(value / place) % 10;
+  const initial = motionValue(valueRoundedToPlace);
+  const animatedValue = useSpring(initial, TRANSITION);
+
+  useEffect(() => {
+    animatedValue.set(valueRoundedToPlace);
+  }, [animatedValue, valueRoundedToPlace]);
+
+  return (
+    <div className="relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums">
+      <div className="invisible">0</div>
+      {Array.from({ length: 10 }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: order is static
+        <SlidingDigitNumber key={`digit-${i}`} mv={animatedValue} number={i} />
+      ))}
+    </div>
+  );
+}
+
+function SlidingDigitNumber({
+  mv,
+  number,
+}: {
+  mv: MotionValue<number>;
+  number: number;
+}) {
+  const uniqueId = useId();
+  const [ref, bounds] = useMeasure();
+
+  const y = useTransform(mv, (latest) => {
+    if (!bounds.height) return 0;
+    const placeValue = latest % 10;
+    const offset = (10 + number - placeValue) % 10;
+    let memo = offset * bounds.height;
+
+    if (offset > 5) {
+      memo -= 10 * bounds.height;
+    }
+
+    return memo;
+  });
+
+  // don't render the animated number until we know the height
+  if (!bounds.height) {
+    return (
+      <span ref={ref} className="invisible absolute">
+        {number}
+      </span>
+    );
+  }
+
+  return (
+    <motion.span
+      style={{ y }}
+      layoutId={`${uniqueId}-${number}`}
+      className="absolute inset-0 flex items-center justify-center"
+      transition={TRANSITION}
+      ref={ref}
+    >
+      {number}
+    </motion.span>
+  );
+}
+
+type SlidingNumberProps = {
+  value: number;
+  padStart?: boolean;
+  decimalSeparator?: string;
+};
+
+export function SlidingNumber({
+  value,
+  padStart = false,
+  decimalSeparator = ".",
+}: SlidingNumberProps) {
+  const absValue = Math.abs(value);
+  const [integerPart, decimalPart] = absValue.toString().split(".");
+  const integerValue = parseInt(integerPart, 10);
+  const paddedInteger =
+    padStart && integerValue < 10 ? `0${integerPart}` : integerPart;
+  const integerDigits = paddedInteger.split("");
+  const integerPlaces = integerDigits.map(
+    (_, i) => 10 ** (integerDigits.length - i - 1),
+  );
+
+  return (
+    <div className="flex items-center">
+      {value < 0 && "-"}
+      {integerDigits.map((_, index) => (
+        <Digit
+          key={`pos-${integerPlaces[index]}`}
+          value={integerValue}
+          place={integerPlaces[index]}
+        />
+      ))}
+      {decimalPart && (
+        <>
+          <span>{decimalSeparator}</span>
+          {decimalPart.split("").map((_, index) => {
+            const place = 10 ** (decimalPart.length - index - 1);
+            return (
+              <Digit
+                key={`decimal-${place}`}
+                value={parseInt(decimalPart, 10)}
+                place={place}
+              />
+            );
+          })}
+        </>
+      )}
+    </div>
+  );
+}