Breadcrumb

:root {
  --size-control-sm: 2rem;
  --size-control-md: 2.25rem;
  --size-control-lg: 2.5rem;
  --size-icon-sm: 0.875rem;
  --size-icon-md: 1rem;
  --size-icon-lg: 1.25rem;
  --size-roll-fade: 0.25em;
  --size-roll-fade-x: 0.5em;
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --opacity-disabled: 0.5;
  --ease-spring: linear(0, 0.157, 0.48, 0.77, 0.97, 1.07, 1.1, 1.09, 1.05, 1.02, 1, 0.995, 1);
  --destructive-foreground: oklch(1 0 0);
  --overlay: color-mix(in oklch, oklch(0 0 0) 40%, transparent);
}

.dark {
  --destructive-foreground: oklch(1 0 0);
  --overlay: color-mix(in oklch, oklch(0 0 0) 60%, transparent);
}

@theme inline {
  --animate-popover-in: popover-in var(--duration-fast) cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-popover-out: popover-out var(--duration-instant) cubic-bezier(0.55, 0, 1, 0.45) both;
  --animate-collapsible-open: collapsible-open var(--duration-slow) cubic-bezier(0.22, 1, 0.36, 1);
  --animate-collapsible-close: collapsible-close var(--duration-base) cubic-bezier(0.55, 0, 1, 0.45) both;
  --color-destructive-foreground: var(--destructive-foreground);
  --color-overlay: var(--overlay);
  @keyframes popover-in {
    from {
      opacity: 0;
      filter: blur(6px);
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }
  }
  @keyframes popover-out {
    from {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }
    to {
      opacity: 0;
      filter: blur(6px);
      transform: scale(0.96);
    }
  }
  @keyframes collapsible-open {
    from {
      height: 0;
      opacity: 0;
      filter: blur(6px);
    }
    to {
      height: var(--collapsible-height);
      opacity: 1;
      filter: blur(0);
    }
  }
  @keyframes collapsible-close {
    from {
      height: var(--collapsible-height);
      opacity: 1;
      filter: blur(0);
    }
    to {
      height: 0;
      opacity: 0;
      filter: blur(6px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
  }
}

import type { Transition } from "motion/react";

/*
 * Motion tokens for JavaScript animations (motion/react).
 * Durations and easings mirror the CSS tokens in src/styles/tokens.css;
 * `pnpm check:tokens` fails if the two drift apart.
 */

/** Durations in seconds. Mirrors --duration-* in tokens.css. */
export const duration = {
  instant: 0.08,
  fast: 0.15,
  base: 0.22,
  slow: 0.35,
  slower: 0.5,
} as const;

/** Cubic-bezier easings. Mirrors --ease-* in tokens.css. */
export const ease = {
  out: [0.22, 1, 0.36, 1],
  in: [0.55, 0, 1, 0.45],
  inOut: [0.65, 0, 0.35, 1],
} as const;

/**
 * Named springs: the library's motion voice.
 * - snappy: quick, almost no overshoot. Toggles, tabs, small controls.
 * - smooth: slow and settled. Panels, sidebars, page sections.
 * - bouncy: playful overshoot. Rare, for moments of delight.
 */
export const spring = {
  snappy: { type: "spring", stiffness: 520, damping: 38, mass: 1 },
  smooth: { type: "spring", stiffness: 120, damping: 20, mass: 1 },
  bouncy: { type: "spring", stiffness: 300, damping: 15, mass: 1 },
} as const satisfies Record<string, Transition>;

export type SpringName = keyof typeof spring;

/**
 * The blur (owner, 2026-10-15): content that appears, leaves or swaps sharpens in from a 6px blur as it
 * fades, instead of only fading. Pair it with the movement the pattern already has. Not for fills,
 * highlights, hover or anything full-screen (those still fade), and with reduced motion it's opacity only.
 * The CSS keyframes in tokens.css use the same 6px (checked by `pnpm check:tokens`).
 */
export const blur = { hidden: "blur(6px)", shown: "blur(0px)" } as const;

/** Swapping content in place (Loading Button, Copy Button): the new rises 6px from blurred; the old lifts away blurring */
export const swap = {
  initial: { opacity: 0, filter: blur.hidden, y: 6 },
  animate: { opacity: 1, filter: blur.shown, y: 0 },
  exit: { opacity: 0, filter: blur.hidden, y: -6 },
} as const;

/**
 * The flow of a changing number (Number Ticker): a spring for the characters' moves, the width and the digits'
 * spin, sampled into CSS linear(), and a fade for characters coming and going. Web Animations timings, in
 * milliseconds. The curve is from number-flow, © 2024 Maxwell Barvian, MIT licence (its full notice is in
 * components/number-ticker/number-ticker.tsx).
 */
export const flow = {
  transform: {
    duration: 900,
    easing:
      "linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)",
  },
  opacity: { duration: 450, easing: "ease-out" },
} as const satisfies Record<string, EffectTiming>;

"use client";

import { blur, duration, ease, spring } from "@/lib/motion";
import { cn } from "@/lib/utils";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import {
  AnimatePresence,
  type HTMLMotionProps,
  LayoutGroup,
  motion,
  PresenceContext,
  useReducedMotion,
} from "motion/react";
import { Slot } from "radix-ui";
import { Children, type ComponentProps, type ReactNode, useMemo } from "react";

/*
 * Breadcrumb (owner's roadmap, 2026-10-16: "Where you are in the site, as a trail of links"), with shadcn's parts:
 * Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator and
 * BreadcrumbEllipsis. The WAI-ARIA breadcrumb: a nav named "Breadcrumb" holding an ordered list, with the
 * current page marked aria-current="page".
 * - The trail follows you (owner, 2026-10-19: "see if we can do anything with motion", then "coming from left,
 *   more smoother"): when it changes (your app moves to another page and keeps the breadcrumb), a new level grows
 *   out of the one before it, sliding 8px out from the left through the blur on duration.slow, the separator
 *   first and the name a beat later. A level you leave slides back into the one before it. The rest glide to
 *   their new places (layout="position" on spring.snappy), and the level you were on dims to a link as smoothly
 *   as the new one arrives. Give each level a key when you map over a path; static trails are keyed by position
 *   and never move. Nothing animates on first paint (AnimatePresence initial={false}), and with reduced motion
 *   every change is instant.
 * - Links are muted and brighten on hover while their underline fades in (Button's link: the line's colour
 *   moves from transparent, so nothing shifts). A gliding highlight was tried instead and the owner kept the
 *   underline (2026-10-19). The current page is plain foreground text, its colour set on its level.
 * - Separators are hidden from screen readers (the list already says how many levels there are), and the
 *   chevron flips in right-to-left pages.
 * - BreadcrumbEllipsis stands in for levels that are collapsed; put it in a Dropdown Menu's trigger to list them
 *   (as the collapsed trail in the demo does).
 */

function Breadcrumb({ "aria-label": label = "Breadcrumb", ...props }: ComponentProps<"nav">) {
  return <nav aria-label={label} data-slot="breadcrumb" {...props} />;
}

/** The ordered list of levels */
function BreadcrumbList({ className, children, ...props }: ComponentProps<"ol">) {
  // Keyed, so AnimatePresence can tell the levels apart: by your keys when you map over a path, by position
  // otherwise (a static trail never changes, so nothing moves)
  const levels = useMemo(() => Children.toArray(children), [children]);

  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2",
        className,
      )}
      {...props}
    >
      {/* The group re-renders the levels once a leaving one has gone, so the rest glide to their places */}
      <LayoutGroup>
        <AnimatePresence initial={false}>{levels}</AnimatePresence>
      </LayoutGroup>
    </ol>
  );
}

/**
 * How a level comes, goes and moves. A new level grows out of the one before it: it slides 8px out from the left
 * through the blur, and a level you leave slides back in. `follows` holds a level's name back a beat
 * (duration.instant) behind the separator that leads to it, so the trail draws itself left to right. The rest
 * glide to their places when others change.
 */
function useLevelMotion(follows: boolean) {
  const reduce = useReducedMotion() ?? false;
  const tucked = { opacity: 0, filter: reduce ? blur.shown : blur.hidden, x: reduce ? 0 : -8 };
  return {
    initial: tucked,
    animate: { opacity: 1, filter: blur.shown, x: 0, transitionEnd: { filter: "none" } },
    exit: { ...tucked, transition: reduce ? { duration: 0 } : { duration: duration.fast, ease: ease.in } },
    transition: reduce
      ? { duration: 0 }
      : {
          duration: duration.slow,
          ease: ease.out,
          delay: follows ? duration.instant : 0,
          layout: spring.snappy,
        },
    layout: "position" as const,
  };
}

export type BreadcrumbItemProps = Omit<HTMLMotionProps<"li">, "children"> & { children?: ReactNode };

function BreadcrumbItem({ className, children, ...props }: BreadcrumbItemProps) {
  const level = useLevelMotion(true);
  return (
    <motion.li
      data-slot="breadcrumb-item"
      className={cn(
        "inline-flex items-center gap-1.5",
        // The current page's colour lives here, so when the page you were on becomes a link it dims as smoothly
        // as the next level arrives (and brightens the same way going back)
        "transition-colors duration-(--duration-slow) ease-out has-data-[slot=breadcrumb-page]:text-foreground",
        className,
      )}
      {...level}
      {...props}
    >
      {/*
       * The level answers to the trail's AnimatePresence; what's inside it doesn't. Otherwise a level that was
       * there at first would stop anything in it from ever animating in (a menu's highlight, for example).
       */}
      <PresenceContext.Provider value={null}>{children}</PresenceContext.Provider>
    </motion.li>
  );
}

export type BreadcrumbLinkProps = ComponentProps<"a"> & {
  /** Render the single child (your router's Link) with the link's styles */
  asChild?: boolean;
};

function BreadcrumbLink({ asChild = false, className, ...props }: BreadcrumbLinkProps) {
  const Comp = asChild ? Slot.Root : "a";
  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn(
        "rounded-md underline decoration-transparent underline-offset-4",
        "transition-colors duration-(--duration-fast) ease-out hover:text-foreground hover:decoration-current",
        "outline-ring focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset)",
        className,
      )}
      {...props}
    />
  );
}

/**
 * The page you're on: the last item, as text rather than a link to itself. aria-current tells screen readers
 * it's the current page (shadcn's fake role="link" is left out: it can't be focused or followed). It takes the
 * foreground colour from its BreadcrumbItem, which fades it in and out.
 */
function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
  return <span data-slot="breadcrumb-page" aria-current="page" className={className} {...props} />;
}

export type BreadcrumbSeparatorProps = Omit<HTMLMotionProps<"li">, "children"> & { children?: ReactNode };

/** The mark between two items; a chevron unless you pass your own (a slash, for example) */
function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps) {
  const level = useLevelMotion(false);
  return (
    <motion.li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-(--size-icon-sm) [&>svg]:rtl:rotate-180", className)}
      {...level}
      {...props}
    >
      {children ?? <ChevronRightIcon />}
    </motion.li>
  );
}

/** Collapsed levels. Inside a Dropdown Menu's trigger, name the trigger ("Show hidden levels"). */
function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      className={cn("flex size-6 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontalIcon aria-hidden className="size-(--size-icon-md)" />
      <span className="sr-only">More</span>
    </span>
  );
}

export {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
};