// ~/src/siteplane/components/motion/motion.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import {
  AnimatePresence,
  MotionConfig,
  PresenceContext,
  useIsPresent,
  usePresence,
} from "motion/react";
import * as React from "react";

import { useReducedMotionPreference } from "../../system/motion/use-reduced-motion-preference";
import { useSiteplaneNonce } from "../../system/provider/siteplane-ui-provider";
import { cn } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import { useHeightFollower } from "./motion-follow";
import {
  GlideOnChange,
  leavingProps,
  measureSwapTiming,
  swapPresence,
  toMotionElement,
  useLeavingEntries,
  usePresenceMotion,
  type MotionLayout,
  type SwapTiming,
} from "./motion-presence";

export type { MotionLayout };
// Components whose panes stay mounted while they leave (Tabs) take their pin
// and height follow from useLeavingPane (motion-follow) and their switch rule
// from panelSwitchClassName (motion-presence). Both are kit internals, imported
// by file path, not part of the public Motion API.

type NativeProps<Tag extends "div" | "li" | "ul"> = Omit<
  React.ComponentPropsWithRef<Tag>,
  // Motion owns these handlers; React's versions have a different signature.
  "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragStart"
>;

type MotionEntryValue = {
  /** The entry holds a MotionItem, which plays the exit. */
  claim: () => void;
  /** Whether no other item follows, so no space is needed after it. */
  last: boolean;
  /** The item has left the list and plays its exit. */
  leaving: boolean;
  /** The exit is over: drop the entry. */
  remove: () => void;
};

const MotionEntryContext = React.createContext<MotionEntryValue | null>(null);

/**
 * Presence that takes a leaving child out of the flow while it plays its exit.
 * Motion pins that child with a `<style>` element; under a Content Security
 * Policy with nonces it carries the provider's nonce. MotionConfig merges with
 * any MotionConfig of the application around it, so its transition and
 * reduced-motion settings still apply.
 */
function PopLayoutPresence({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  const nonce = useSiteplaneNonce();
  const presence = (
    <AnimatePresence initial={false} mode="popLayout">
      {children}
    </AnimatePresence>
  );
  return nonce ? (
    <MotionConfig nonce={nonce}>{presence}</MotionConfig>
  ) : (
    presence
  );
}

/**
 * What a stack item knows about its place in the list. A leaving item stays in
 * the list until its exit has played, right after the item it followed.
 */
function MotionEntry({
  children,
  entryKey,
  last,
  leaving,
  onGone,
}: {
  children: React.ReactNode;
  entryKey: React.Key;
  last: boolean;
  leaving: boolean;
  onGone: (key: React.Key) => void;
}): React.ReactElement {
  const claimed = React.useRef(false);
  const value = React.useMemo<MotionEntryValue>(
    () => ({
      claim: () => {
        claimed.current = true;
      },
      last,
      leaving,
      remove: () => onGone(entryKey),
    }),
    [entryKey, last, leaving, onGone],
  );
  // Without a MotionItem there is no exit to play: the entry goes at once.
  React.useLayoutEffect(() => {
    if (leaving && !claimed.current) onGone(entryKey);
  }, [entryKey, leaving, onGone]);
  return (
    <MotionEntryContext.Provider value={value}>
      {children}
    </MotionEntryContext.Provider>
  );
}

type MotionListContextValue = {
  gap: boolean;
  layout: MotionLayout;
  /** True from the list's first frame: items that mount later animate in. */
  mounted: React.RefObject<boolean>;
  reduced: boolean;
  separator: React.ReactNode;
};

const MotionListContext = React.createContext<MotionListContextValue | null>(
  null,
);

function useMotionList(part: string): MotionListContextValue {
  const context = React.useContext(MotionListContext);
  if (!context) throw new Error(`${part} must be rendered inside MotionList.`);
  return context;
}

export interface MotionListProps extends useRender.ComponentProps<"ul"> {
  /**
   * `stack` (default) is for vertical lists: an item expands from height 0 and
   * fades in, leaves by fading and collapsing, and the items below glide.
   * `flow` is for wrapping or horizontal sets such as chips, tags and tiles: an
   * item fades and scales slightly and its siblings glide to their new place.
   */
  layout?: MotionLayout;
  /**
   * The space between the items of a `stack`, in steps of the spacing scale (3
   * is 12 px). There is none above the first item or below the last. It opens
   * with an item that is added after another and closes when an item becomes
   * the last, together with that item's own expand or collapse. A CSS `gap` on
   * the list would leave a hole that closes only after the item has left. In
   * `flow` set the spacing with CSS `gap` instead.
   */
  gap?: number;
  /**
   * Drawn in the space between two items, such as a divider or a connecting
   * line, and shown and hidden with it. Needs `gap`. The content may be
   * positioned against the item (it is the item's positioning context if the
   * item is `relative`) or lay out inside the space.
   */
  separator?: React.ReactNode;
  /**
   * `flow` only: the element whose height follows when a row of items appears
   * or goes, so what is below it glides instead of jumping. It is the list
   * itself by default. A list that is `display: contents` has no box of its
   * own: pass the element that wraps its items.
   */
  container?: React.RefObject<HTMLElement | null> | undefined;
}

/**
 * A list whose items animate in, out and into their new place. Children are
 * `MotionItem`s with a stable `key`. Owns the presence for the whole kit.
 */
export function MotionList({
  children,
  className,
  container,
  gap,
  layout = "stack",
  render,
  separator,
  ...props
}: MotionListProps): React.ReactElement {
  const listRef = React.useRef<HTMLUListElement>(null);
  const reduced = useReducedMotionPreference();
  const stack = layout === "stack";
  const present = React.Children.toArray(children).filter(React.isValidElement);
  const { entries, remove } = useLeavingEntries(present, stack && !reduced);
  // Items glide to their new place when the set or the order of keys changes.
  const layoutDependency = present.map((child) => String(child.key)).join("|");
  // The items of the first frame are at rest; items that come later animate
  // in. A collection that renders its items one commit after the list, as
  // React Aria's do, renders them before that frame, so they are at rest too.
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (typeof requestAnimationFrame === "undefined") {
      mounted.current = true;
      return;
    }
    const frame = requestAnimationFrame(() => {
      mounted.current = true;
    });
    return () => cancelAnimationFrame(frame);
  }, []);

  // A flow list moves its container's height when a row appears or goes. The
  // items of a stack bring their own height, so nothing else has to follow.
  const followed = container ?? listRef;
  const follow = useHeightFollower(followed, !stack);
  const settled = React.useRef(layoutDependency);
  React.useLayoutEffect(() => {
    if (settled.current === layoutDependency) return;
    settled.current = layoutDependency;
    if (stack) return;
    follow();
  }, [follow, layoutDependency, stack]);
  const hasGap = stack && gap !== undefined && gap > 0;
  const context = React.useMemo<MotionListContextValue>(
    () => ({
      gap: hasGap,
      layout,
      mounted,
      reduced,
      separator,
    }),
    [hasGap, layout, reduced, separator],
  );

  const defaultProps = {
    children: (
      <>
        {stack ? (
          entries.map((entry) => (
            <MotionEntry
              entryKey={entry.key}
              key={entry.key}
              last={entry.last}
              leaving={entry.leaving}
              onGone={remove}
            >
              {entry.element}
            </MotionEntry>
          ))
        ) : (
          // A leaving item is taken out of the flow and positioned from the
          // list.
          <PopLayoutPresence>{present}</PopLayoutPresence>
        )}
        {/* After the items, whose presence has started by then: an item that
            enters a stack takes no height yet, so the others do not move. */}
        <GlideOnChange
          change={layoutDependency}
          origin={() => followed.current}
          parts={() => listItems(listRef.current)}
          reduced={reduced}
        />
      </>
    ),
    className: cn(
      slotClass("motion-list", props, render),
      !stack && "relative",
      className,
    ),
    "data-layout": layout,
    "data-slot": "motion-list",
    style: hasGap
      ? ({
          "--sp-motion-gap": `calc(var(--spacing) * ${gap})`,
        } as React.CSSProperties)
      : undefined,
  };
  const element = useRender({
    defaultTagName: "ul",
    props: mergeProps<"ul">(defaultProps, props),
    ref: listRef,
    render,
  });

  return (
    <MotionListContext.Provider value={context}>
      {element}
    </MotionListContext.Provider>
  );
}

/** The elements of a list's items: its children in the DOM. */
function listItems(list: HTMLElement | null): HTMLElement[] {
  return list
    ? [...list.children].filter(
        (child): child is HTMLElement => child instanceof HTMLElement,
      )
    : [];
}

export interface MotionItemProps extends NativeProps<"li"> {
  /**
   * Replaces the element, `li` by default. Pass an element (`<div />`) or a
   * component element (`<Row />`) that forwards its ref; it gains the motion
   * behavior. The element is the clipping box of a `stack` item, so give it no
   * padding or border and put those on the content inside.
   */
  render?: React.ReactElement;
}

/**
 * One entry of a `MotionList`. Give it a stable `key`. While it leaves, it is
 * inert and hidden from assistive technology.
 */
export function MotionItem({
  children,
  className,
  render,
  ...props
}: MotionItemProps): React.ReactElement {
  const list = useMotionList("MotionItem");
  const entry = React.useContext(MotionEntryContext);
  const ref = React.useRef<HTMLLIElement>(null);
  const stack = list.layout === "stack";
  // A stack keeps its leaving items itself (MotionEntry) and collapses them; a
  // flow list holds them in AnimatePresence, out of the flow, until their exit
  // has played. A stack item never holds the presence of a swap or a reveal
  // around it, but it is inert while that presence leaves.
  const inPresence = useIsPresent();
  const [inFlow, safeToRemove] = usePresence(!stack);
  const shown = stack ? !entry?.leaving : inFlow;
  const present = shown && inPresence;
  // The items of the first render are at rest; later ones animate in.
  const appear = React.useRef(list.mounted.current).current;
  const claim = entry?.claim;
  React.useLayoutEffect(() => {
    claim?.();
  }, [claim]);
  usePresenceMotion(ref, stack ? "height" : "scale", {
    appear,
    onGone: stack ? entry?.remove : (safeToRemove ?? undefined),
    present: shown,
    reduced: list.reduced,
  });

  const defaultProps = {
    ...leavingProps(present, list.reduced),
    // The space after the item is a block inside it, so it collapses with the
    // item, and it is open only while another item follows.
    children:
      stack && list.gap ? (
        <>
          {children}
          <MotionReveal data-slot="motion-gap" open={!(entry?.last ?? true)}>
            <div aria-hidden="true" className="h-(--sp-motion-gap)" />
            {list.separator}
          </MotionReveal>
        </>
      ) : (
        children
      ),
    // The render element keeps its own props as a motion element, a data-slot
    // among them.
    className: cn(
      slotClass("motion-item", props, render),
      stack && "flow-root",
      className,
    ),
    "data-layout": list.layout,
    "data-slot": "motion-item",
  };

  return useRender({
    defaultTagName: "li",
    props: mergeProps<"li">(defaultProps, props),
    ref,
    render,
  });
}

export interface MotionRevealProps extends NativeProps<"div"> {
  /** Shows the block. It expands with a fade; hiding collapses it. */
  open: boolean;
  /**
   * Replaces the element, `div` by default. It is the clipping box, so give it
   * no padding or border and put those on the content inside.
   */
  render?: React.ReactElement;
}

/**
 * One block that shows or hides with `open`, for messages, field errors,
 * alerts and save bars. Nothing is rendered while it is closed, so it adds no
 * space to the layout around it.
 */
export function MotionReveal({
  children,
  open,
  ...props
}: MotionRevealProps): React.ReactElement {
  return (
    <AnimatePresence initial={false}>
      {open ? (
        <MotionRevealPanel key="panel" {...props}>
          {children}
        </MotionRevealPanel>
      ) : null}
    </AnimatePresence>
  );
}

function MotionRevealPanel({
  children,
  className,
  render,
  ...props
}: Omit<MotionRevealProps, "open">): React.ReactElement {
  const [present, safeToRemove] = usePresence();
  const reduced = useReducedMotionPreference();
  const ref = React.useRef<HTMLDivElement>(null);
  // A reveal that is open when it mounts (initial={false}) is at rest.
  const appear = React.useContext(PresenceContext)?.initial !== false;
  usePresenceMotion(ref, "height", {
    appear,
    onGone: safeToRemove ?? undefined,
    present,
    reduced,
  });
  const defaultProps = {
    ...leavingProps(present, reduced),
    children,
    className: cn(
      slotClass("motion-reveal", props, render),
      "flow-root",
      className,
    ),
    "data-slot": "motion-reveal",
  };

  return useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(defaultProps, props),
    ref,
    render,
  });
}

export interface MotionSwapProps extends useRender.ComponentProps<"div"> {
  /**
   * Identifies the content. When it changes, the old content fades out, the
   * new content fades in after it and the container's height follows.
   */
  swapKey: React.Key;
}

/**
 * Content that replaces other content, for steps, states and panels. The old
 * content fades out quickly and the new content fades in after it, so the two
 * are never legible on top of each other. The container's height follows the
 * new content over the whole swap, so nothing jumps.
 */
export function MotionSwap({
  children,
  className,
  render,
  swapKey,
  ...props
}: MotionSwapProps): React.ReactElement {
  const swapRef = React.useRef<HTMLDivElement>(null);
  // Measured from the container when a swap starts.
  const resolve = React.useCallback(
    () => measureSwapTiming(swapRef.current),
    [],
  );

  // The container follows the height of the new content, and keeps following
  // the entering pane until the swap is over, so content that builds a frame
  // later does not make the height pop at the end.
  const follow = useHeightFollower(swapRef);
  const previousKey = React.useRef(swapKey);
  React.useLayoutEffect(() => {
    if (previousKey.current === swapKey) return;
    previousKey.current = swapKey;
    const container = swapRef.current;
    if (!container) return;
    // The follow rule moves a swap's height over the whole swap, base in all.
    follow({
      enter: container.querySelector(
        ':scope > [data-slot="motion-swap-pane"]:not([inert])',
      ),
    });
  }, [follow, swapKey]);

  const defaultProps = {
    children: (
      <PopLayoutPresence>
        <MotionSwapPane key={swapKey} resolve={resolve}>
          {children}
        </MotionSwapPane>
      </PopLayoutPresence>
    ),
    // The leaving pane is taken out of the flow and positioned from here.
    className: cn(
      slotClass("motion-swap", props, render),
      "relative",
      className,
    ),
    "data-slot": "motion-swap",
  };

  return useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(defaultProps, props),
    ref: swapRef,
    render,
  });
}

function MotionSwapPane({
  children,
  resolve,
  ...props
}: React.ComponentProps<"div"> & {
  resolve: () => SwapTiming;
}): React.ReactElement {
  const present = useIsPresent();
  const reduced = useReducedMotionPreference();
  const defaultProps = {
    ...swapPresence({ reduced, resolve }),
    ...leavingProps(present, reduced),
    children,
    className: cn(slotClass("motion-swap-pane", props), "flow-root"),
    "data-slot": "motion-swap-pane",
  };

  return useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(defaultProps, props),
    render: toMotionElement(undefined, "div"),
  });
}


// ~/src/siteplane/components/motion/motion-presence.ts

"use client";

import { motion, type Transition } from "motion/react";
import * as React from "react";

import { getMotionTransitionFromCss } from "../../system/motion/css-transition";

/**
 * The timing and the moves of the Motion parts, kept apart from the components
 * so they can be checked without a browser. Durations and easings are measured
 * from the `--motion-*` tokens of the element itself when an animation starts
 * (rulebook M1), so a token set on any container around it applies; nothing
 * here invents a timing. Presence and glides run on the Web Animations API from
 * the frame after a change; MotionSwap's fade and the rolling number hand their
 * values to Motion. Reduced motion (M5) makes everything instant.
 */

export type MotionLayout = "stack" | "flow";

/** Used whenever motion is reduced (M5) and on the server. */
export const instantTransition: Transition = { duration: 0 };

/**
 * The timing of an animation, measured from the element when it starts, which
 * applies a token set on any container around it. Without a document (server
 * rendering) nothing animates.
 */
export function measureTiming(
  element: Element | null,
  durationVariable: `--motion-${string}`,
  easingVariable: `--motion-${string}`,
): Transition {
  if (typeof document === "undefined") return instantTransition;
  return getMotionTransitionFromCss(
    element ?? document.documentElement,
    durationVariable,
    easingVariable,
  );
}

/**
 * Runs `start` in the frame after the one that renders the current commit and
 * returns its cancel. That first frame shows where a motion starts. A browser
 * can take long to present it (in Chrome the first change after an input
 * waits tens of milliseconds), and a clock started in it is already part-way
 * by the next frame; started a frame later, the motion begins where the first
 * frame left it. Base UI's panels start their transitions a frame later too.
 */
export function inSecondFrame(start: () => void): () => void {
  let id = requestAnimationFrame(() => {
    id = requestAnimationFrame(start);
  });
  return () => cancelAnimationFrame(id);
}

/** A unitless token such as a scale, with the value the kit ships as fallback. */
export function measureNumber(
  element: Element | null,
  variable: `--motion-${string}`,
  fallback: number,
): number {
  if (typeof document === "undefined") return fallback;
  const parsed = Number.parseFloat(
    getComputedStyle(element ?? document.documentElement).getPropertyValue(
      variable,
    ),
  );
  return parsed > 0 && parsed <= 1 ? parsed : fallback;
}

/**
 * The duration and the curve of a keyframe animation, read from the motion
 * tokens of the element when it starts (rulebook M1), so a token set on any
 * container around it applies.
 */
export function keyframeTiming(
  element: Element,
  durationVariable: `--motion-${string}`,
  easingVariable: `--motion-${string}`,
): KeyframeAnimationOptions {
  const styles = getComputedStyle(element);
  const duration = styles.getPropertyValue(durationVariable).trim();
  const easing = styles.getPropertyValue(easingVariable).trim();
  return {
    duration:
      (Number.parseFloat(duration) || 0) * (duration.endsWith("ms") ? 1 : 1000),
    ...(easing ? { easing } : {}),
  };
}

/**
 * Starts a keyframe animation that shows its first keyframe in the frame the
 * commit renders and plays from the frame after (`inSecondFrame`). The Web
 * Animations API runs it: translate, scale and opacity on the compositor,
 * height on the main thread.
 */
export function playFromSecondFrame(
  element: Element,
  keyframes: Keyframe[],
  options: KeyframeAnimationOptions,
): Animation {
  const animation = element.animate(keyframes, options);
  animation.pause();
  inSecondFrame(() => {
    // An animation that was cancelled or replaced meanwhile stays so.
    if (animation.playState === "paused") animation.play();
  });
  return animation;
}

/** The element's own `overflow-y` while a height animation clips it. */
const clipped = new WeakMap<HTMLElement, string>();

function clip(element: HTMLElement) {
  if (clipped.has(element)) return;
  clipped.set(element, element.style.overflowY);
  element.style.overflowY = "clip";
}

function unclip(element: HTMLElement) {
  const own = clipped.get(element);
  if (own === undefined) return;
  clipped.delete(element);
  element.style.overflowY = own;
}

/** A uniform `scale` as getComputedStyle reports it: "none" is 1. */
function scaleOf(value: string): number {
  const scale = Number.parseFloat(value);
  return Number.isFinite(scale) ? scale : 1;
}

/**
 * How an element comes and goes. `height`: a block that opens and closes its
 * height with a fade, a stack item or a reveal; what is below it moves with its
 * height, and it clips its content while the height moves (at rest nothing is
 * clipped, so focus rings, shadows and menus at its edge stay whole). `scale`:
 * an item of a wrapping or horizontal set, a flow list, which fades in and
 * grows from `--motion-presence-scale` and fades and shrinks out, without
 * travel (M2), while its siblings glide (`GlideOnChange`).
 */
export type PresenceKind = "height" | "scale";

/**
 * The keyframe an element shows now: the frame a running motion is at, or,
 * with nothing running, the element at rest.
 */
const presenceNow: Record<PresenceKind, (element: HTMLElement) => Keyframe> = {
  height: (element) => ({
    height: `${element.getBoundingClientRect().height}px`,
    opacity: Number(getComputedStyle(element).opacity),
  }),
  scale: (element) => {
    const styles = getComputedStyle(element);
    return { opacity: Number(styles.opacity), scale: scaleOf(styles.scale) };
  },
};

/** The keyframe of an element that is gone. */
const presenceGone: Record<PresenceKind, (element: HTMLElement) => Keyframe> = {
  height: () => ({ height: "0px", opacity: 0 }),
  scale: (element) => ({
    opacity: 0,
    scale: measureNumber(element, "--motion-presence-scale", 0.96),
  }),
};

/**
 * Starts the presence motion of an element over the expand duration: towards
 * rest when it is present, towards gone when it is not. A motion that still
 * runs is replaced from what it shows, so a change of course does not jump
 * back. `then` runs when the motion has finished.
 */
export function playPresence(
  element: HTMLElement,
  kind: PresenceKind,
  present: boolean,
  running: Animation | null,
  then: () => void,
): Animation {
  const from = running
    ? presenceNow[kind](element)
    : present
      ? presenceGone[kind](element)
      : null;
  running?.cancel();
  const atRest = presenceNow[kind](element);
  if (kind === "height") clip(element);
  const animation = playFromSecondFrame(
    element,
    present ? [from!, atRest] : [from ?? atRest, presenceGone[kind](element)],
    {
      ...keyframeTiming(
        element,
        "--motion-duration-expand",
        "--motion-ease-standard",
      ),
      // A leaving element keeps its last keyframe until it is removed.
      fill: present ? "none" : "forwards",
    },
  );
  animation.onfinish = () => {
    if (present) unclip(element);
    then();
  };
  return animation;
}

/**
 * Plays the presence of an element (rulebook M6, M7) over the expand duration:
 * from gone to rest when it appears or comes back, from rest to gone when it
 * leaves. JavaScript measures and the Web Animations API animates, from the
 * second frame (`playFromSecondFrame`), so a slow first frame never shows the
 * motion half done. A change of course starts from what is shown, so nothing
 * jumps back. `appear` is false for an element that is at rest when it mounts.
 * `onGone` runs when a leaving element has finished, and at once with reduced
 * motion, where nothing animates (M5).
 */
export function usePresenceMotion(
  ref: React.RefObject<HTMLElement | null>,
  kind: PresenceKind,
  {
    appear,
    onGone,
    present,
    reduced,
  }: {
    appear: boolean;
    onGone?: (() => void) | undefined;
    present: boolean;
    reduced: boolean;
  },
): void {
  const running = React.useRef<Animation | null>(null);
  const was = React.useRef<boolean | null>(null);
  const gone = React.useRef(onGone);
  gone.current = onGone;

  React.useLayoutEffect(() => {
    const element = ref.current;
    const first = was.current === null;
    const wasPresent = was.current;
    was.current = present;
    if (!element) return;
    const current = running.current;
    if (reduced || typeof element.animate !== "function") {
      current?.cancel();
      running.current = null;
      unclip(element);
      if (!present) gone.current?.();
      return;
    }
    if (present && (first ? !appear : wasPresent)) return;
    const animation = playPresence(element, kind, present, current, () => {
      if (running.current !== animation) return;
      running.current = null;
      if (!present) gone.current?.();
    });
    running.current = animation;
  }, [appear, kind, present, reduced, ref]);

  React.useEffect(() => () => running.current?.cancel(), []);
}

/**
 * Where an element is seen against the box of `origin`. A glide starts where
 * the element was seen, also when the commit scrolled a list that scrolls
 * (scroll anchoring does when items move), so the place is not taken against
 * the scrolled content.
 */
type Place = { height: number; left: number; top: number; width: number };

function placeIn(element: Element, originBox: DOMRect): Place {
  const box = element.getBoundingClientRect();
  return {
    height: box.height,
    left: box.left - originBox.left,
    top: box.top - originBox.top,
    width: box.width,
  };
}

/**
 * Where the parts were before a commit, against the box the origin had then.
 * The origin can move in the commit itself, such as a centred set that loses
 * a part, so a glide adds the origin's own move to start where the part was
 * seen.
 */
type Before = { origin: DOMRect; places: Map<HTMLElement, Place> };

/** The glide that runs on a part, to measure where it stands when it changes. */
const glides = new WeakMap<Element, Animation>();

/** Marks the picture of a part that has left; it is no part itself. */
export const motionGhostAttribute = "data-motion-ghost";

export type GlideOnChangeProps = {
  /** What the set is: a new value means it changed. */
  change: unknown;
  /** The element the parts are placed against; it has a box of its own. */
  origin: () => HTMLElement | null;
  /** The elements that glide. */
  parts: () => Iterable<HTMLElement>;
  /**
   * The set's parts come and go without a presence of their own: a new part
   * fades in, and a part that has left stays as a picture that fades out
   * where it was and takes no input.
   */
  presence?: boolean | undefined;
  reduced: boolean;
};

/**
 * Glides the parts of a set to their new place when the set changes (rulebook
 * M7), as a FLIP: Vue's TransitionGroup and Svelte's animate:flip move items
 * the same way. Before the commit it measures where each part is, after it
 * where each one is now; every part then shows at its old place in the frame
 * the commit renders and moves home on the compositor from the frame after
 * (`playFromSecondFrame`), with a translate added to its own. A part that is
 * still on its way glides on from where it stands. Measured in
 * getSnapshotBeforeUpdate, as Motion's layout animations measure, so it
 * renders nothing. The lifecycle methods are marked `override`, so an app
 * that compiles the installed source with `noImplicitOverride` passes.
 */
export class GlideOnChange extends React.Component<GlideOnChangeProps> {
  override getSnapshotBeforeUpdate(
    previous: Readonly<GlideOnChangeProps>,
  ): Before | null {
    if (previous.change === this.props.change || this.props.reduced) {
      return null;
    }
    const origin = this.props.origin();
    if (!origin || typeof origin.animate !== "function") return null;
    const originBox = origin.getBoundingClientRect();
    const places = new Map<HTMLElement, Place>();
    for (const part of this.props.parts())
      places.set(part, placeIn(part, originBox));
    return { origin: originBox, places };
  }

  override componentDidUpdate(
    _previous: Readonly<GlideOnChangeProps>,
    _state: unknown,
    before: Before | null,
  ): void {
    if (before) glideParts(this.props, before);
  }

  override render(): null {
    return null;
  }
}

function glideParts(
  { origin: originOf, parts: partsOf, presence }: GlideOnChangeProps,
  { origin: originBefore, places: before }: Before,
) {
  const origin = originOf();
  if (!origin) return;
  const parts = [...partsOf()];
  // A part that still glides stood where it was measured; it goes on from
  // there, measured now without its glide.
  for (const part of parts) glides.get(part)?.cancel();
  const originBox = origin.getBoundingClientRect();
  // How far the origin itself moved in the commit, in the page.
  const moved = {
    left: originBefore.left - originBox.left,
    top: originBefore.top - originBox.top,
  };
  const timing = keyframeTiming(
    origin,
    "--motion-duration-expand",
    "--motion-ease-standard",
  );
  for (const part of parts) {
    const was = before.get(part);
    if (!was) {
      if (presence) fadeIn(part, timing);
      continue;
    }
    const now = placeIn(part, originBox);
    const x = was.left + moved.left - now.left;
    const y = was.top + moved.top - now.top;
    if (Math.abs(x) < 0.5 && Math.abs(y) < 0.5) continue;
    // A part that is leaving (Motion pops it out of the flow, against the
    // origin) fades where it was seen, without travel (M2), also when the
    // origin moved under it; the others glide home.
    const leaving = part.hasAttribute("data-motion-pop-id");
    const glide = playFromSecondFrame(
      part,
      [
        { translate: `${x}px ${y}px` },
        { translate: leaving ? `${x}px ${y}px` : "0px 0px" },
      ],
      {
        ...timing,
        composite: "add",
        ...(leaving ? { fill: "forwards" as const } : {}),
      },
    );
    glides.set(part, glide);
  }
  if (!presence) return;
  for (const [part, was] of before)
    if (!part.isConnected)
      leavePicture(
        part,
        { ...was, left: was.left + moved.left, top: was.top + moved.top },
        origin,
        timing,
      );
}

function fadeIn(part: HTMLElement, timing: KeyframeAnimationOptions) {
  playFromSecondFrame(
    part,
    [presenceGone.scale(part), presenceNow.scale(part)],
    timing,
  );
}

/**
 * A copy of a part that has left, at the place it had, fading out under its
 * neighbours as they glide over its place; Base UI keeps such a copy of a
 * popup's previous content for the same reason. The part itself is gone at
 * once, so focus, keyboard order and assistive technology move on as they
 * always did.
 */
function leavePicture(
  part: HTMLElement,
  was: Place,
  origin: HTMLElement,
  timing: KeyframeAnimationOptions,
) {
  const picture = part.cloneNode(true) as HTMLElement;
  for (const element of [picture, ...picture.querySelectorAll("[id]")])
    element.removeAttribute("id");
  Object.assign(picture.style, {
    height: `${was.height}px`,
    left: `${was.left}px`,
    margin: "0",
    position: "absolute",
    top: `${was.top}px`,
    width: `${was.width}px`,
  });
  // The holder comes first in the origin, so the picture paints under the
  // parts that glide over its place, and it is no part's neighbour: a rule for
  // what follows a part does not match. It covers the padding box, where an
  // absolute child sits, from the origin's box: the picture stands where the
  // part was seen, and scrolls with the content.
  const holder = origin.ownerDocument.createElement("div");
  holder.setAttribute(motionGhostAttribute, "");
  holder.setAttribute("aria-hidden", "true");
  holder.inert = true;
  Object.assign(holder.style, {
    height: `${origin.clientHeight}px`,
    left: `${origin.scrollLeft - origin.clientLeft}px`,
    pointerEvents: "none",
    position: "absolute",
    top: `${origin.scrollTop - origin.clientTop}px`,
    width: `${origin.clientWidth}px`,
  });
  holder.append(picture);
  origin.prepend(holder);
  const fade = playFromSecondFrame(
    picture,
    [
      { opacity: Number(getComputedStyle(picture).opacity) },
      {
        opacity: 0,
        scale: measureNumber(picture, "--motion-presence-scale", 0.96),
      },
    ],
    { ...timing, fill: "forwards" },
  );
  fade.onfinish = () => holder.remove();
  fade.oncancel = () => holder.remove();
}

type Timed = {
  /** Reduced motion: every animation is instant. */
  reduced: boolean;
  /** The timing of an animation, measured when it starts. */
  resolve: () => Transition;
};

/**
 * A character of a rolling number: it opens its width and fades in when it
 * appears and closes its width and fades out when it goes, so the characters
 * beside it glide instead of jumping. The cells of the first render are at
 * rest, and a cell that has left plays its collapse while it stays in place.
 */
export function glyphPresence({
  appear,
  leaving,
  reduced,
  resolve,
}: Timed & { appear: boolean; leaving: boolean }) {
  const timing = () => (reduced ? instantTransition : resolve());
  const variants = {
    collapsed: () => ({ opacity: 0, width: 0, transition: timing() }),
    expanded: () => ({ opacity: 1, width: "auto", transition: timing() }),
  };
  if (reduced) {
    return { animate: "expanded", initial: false, variants } as const;
  }
  return {
    animate: leaving ? "collapsed" : "expanded",
    initial: appear ? "collapsed" : false,
    variants,
  } as const;
}

export type SwapTiming = {
  /** The new content: starts late enough that the old content is nearly gone. */
  enter: Transition;
  /** The container height, over the whole swap. */
  height: Transition;
  /** The old content. */
  leave: Transition;
};

/**
 * A swap takes `--motion-duration-base` in all: the old content fades out
 * within `--motion-duration-micro` and the new content fades in during the last
 * `--motion-duration-micro`, so the two overlap only where each is nearly
 * invisible (2 x micro - base, 20 ms by default). The container's height follows
 * over the whole swap. If the tokens leave no room, both fades run together.
 */
export function measureSwapTiming(element: Element | null): SwapTiming {
  const leave = measureTiming(
    element,
    "--motion-duration-micro",
    "--motion-ease-soft-in-out",
  );
  const enter = measureTiming(
    element,
    "--motion-duration-micro",
    "--motion-ease-standard",
  );
  const height = measureTiming(
    element,
    "--motion-duration-base",
    "--motion-ease-standard",
  );
  const delay = Math.max(
    0,
    ((height as { duration?: number }).duration ?? 0) -
      ((enter as { duration?: number }).duration ?? 0),
  );
  return { enter: { ...enter, delay }, height, leave };
}

/**
 * The same fade through for a pane that Base UI mounts and unmounts and fades
 * with CSS transitions, such as a Tabs panel: the pane that takes over fades in
 * during the last micro duration of the base duration, the pane that leaves
 * fades out at once. The class is the kit's swap-fade rule in motion.css, which
 * names the tokens `measureSwapTiming` measures, so a swap looks the same
 * whichever way it is driven, and which is instant with reduced motion (M5).
 */
export const swapFadeClassName = "sp-swap-fade";

/**
 * A Tabs panel switches at once instead (Lukas, 13 October 2026): the panel that
 * leaves is hidden the moment the new one shows, as tabs do in the WAI-ARIA
 * pattern and most interfaces. A dissolve showed both panels' text at once
 * wherever a panel has no surface of its own, and a fade through of a whole
 * panel leaves a moment with neither. The indicator and the height of the
 * panels' container carry the motion; the height follows over the expand
 * duration (the follow rule in motion.css). The class is the kit's
 * panel-switch rule in motion.css.
 */
export const panelSwitchClassName = "sp-panel-switch";

const instantSwap: SwapTiming = {
  enter: instantTransition,
  height: instantTransition,
  leave: instantTransition,
};

/**
 * Fade through: the old pane fades out quickly, the new pane fades in after it,
 * so the two texts are never legible on top of each other.
 */
export function swapPresence({
  reduced,
  resolve,
}: {
  reduced: boolean;
  resolve: () => SwapTiming;
}) {
  const timing = () => (reduced ? instantSwap : resolve());
  const variants = {
    hidden: () => ({ opacity: 0, transition: timing().leave }),
    shown: () => ({ opacity: 1, transition: timing().enter }),
  };
  if (reduced) {
    return { animate: "shown", initial: false, variants } as const;
  }
  return {
    animate: "shown",
    exit: "hidden",
    initial: "hidden",
    variants,
  } as const;
}

type Keyed = { key: React.Key | null };

/**
 * An item that has left the list and still plays its exit. `after` is the key
 * of the item that preceded it when it left (`null` for the first), `last`
 * whether it was the last one, and `element` what it rendered.
 */
export type Leaving<T = unknown> = {
  after: React.Key | null;
  element: T;
  key: React.Key;
  last: boolean;
};

/**
 * The keys in the order they render: the present items, with each leaving item
 * right after the item it followed. Where the present items moved or others
 * were inserted before it, a leaving item stays with its neighbour instead of
 * keeping its old index, so it never glides across the item beside it.
 */
export function mergeLeaving(
  present: readonly React.Key[],
  leaving: ReadonlyArray<Pick<Leaving, "after" | "key">>,
): React.Key[] {
  const order = [...present];
  const pending = leaving.filter((entry) => !order.includes(entry.key));
  while (pending.length > 0) {
    // An item waits until the item it followed is placed; chains are acyclic.
    const ready = pending.findIndex(
      (entry) => entry.after === null || order.includes(entry.after),
    );
    const [entry] = pending.splice(Math.max(0, ready), 1);
    order.splice(
      entry!.after === null ? 0 : order.indexOf(entry!.after) + 1,
      0,
      entry!.key,
    );
  }
  return order;
}

/**
 * The leaving items after an update. `previous` is what the list rendered
 * before it (the present items of the last commit) and `leaving` what was
 * leaving then. An item that is no longer present starts to leave, remembering
 * the item it followed; an item that came back stops. The same array comes back
 * when nothing changed.
 */
export function nextLeaving<T extends Keyed>(
  leaving: ReadonlyArray<Leaving<T>>,
  previous: readonly T[],
  present: readonly T[],
): ReadonlyArray<Leaving<T>> {
  const presentKeys = new Set(present.map((item) => item.key as React.Key));
  const next = leaving.filter((entry) => !presentKeys.has(entry.key));
  const known = new Set(next.map((entry) => entry.key));
  const order = mergeLeaving(
    previous.map((item) => item.key as React.Key),
    leaving,
  );
  const lastKey = previous.at(-1)?.key;
  const byKey = new Map(previous.map((item) => [item.key, item]));
  order.forEach((key, index) => {
    if (presentKeys.has(key) || known.has(key)) return;
    const element = byKey.get(key as string);
    if (!element) return;
    known.add(key);
    next.push({
      after: index > 0 ? order[index - 1]! : null,
      element,
      key,
      last: key === lastKey,
    });
  });
  return next.length === leaving.length &&
    next.every((entry, index) => entry === leaving[index])
    ? leaving
    : next;
}

/** One entry of a stack list as it renders: a present item or a leaving one. */
export type StackEntry<T> = {
  element: T;
  key: React.Key;
  /** Whether no other present item follows, so no space is needed after it. */
  last: boolean;
  leaving: boolean;
};

/**
 * Every entry of a stack list in render order, with the leaving items in their
 * place. A leaving item keeps the `last` it had when it left, so the space after
 * it does not open or close during its exit.
 */
export function stackEntries<T extends Keyed>(
  present: readonly T[],
  leaving: ReadonlyArray<Leaving<T>>,
): StackEntry<T>[] {
  const lastKey = present.at(-1)?.key;
  const byKey = new Map(present.map((item) => [item.key, item]));
  const held = new Map(leaving.map((entry) => [entry.key, entry]));
  return mergeLeaving(
    present.map((item) => item.key as React.Key),
    leaving,
  ).map((key) => {
    const element = byKey.get(key as string);
    if (element) return { element, key, last: key === lastKey, leaving: false };
    const entry = held.get(key)!;
    return { element: entry.element, key, last: entry.last, leaving: true };
  });
}

/**
 * The leaving items once one has finished its exit. Items that followed it
 * follow what it followed, so the order of the others does not change.
 */
export function dropLeaving<T>(
  leaving: ReadonlyArray<Leaving<T>>,
  key: React.Key,
): ReadonlyArray<Leaving<T>> {
  const gone = leaving.find((entry) => entry.key === key);
  if (!gone) return leaving;
  return leaving
    .filter((entry) => entry !== gone)
    .map((entry) =>
      entry.after === key ? { ...entry, after: gone.after } : entry,
    );
}

/**
 * The entries of a keyed list, leaving ones included. An item that is no longer
 * given stays in the list until its exit has played, in the place after the
 * item it followed; `remove` drops it once it has gone. `track` is off for
 * lists whose items leave at once, and for reduced motion, where nothing stays.
 */
export function useLeavingEntries<T extends Keyed>(
  present: readonly T[],
  track: boolean,
) {
  const [leaving, setLeaving] = React.useState<ReadonlyArray<Leaving<T>>>([]);
  // What the list rendered in the last commit; a leaving item shows it again.
  const committed = React.useRef(present);
  React.useLayoutEffect(() => {
    committed.current = present;
  });

  const next = track
    ? nextLeaving(leaving, committed.current, present)
    : leaving.length > 0
      ? []
      : leaving;
  if (next !== leaving) setLeaving(next);

  const remove = React.useCallback(
    (key: React.Key) => setLeaving((entries) => dropLeaving(entries, key)),
    [],
  );
  return { entries: stackEntries(present, next), remove };
}

/**
 * Clips the element while its height (or its width, for the characters of a
 * rolling number) moves and releases the clip at rest. Motion keeps `auto` in
 * the element's style at rest and a pixel value while it moves, so the style
 * itself says which. `overflow` is not a Motion target: Motion writes back every
 * value it knows on each frame and would undo the release. A style observer,
 * unlike a completion callback, cannot miss the end of an interrupted
 * animation. The returned `ref` belongs on the animated element.
 */
export function useClipWhileAnimating<T extends HTMLElement = HTMLElement>(
  axis: "height" | "width" = "height",
) {
  const ref = React.useRef<T | null>(null);
  React.useEffect(() => {
    const element = ref.current;
    if (!element || typeof MutationObserver === "undefined") return;
    const overflow = axis === "height" ? "overflowY" : "overflowX";
    const follow = () => {
      const size = element.style[axis];
      const next = size === "" || size === "auto" ? "" : "clip";
      if (element.style[overflow] !== next) element.style[overflow] = next;
    };
    follow();
    const observer = new MutationObserver(follow);
    observer.observe(element, { attributeFilter: ["style"], attributes: true });
    return () => observer.disconnect();
  }, [axis]);
  return { ref };
}

/**
 * A leaving element takes no input and is hidden from assistive technology.
 * While motion is reduced it is hidden at once, in the frame it leaves in,
 * although the element itself is removed a moment later.
 */
export function leavingProps(present: boolean, reduced = false) {
  if (present) return {};
  return {
    "aria-hidden": true,
    inert: true,
    ...(reduced ? { style: { display: "none" } } : {}),
  };
}

type MotionTag = "div" | "li" | "ul";

const wrapped = new WeakMap<object, React.ElementType>();

/**
 * The `render` element, upgraded to a Motion element so that it can animate:
 * a DOM element (`<div />`) becomes its `motion.*` counterpart, a component
 * element (`<Card />`) is wrapped with `motion.create`. Without `render` the
 * default tag is used. Props, key and ref of the element are kept.
 */
export function toMotionElement(
  render: React.ReactElement | undefined,
  defaultTag: MotionTag,
): React.ReactElement {
  if (!render)
    return React.createElement(motion[defaultTag] as React.ElementType);

  const type = render.type;
  let component: React.ElementType;
  if (typeof type === "string") {
    component = (motion as unknown as Record<string, React.ElementType>)[type]!;
  } else {
    let existing = wrapped.get(type as object);
    if (!existing) {
      existing = motion.create(type as React.ElementType) as React.ElementType;
      wrapped.set(type as object, existing);
    }
    component = existing;
  }
  return React.createElement(
    component,
    render.props as Record<string, unknown>,
  );
}


// ~/src/siteplane/components/motion/motion-follow.ts

"use client";

import * as React from "react";

import { useReducedMotionPreference } from "../../system/motion/use-reduced-motion-preference";
import { inSecondFrame } from "./motion-presence";

/**
 * How a container follows the height of what it holds when content comes and
 * goes: a swapped pane, a row of wrapping items, a panel that leaves while it
 * stays mounted. It is the one place that moves a container's height, so every
 * part and every component built on them moves it the same way.
 *
 * JavaScript measures and a CSS transition animates, as Base UI's Collapsible
 * and Accordion panels do with the height they measure: the container is held
 * at the height it showed, then given the height of its new content, and the
 * kit's follow rule in motion.css animates between the two. A transition starts
 * with the frame that renders it, however long the commit before that frame
 * took, so the first frame never shows the movement half done; a new height
 * that arrives mid-way retargets it from the height shown.
 */

export type FollowOptions = {
  /**
   * The element that takes over. It is observed until the follow is over, so
   * content that builds a frame later, such as a collection or an editor, is
   * followed instead of popping into place at the end.
   */
  enter?: Element | null;
};

export type HeightFollow = { stop: () => void };

/** The class of the follow rule (motion.css), while a container follows. */
export const heightFollowClassName = "sp-height-follow";

/** A follow that runs, with the height it heads for. */
type Running = HeightFollow & { target: () => number };

/** The follow that runs in a container, to end it before another starts. */
const follows = new Map<HTMLElement, Running>();

/**
 * How much taller the content of `element` will be than it shows now: the
 * containers that follow inside it head for heights they do not show yet. A
 * container that follows around them heads for the height its content will
 * have, not for the frame they are at (a group of tags that builds in a
 * swapped pane).
 */
function innerGrowth(element: Element): number {
  let growth = 0;
  for (const [inner, follow] of follows)
    if (inner !== element && element.contains(inner))
      growth += follow.target() - inner.getBoundingClientRect().height;
  return growth;
}

/** The longest duration of a computed `transition-duration` list, in ms. */
function longestDuration(value: string): number {
  return Math.max(
    0,
    ...value
      .split(",")
      .map(
        (part) =>
          Number.parseFloat(part) * (part.trim().endsWith("ms") ? 1 : 1000),
      )
      .filter(Number.isFinite),
  );
}

const nothing: HeightFollow = { stop: () => undefined };

/**
 * Moves the container from `from`, the height it showed before its content
 * changed, to the height of the new content, measured now in the commit that
 * changed it. The container is held at `from` for the frame that commit
 * renders, and the frame after hands it the new height, which the follow rule
 * animates (`inSecondFrame`). With an entering element the follow keeps
 * watching it: when it
 * grows or shrinks, the container heads for the new height from the one it
 * shows. That is read from the observed size alone, without releasing the
 * container, so following costs no extra layout. Everything the container is
 * given (height, clip, the class) is handed back when the height has arrived,
 * so later changes flow naturally. A container that scrolls keeps its own
 * height, and so does one that had no box before (`from` is `null`). A pane
 * that leaves is positioned by `holdPanePlace`, which lasts as long as the
 * pane and not as long as the height.
 */
export function followHeight(
  container: HTMLElement,
  from: number | null,
  { enter }: FollowOptions = {},
): HeightFollow {
  follows.get(container)?.stop();
  if (from === null || typeof requestAnimationFrame === "undefined") {
    return nothing;
  }
  if (/auto|scroll/.test(getComputedStyle(container).overflowY)) return nothing;

  // The commit has laid out the new content. Besides its height, the follow
  // keeps what the container holds around the entering element (a tab list,
  // padding), so that the container's height can be told from the entering
  // element's size later on.
  let target =
    container.getBoundingClientRect().height + innerGrowth(container);
  const around = enter
    ? target - enter.getBoundingClientRect().height - innerGrowth(enter)
    : 0;

  const kept = {
    height: container.style.height,
    overflowY: container.style.overflowY,
  };
  let pinned = false;
  let pinnedAt = from;
  let started = false;
  let done = false;
  let cancelHead: (() => void) | undefined;
  let timer: ReturnType<typeof setTimeout> | undefined;
  // An entering element is watched; see `measured` below.
  const observer =
    enter && typeof ResizeObserver !== "undefined"
      ? new ResizeObserver(measured)
      : undefined;

  // The container shows the height it had; what leaves is clipped with it.
  const pin = (height: number) => {
    pinned = true;
    pinnedAt = height;
    container.classList.add(heightFollowClassName);
    container.style.overflowY = "clip";
    container.style.height = `${height}px`;
  };
  const release = () => {
    pinned = false;
    container.classList.remove(heightFollowClassName);
    container.style.height = kept.height;
    container.style.overflowY = kept.overflowY;
  };
  const finish = () => {
    if (done) return;
    done = true;
    cancelHead?.();
    clearTimeout(timer);
    observer?.disconnect();
    container.removeEventListener("transitionend", arrived);
    release();
    if (follows.get(container) === follow) follows.delete(container);
  };
  // The height has arrived when its transition ends.
  function arrived(event: Event) {
    if (
      event.target === container &&
      (event as TransitionEvent).propertyName === "height"
    )
      finish();
  }
  const follow: Running = { stop: finish, target: () => target };
  follows.set(container, follow);

  pin(from);
  // How long a move takes: the follow rule's duration, or what the app's own
  // transition on the container says. Nothing is held longer than that after
  // the last change, also when no transition runs to say it has ended.
  const duration = longestDuration(
    getComputedStyle(container).transitionDuration,
  );
  const settleBy = () => {
    clearTimeout(timer);
    timer = setTimeout(finish, duration + 100);
  };
  container.addEventListener("transitionend", arrived);
  settleBy();

  // The new height, which the rule animates from the one held. When nothing
  // moves, an entering element is still watched for as long as a move takes;
  // the container meanwhile has its own height again.
  const head = () => {
    cancelHead = undefined;
    if (done) return;
    if (!enter && Math.abs(target - from) < 1) {
      finish();
      return;
    }
    if (Math.abs(target - pinnedAt) < 1) release();
    else container.style.height = `${target}px`;
    settleBy();
  };

  if (!observer || !enter) {
    cancelHead = inSecondFrame(head);
    return follow;
  }
  observer.observe(enter);
  return follow;

  // With an entering element the height is held until that element has been
  // laid out once, at the end of the frame the commit renders: content that
  // builds a moment later (a collection, an editor) is then in place, and the
  // new height follows in the frame after. The observer only reads: after
  // layout, the sizes are known without forcing another layout.
  function measured() {
    if (done || !enter) return;
    // Held, the container shows its pin or the transition's frame; handed back,
    // it showed the height it settled at until this layout grew or shrank it.
    const shown = pinned ? container.getBoundingClientRect().height : target;
    const natural =
      enter.getBoundingClientRect().height + innerGrowth(enter) + around;
    // An entering element that fills all the room the container gives it may
    // be stretched to it (a Tabs panel grows into its root): its size says
    // nothing about its content until it no longer fits.
    const fills = Math.abs(natural - shown) < 1;
    if (!started) {
      started = true;
      if (!fills) target = natural;
      cancelHead = inNextFrame(head);
      return;
    }
    if (fills || Math.abs(natural - target) < 1) return;
    target = natural;
    if (cancelHead) return;
    if (pinned) {
      container.style.height = `${target}px`;
      settleBy();
    } else {
      // The container rests at its own height. Held at what it shows, it
      // heads for the new height in the next frame, so the move has a height
      // to start from.
      pin(shown);
      cancelHead = inNextFrame(head);
    }
  }
}

function inNextFrame(start: () => void): () => void {
  const id = requestAnimationFrame(start);
  return () => cancelAnimationFrame(id);
}

/**
 * Lets a container follow its height when its content changes. Returns
 * `follow`, to call in a layout effect in the commit that changes the content:
 * the container then moves from the height it showed before the commit to the
 * height of the new content. Does nothing when motion is reduced (M5), when the
 * container had no box (hidden) or when `enabled` is false.
 */
export function useHeightFollower(
  ref: React.RefObject<HTMLElement | null>,
  enabled = true,
): (options?: FollowOptions) => void {
  const reduced = useReducedMotionPreference();
  const instant = React.useRef(reduced);
  instant.current = reduced;
  const height = React.useRef<number | null>(null);
  const session = React.useRef<HeightFollow | null>(null);

  // The height at the last frame, including frames of a running follow. A
  // passive effect, because the container may be an ancestor, whose ref is set
  // after the layout effects of the component that follows it. The observer
  // reads in the rendering steps of a frame, from the first frame on, so the
  // height is one the page has shown: a commit that never reached the screen,
  // such as the empty first pass of a React Aria collection, is no height to
  // follow from.
  React.useEffect(() => {
    const element = ref.current;
    if (!enabled || !element || typeof ResizeObserver === "undefined") return;
    const measure = () => {
      height.current =
        element.getClientRects().length > 0
          ? element.getBoundingClientRect().height
          : null;
    };
    const observer = new ResizeObserver(measure);
    observer.observe(element);
    return () => observer.disconnect();
  }, [enabled, ref]);

  React.useEffect(() => () => session.current?.stop(), []);

  return React.useCallback(
    (options?: FollowOptions) => {
      const container = ref.current;
      if (!enabled || !container || instant.current) return;
      // A follow that still runs shows its own height; at rest it is the one
      // seen at the last frame before this commit.
      const from = follows.has(container)
        ? container.getBoundingClientRect().height
        : height.current;
      session.current = followHeight(container, from, options);
    },
    [enabled, ref],
  );
}

/** Where a pane sits in its container. */
export type PanePlace = {
  height: number;
  left: number;
  top: number;
  width: number;
};

/** The style that keeps a leaving pane where it is, out of the flow. */
export function panePin(place: PanePlace): React.CSSProperties {
  return {
    height: place.height,
    left: place.left,
    margin: 0,
    position: "absolute",
    top: place.top,
    width: place.width,
  };
}

/** The containers panes are pinned in: how many, and the position they had. */
const placeHolders = new WeakMap<
  HTMLElement,
  { panes: number; position: string }
>();

/**
 * Makes the container the box a leaving pane is pinned against (`panePin`): a
 * container that is not positioned becomes `relative`. Returns the release, to
 * call when the pane is gone; the container gets its own position back when the
 * last pane pinned in it is gone. The hold lasts as long as the pane, which can
 * outlast its container's height follow.
 */
export function holdPanePlace(container: HTMLElement): () => void {
  const held = placeHolders.get(container);
  if (held) {
    held.panes += 1;
  } else {
    placeHolders.set(container, {
      panes: 1,
      position: container.style.position,
    });
    if (getComputedStyle(container).position === "static") {
      container.style.position = "relative";
    }
  }
  let released = false;
  return () => {
    const entry = placeHolders.get(container);
    if (released || !entry) return;
    released = true;
    entry.panes -= 1;
    if (entry.panes > 0) return;
    placeHolders.delete(container);
    container.style.position = entry.position;
  };
}

/** The pane's place against the padding box of its container. */
function placeOf(pane: HTMLElement, container: HTMLElement): PanePlace {
  const box = pane.getBoundingClientRect();
  const containerBox = container.getBoundingClientRect();
  return {
    height: box.height,
    left:
      box.left -
      containerBox.left -
      container.clientLeft +
      container.scrollLeft,
    top: box.top - containerBox.top - container.clientTop + container.scrollTop,
    width: box.width,
  };
}

/**
 * A pane that leaves while it stays mounted, as a Base UI panel does until its
 * exit transition has run, instead of being replaced by a `MotionSwap` (which
 * would remount a pane that is kept mounted, together with the state in it).
 * `open` says the pane is shown, `leaving` that it is on its way out. The
 * returned style, for the pane while it leaves, keeps it where it was, out of
 * the flow and against its container until it is gone (`holdPanePlace`), so the
 * pane that takes over has the place and the pane's container follows the new
 * height over the expand duration (the follow rule in motion.css); the panel
 * switch rule (panelSwitchClassName) hides it at once. With reduced motion the
 * height changes at once (M5).
 * `enter` finds the pane that takes over in the container, so late content in it
 * is followed; give it a stable function.
 */
export function useLeavingPane(
  ref: React.RefObject<HTMLElement | null>,
  {
    enter,
    leaving,
    open,
  }: {
    enter?: (container: HTMLElement) => Element | null;
    leaving: boolean;
    open: boolean;
  },
): React.CSSProperties | undefined {
  const reduced = useReducedMotionPreference();
  const place = React.useRef<PanePlace | null>(null);
  // The container is the element the pane sits in.
  const container = React.useMemo(
    () => ({
      get current() {
        return ref.current?.parentElement ?? null;
      },
    }),
    [ref],
  );
  const follow = useHeightFollower(container);
  const latest = React.useRef({ enter, follow });
  latest.current = { enter, follow };

  // The pane leaves: it is pinned against its container until it is gone, and
  // the container follows from the height it had to the new one.
  React.useLayoutEffect(() => {
    const element = container.current;
    if (!leaving || reduced || !element || !place.current) return;
    const release = holdPanePlace(element);
    latest.current.follow({ enter: latest.current.enter?.(element) ?? null });
    return release;
  }, [container, leaving, reduced]);

  // At rest: where the pane sits, which is where it is pinned when it leaves.
  React.useLayoutEffect(() => {
    const pane = ref.current;
    const element = pane?.parentElement;
    if (!open || !pane || !element || typeof ResizeObserver === "undefined") {
      return;
    }
    place.current = placeOf(pane, element);
    const observer = new ResizeObserver(() => {
      place.current = placeOf(pane, element);
    });
    observer.observe(pane);
    observer.observe(element);
    return () => observer.disconnect();
  }, [open, ref]);

  if (!leaving) return undefined;
  if (reduced) return { display: "none" };
  return place.current ? panePin(place.current) : undefined;
}


// ~/src/siteplane/components/motion/motion-number.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import {
  animate,
  motion,
  useMotionValue,
  useTransform,
  type AnimationPlaybackControls,
} from "motion/react";
import * as React from "react";

import { useReducedMotionPreference } from "../../system/motion/use-reduced-motion-preference";
import { cn } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import {
  defaultNumberLocales,
  digitGlyphs,
  localeKey,
  mod,
  numberCells,
  numberTokens,
  numberTrend,
  stringTokens,
  tokensValue,
  wheelRange,
  wheelTarget,
  type NumberCell,
} from "./motion-number-cells";
import {
  glyphPresence,
  measureTiming,
  useClipWhileAnimating,
  useLeavingEntries,
} from "./motion-presence";

export interface MotionNumberProps extends Omit<
  useRender.ComponentProps<"span">,
  "children"
> {
  /**
   * The value to show. A number is formatted with `locales` and `format`; a
   * string is shown as it is, and its digits roll like the digits of a number.
   */
  value: number | string;
  /**
   * The locale a number is formatted in, as `Intl.NumberFormat` takes it.
   * `en-US` by default, so that the server and the client always agree.
   */
  locales?: Intl.LocalesArgument;
  /** `Intl.NumberFormat` options for a number: currency, percent, compact notation, signs, units. */
  format?: Intl.NumberFormatOptions;
}

type NumberModel = {
  cells: NumberCell[];
  glyphs: readonly string[];
  /** What the value is, to tell which way it moved. */
  scalar: number;
  /** The text as a whole: what assistive technology reads. */
  text: string;
};

function useNumberModel(
  value: number | string,
  locales: Intl.LocalesArgument,
  format: Intl.NumberFormatOptions | undefined,
): NumberModel {
  // The content of the locales and the format is their identity: a new object
  // with the same content is the same number, so the memo keys on the content.
  const localesId = localeKey(locales);
  const formatId = format ? JSON.stringify(format) : "";
  return React.useMemo(() => {
    const tokens =
      typeof value === "number"
        ? numberTokens(value, locales, format)
        : stringTokens(value, locales);
    return {
      cells: numberCells(tokens),
      glyphs: digitGlyphs(locales),
      scalar: typeof value === "number" ? value : tokensValue(tokens),
      text: tokens.map((token) => token.text).join(""),
    };
  }, [value, localesId, formatId]);
}

// A digit rolls through a window one line tall. Its glyphs fade at the edges
// while it rolls, and only then: at rest the digit is plain text.
const wheelWindowClassName =
  "absolute inset-0 overflow-y-clip [mask-image:linear-gradient(to_bottom,transparent,#000_18%,#000_82%,transparent)]";

type Roll = {
  base: number;
  count: number;
  from: number;
  to: number;
  /**
   * The width of the place when the roll starts and when it ends: the digits of
   * a font without tabular figures differ in width.
   */
  widthFrom: number;
  widthTo: number;
};

/**
 * One digit place: the digit as plain text at rest, and while it rolls an
 * endless wheel of the ten digits. The wheel's position is a number that never
 * wraps (9 is followed by 10, which reads 0), so it rolls on in the direction of
 * the trend, and a change that arrives while it still rolls goes on from where
 * the wheel is instead of from the digit it was heading for. The width of the
 * place follows the roll from the old digit's width to the new one's, so a font
 * whose digits differ in width does not make the number jump.
 */
function Wheel({
  digit,
  glyphs,
  reduced,
  trend,
}: {
  digit: number;
  glyphs: readonly string[];
  reduced: boolean;
  trend: 1 | -1;
}): React.ReactElement {
  const position = useMotionValue(digit);
  const [roll, setRoll] = React.useState<Roll | null>(null);
  const sizer = React.useRef<HTMLSpanElement>(null);
  const windowRef = React.useRef<HTMLSpanElement>(null);
  const settled = React.useRef(digit);
  const restWidth = React.useRef(0);
  const running = React.useRef<AnimationPlaybackControls | null>(null);

  // The rows move up as the position rises: row `base` is at the top at 0%.
  const base = roll?.base ?? 0;
  const count = roll?.count ?? 1;
  const y = useTransform(
    position,
    (value) => `${(-(value - base) / count) * 100}%`,
  );
  const width = useTransform(position, (value) =>
    roll
      ? roll.widthFrom +
        ((roll.widthTo - roll.widthFrom) * (value - roll.from)) /
          (roll.to - roll.from)
      : 0,
  );

  // A new digit: roll to it from wherever the wheel is, or show it at once.
  React.useLayoutEffect(() => {
    if (settled.current === digit) return;
    settled.current = digit;
    running.current?.stop();
    // At rest the wheel stands at any whole place that reads as its digit; the
    // places stay small. While it still rolls it goes on from where it is.
    if (!roll) position.jump(mod(position.get(), 10));
    const from = position.get();
    const to = wheelTarget(from, digit, trend);
    if (reduced || to === from) {
      position.jump(digit);
      setRoll(null);
    } else {
      setRoll({
        ...wheelRange(from, to),
        from,
        to,
        widthFrom: roll ? width.get() : restWidth.current,
        widthTo: sizer.current?.getBoundingClientRect().width ?? 0,
      });
    }
  }, [digit, position, reduced, trend]);

  // At rest: how wide the digit is, which is where the next roll starts. It is
  // measured when the place mounts, when its digit or glyphs change and when a
  // roll ends, not after every render of the number around it.
  React.useLayoutEffect(() => {
    if (!roll)
      restWidth.current = sizer.current?.getBoundingClientRect().width ?? 0;
  }, [digit, glyphs, roll]);

  // The roll: the position follows its target over the value duration.
  React.useLayoutEffect(() => {
    if (!roll) return;
    const target = roll.to;
    running.current = animate(position, target, {
      ...measureTiming(
        windowRef.current,
        "--motion-duration-value",
        "--motion-ease-standard",
      ),
      // The wheel stays where it stopped until the plain digit takes over: the
      // last row shown is the digit.
      onComplete: () => {
        running.current = null;
        setRoll(null);
      },
    });
    return () => running.current?.stop();
  }, [position, roll]);

  return (
    <motion.span
      className="relative inline-block"
      {...(roll ? { style: { width } } : {})}
    >
      {/* The digit gives the place its baseline while it rolls. */}
      <span className={roll ? "invisible" : undefined} ref={sizer}>
        {glyphs[digit]}
      </span>
      {roll ? (
        <span
          aria-hidden="true"
          className={cn("sp-motion-number-wheel", wheelWindowClassName)}
          data-slot="motion-number-wheel"
          ref={windowRef}
        >
          <motion.span className="block text-center" style={{ y }}>
            {Array.from({ length: roll.count }, (_, row) => (
              <span className="block" key={roll.base + row}>
                {glyphs[mod(roll.base + row, 10)]}
              </span>
            ))}
          </motion.span>
        </span>
      ) : null}
    </motion.span>
  );
}

/**
 * One character of the number. A place that appears opens its width and fades
 * in, a place that goes closes and fades out, so the characters beside it glide.
 * A digit that changes rolls; a character that changes is a new place.
 */
function Glyph({
  appear,
  cell,
  glyphs,
  leaving,
  onGone,
  reduced,
  trend,
}: {
  appear: boolean;
  cell: NumberCell;
  glyphs: readonly string[];
  leaving: boolean;
  onGone: (key: React.Key) => void;
  reduced: boolean;
  trend: 1 | -1;
}): React.ReactElement {
  const clip = useClipWhileAnimating<HTMLSpanElement>("width");
  // The places of the first render are at rest; later ones animate in.
  const entering = React.useRef(appear).current;
  const presence = glyphPresence({
    appear: entering,
    leaving,
    reduced,
    resolve: () =>
      measureTiming(
        clip.ref.current,
        "--motion-duration-value",
        "--motion-ease-standard",
      ),
  });

  return (
    <motion.span
      {...presence}
      className={cn(
        cell.kind === "digit"
          ? "sp-motion-number-digit"
          : "sp-motion-number-char",
        "relative inline-block whitespace-pre",
      )}
      data-slot={
        cell.kind === "digit" ? "motion-number-digit" : "motion-number-char"
      }
      onAnimationComplete={(definition) => {
        if (leaving && definition === "collapsed") onGone(cell.key);
      }}
      ref={clip.ref}
    >
      {cell.kind === "digit" ? (
        <Wheel
          digit={cell.value}
          glyphs={glyphs}
          reduced={reduced}
          trend={trend}
        />
      ) : (
        cell.text
      )}
    </motion.span>
  );
}

/**
 * A number that rolls to its new value, for figures that change in place:
 * totals, rates, counts. Each digit slides like an odometer wheel to the new
 * digit, upward when the number rises and downward when it falls; characters
 * that come and go (a sign, a separator, a new leading digit) open and close
 * their width; tabular figures keep everything from jittering. The first
 * render and the server show the final text, and reduced motion is instant.
 * Assistive technology reads the final value once, with no live announcement.
 */
export function MotionNumber({
  className,
  format,
  locales = defaultNumberLocales,
  render,
  value,
  ...props
}: MotionNumberProps): React.ReactElement {
  const reduced = useReducedMotionPreference();
  const model = useNumberModel(value, locales, format);
  // Places that mount after the first render animate in.
  const mounted = React.useRef(false);
  React.useEffect(() => {
    mounted.current = true;
  }, []);

  // Which way the number moved, from the value of the last commit.
  const before = React.useRef(model.scalar);
  const trend = numberTrend(before.current, model.scalar);
  React.useLayoutEffect(() => {
    before.current = model.scalar;
  });

  const { entries, remove } = useLeavingEntries(model.cells, !reduced);

  const defaultProps = {
    children: (
      <>
        <span className="sr-only">{model.text}</span>
        <span
          aria-hidden="true"
          className="sp-motion-number-glyphs"
          data-slot="motion-number-glyphs"
        >
          {entries.map((entry) => (
            <Glyph
              appear={mounted.current}
              cell={entry.element}
              glyphs={model.glyphs}
              key={entry.key}
              leaving={entry.leaving}
              onGone={remove}
              reduced={reduced}
              trend={trend}
            />
          ))}
        </span>
      </>
    ),
    className: cn(
      slotClass("motion-number", props, render),
      "relative inline-block whitespace-nowrap tabular-nums",
      className,
    ),
    "data-slot": "motion-number",
    // The places of a number are boxes of their own, which a right-to-left
    // parent would put in reverse order. A number reads from left to right in
    // every writing direction, and the number as a whole sits where the layout
    // puts it. (`dir` isolates it from the text around it, too.)
    dir: "ltr",
  };

  return useRender({
    defaultTagName: "span",
    props: mergeProps<"span">(defaultProps, props),
    render,
  });
}


// ~/src/siteplane/components/motion/motion-number-cells.ts

/**
 * What a rolling number is made of, kept apart from the component so that it
 * can be checked without a DOM. A number is cut into characters, and every
 * character gets a key that names the place it holds: the units digit, the
 * group separator after the thousands, the percent sign. A character that keeps
 * its place while the number changes is the same cell, so a digit rolls and a
 * sign that stays does nothing; a place that appears or goes opens or closes its
 * width. The server and the first render show the final text.
 */

/** The locale of a number that names none: fixed, so the server and the client agree. */
export const defaultNumberLocales = "en-US";

export type NumberToken =
  | { kind: "digit"; text: string; value: number }
  | { kind: "group" | "decimal"; text: string }
  | { kind: "text"; text: string };

export type NumberCell =
  | { key: string; kind: "digit"; text: string; value: number }
  | { key: string; kind: "static"; text: string };

export function localeKey(locales: Intl.LocalesArgument): string {
  if (locales === undefined) return "";
  return Array.isArray(locales) ? locales.join(",") : String(locales);
}

const latinDigits: readonly string[] = [
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
];
const glyphCache = new Map<string, readonly string[]>();
const decimalCache = new Map<string, string>();

/**
 * The ten digits as the locale writes them, in order: "0" to "9" for most, the
 * Arabic-Indic digits for others. A wheel shows these glyphs.
 */
export function digitGlyphs(locales: Intl.LocalesArgument): readonly string[] {
  const id = localeKey(locales);
  let glyphs = glyphCache.get(id);
  if (!glyphs) {
    try {
      const format = new Intl.NumberFormat(locales, { useGrouping: false });
      glyphs = latinDigits.map((_, digit) => format.format(digit));
    } catch {
      glyphs = latinDigits;
    }
    glyphCache.set(id, glyphs);
  }
  return glyphs;
}

/** The decimal separator of the locale, which tells a preformatted string where its fraction starts. */
export function decimalSeparator(locales: Intl.LocalesArgument): string {
  const id = localeKey(locales);
  let separator = decimalCache.get(id);
  if (!separator) {
    try {
      separator =
        new Intl.NumberFormat(locales)
          .formatToParts(1.1)
          .find((part) => part.type === "decimal")?.value ?? ".";
    } catch {
      separator = ".";
    }
    decimalCache.set(id, separator);
  }
  return separator;
}

/** A number as Intl writes it, cut into digits, separators and the rest. */
export function numberTokens(
  value: number,
  locales: Intl.LocalesArgument,
  format?: Intl.NumberFormatOptions,
): NumberToken[] {
  const glyphs = digitGlyphs(locales);
  const tokens: NumberToken[] = [];
  for (const part of new Intl.NumberFormat(locales, format).formatToParts(
    value,
  )) {
    if (part.type === "integer" || part.type === "fraction") {
      for (const char of part.value) {
        const digit = glyphs.indexOf(char);
        tokens.push(
          digit >= 0
            ? { kind: "digit", text: char, value: digit }
            : { kind: "text", text: char },
        );
      }
    } else if (part.type === "group" || part.type === "decimal") {
      tokens.push({ kind: part.type, text: part.value });
    } else {
      tokens.push({ kind: "text", text: part.value });
    }
  }
  return tokens;
}

// A number inside a string: digits, with group and decimal separators between
// them. A space is a separator only when exactly three digits follow it, so
// "4 12" stays two numbers.
const numericRun =
  /[0-9]+(?:(?:[,.\u00A0\u202F'\u2019]| (?=[0-9]{3}(?![0-9])))[0-9]+)*/g;
// The rest of the string: a sign, a currency symbol or a percent sign alone, so
// that each can come and go by itself, and any other text as one piece.
const textPiece =
  /[+\-\u2212\u00B1]|\p{Sc}|[%\u2030\u2031]|[^+\-\u2212\u00B1\p{Sc}%\u2030\u2031]+/gu;

/**
 * A string that is already formatted, cut the same way. Latin digits are
 * digits; the locale says which separator is the decimal one. A string without
 * digits is text only.
 */
export function stringTokens(
  text: string,
  locales: Intl.LocalesArgument,
): NumberToken[] {
  const decimal = decimalSeparator(locales);
  const tokens: NumberToken[] = [];
  const pushText = (segment: string) => {
    for (const piece of segment.match(textPiece) ?? [])
      tokens.push({ kind: "text", text: piece });
  };
  let cursor = 0;
  for (const match of text.matchAll(numericRun)) {
    pushText(text.slice(cursor, match.index));
    const run = match[0];
    const last = [...run].findLastIndex((char) => char < "0" || char > "9");
    // The last separator is the decimal point when it is the locale's own and
    // the only one of its kind; "1.234.567" has none.
    const decimalAt =
      last >= 0 && run[last] === decimal && run.split(decimal).length === 2
        ? last
        : -1;
    [...run].forEach((char, index) => {
      tokens.push(
        char >= "0" && char <= "9"
          ? { kind: "digit", text: char, value: Number(char) }
          : { kind: index === decimalAt ? "decimal" : "group", text: char },
      );
    });
    cursor = match.index + run.length;
  }
  pushText(text.slice(cursor));
  return tokens;
}

/** The value a string stands for: its first number, negative after a minus sign. NaN without digits. */
export function tokensValue(tokens: readonly NumberToken[]): number {
  const first = tokens.findIndex((token) => token.kind === "digit");
  if (first < 0) return Number.NaN;
  let digits = "";
  for (const token of tokens.slice(first)) {
    if (token.kind === "digit") digits += token.value;
    else if (token.kind === "decimal") digits += ".";
    else if (token.kind === "text") break;
  }
  const negative = tokens
    .slice(0, first)
    .some(
      (token) =>
        token.kind === "text" &&
        (token.text.includes("-") || token.text.includes("\u2212")),
    );
  return Number(digits) * (negative ? -1 : 1);
}

/**
 * The cells of a number, each with the key of the place it holds. Digits are
 * keyed by their distance from the decimal point (units, tens, hundreds to the
 * left; tenths, hundredths to the right) and separators by the digits that
 * follow them, so "9,990" and "10,000" share every place but the new one. Text
 * is keyed by what it says and where it stands (before a number, after it), so
 * a "%" that stays is not a new "%" when a minus sign comes.
 */
export function numberCells(tokens: readonly NumberToken[]): NumberCell[] {
  const cells: NumberCell[] = [];
  const seen = new Map<string, number>();
  let run = -1;
  let gap = 0;
  let index = 0;
  while (index < tokens.length) {
    const token = tokens[index]!;
    if (token.kind === "text") {
      const base = `t${gap}:${token.text}`;
      const count = seen.get(base) ?? 0;
      seen.set(base, count + 1);
      cells.push({
        key: count === 0 ? base : `${base}#${count}`,
        kind: "static",
        text: token.text,
      });
      index += 1;
      continue;
    }

    let end = index;
    while (end < tokens.length && tokens[end]!.kind !== "text") end += 1;
    run += 1;
    gap += 1;
    const numeric = tokens.slice(index, end);
    const point = numeric.findIndex((entry) => entry.kind === "decimal");
    const integerEnd = point < 0 ? numeric.length : point;
    let toRight = numeric
      .slice(0, integerEnd)
      .filter((entry) => entry.kind === "digit").length;
    let fraction = 0;
    numeric.forEach((entry, position) => {
      if (position === point) {
        cells.push({ key: `r${run}.d`, kind: "static", text: entry.text });
      } else if (entry.kind === "digit") {
        const key =
          position < integerEnd
            ? `r${run}.i${(toRight -= 1)}`
            : `r${run}.f${fraction++}`;
        cells.push({
          key,
          kind: "digit",
          text: entry.text,
          value: entry.value,
        });
      } else {
        cells.push({
          key:
            position < integerEnd
              ? `r${run}.g${toRight}`
              : `r${run}.h${fraction}`,
          kind: "static",
          text: entry.text,
        });
      }
    });
    index = end;
  }
  return cells;
}

/** The direction a number moved in: 1 up, -1 down. Up when nothing is known or nothing moved. */
export function numberTrend(from: number, to: number): 1 | -1 {
  return to < from ? -1 : 1;
}

export const mod = (value: number, size: number) =>
  ((value % size) + size) % size;

/**
 * Where a wheel at `position` rolls to for `digit`: the nearest place beyond it
 * in the direction of the trend that shows the digit. The wheel is endless: 9 is
 * followed by 0, so a number that rises rolls every wheel upward, as an
 * odometer does. A wheel stopped between two digits (a change that arrives
 * while it still rolls) goes on from there.
 */
export function wheelTarget(
  position: number,
  digit: number,
  trend: 1 | -1,
): number {
  if (trend > 0) {
    const from = Math.ceil(position);
    return from + mod(digit - from, 10);
  }
  const from = Math.floor(position);
  return from - mod(from - digit, 10);
}

/** The places a wheel shows on its way: `count` rows from `base`; a row's digit is its place modulo 10. */
export function wheelRange(
  from: number,
  to: number,
): { base: number; count: number } {
  const base = Math.floor(Math.min(from, to));
  return { base, count: Math.ceil(Math.max(from, to)) - base + 1 };
}


// ~/src/siteplane/components/motion/motion-values.ts

"use client";

import { animate } from "motion/react";
import * as React from "react";

import { useReducedMotionPreference } from "../../system/motion/use-reduced-motion-preference";
import { measureTiming, useLeavingEntries } from "./motion-presence";

/**
 * Numbers that move toward new targets, for the geometry of a chart: the angles
 * of a ring, the points of a line. A component hands over what the data says now
 * and draws what it gets back; it writes no animation loop of its own. The
 * duration and the easing are the `--motion-duration-value` and
 * `--motion-ease-standard` tokens of the chart's own container, read when a run
 * starts (rulebook M1). Reduced motion (M5) shows every target at once, and the
 * first render shows its target, so the server and the client agree.
 */

/** The values at `progress` of the way from `from` to `to` (0 is `from`, 1 is `to`). */
export function mixValues(
  from: readonly number[],
  to: readonly number[],
  progress: number,
): number[] {
  return to.map((end, index) => {
    const start = from[index] ?? end;
    return start + (end - start) * progress;
  });
}

// Two numbers that say the same. NaN is the same as NaN here: a target that
// holds one is still the target the run heads for, and is not a new one on
// every render.
const sameNumber = (a: number, b: number) =>
  a === b || (Number.isNaN(a) && Number.isNaN(b));

/** Whether two lists hold the same numbers in the same order, NaN matching NaN. */
export function sameValues(
  a: readonly number[],
  b: readonly number[],
): boolean {
  return (
    a.length === b.length &&
    a.every((value, index) => sameNumber(value, b[index]!))
  );
}

function sameKeys(
  a: readonly string[] | undefined,
  b: readonly string[] | undefined,
): boolean {
  if (a === undefined || b === undefined) return a === b;
  return a.length === b.length && a.every((key, index) => key === b[index]);
}

/**
 * Where the values shown before start in a list of values that is not the same
 * list any more. With keys, a value follows its key: a key that is new starts
 * at 0, so a new share grows out of nothing, or at the number `starts` names for
 * its place in the new list. Without keys the lists must be as long as each
 * other; otherwise there is no way to tell which is which and `null` says the
 * new values are shown at once.
 */
export function alignValues(
  fromKeys: readonly string[] | undefined,
  from: readonly number[],
  toKeys: readonly string[] | undefined,
  count: number,
  starts?: readonly number[],
): number[] | null {
  if (fromKeys && toKeys) {
    const byKey = new Map(fromKeys.map((key, index) => [key, from[index]!]));
    return toKeys.map((key, index) => byKey.get(key) ?? starts?.[index] ?? 0);
  }
  return from.length === count ? [...from] : null;
}

/** One run of values toward a target. */
export type TweenRun = {
  /** Where the run starts, aligned with `to`. */
  from: readonly number[];
  keys: readonly string[] | undefined;
  /** Whether anything moves; false when the target is shown at once. */
  moving: boolean;
  to: readonly number[];
};

/** What a run shows at `progress`: its target at rest, the mix on its way. */
export function shownValues(
  run: TweenRun,
  progress: number,
): readonly number[] {
  return progress >= 1 || !run.moving
    ? run.to
    : mixValues(run.from, run.to, progress);
}

/**
 * The run for a new target, which starts from what is shown now so that a
 * target that changes on the way carries on from where the values are. `null`
 * when the target is the one the run already heads for.
 */
export function nextRun(
  run: TweenRun,
  progress: number,
  target: readonly number[],
  keys: readonly string[] | undefined,
  reduced: boolean,
  starts?: readonly number[],
): TweenRun | null {
  if (sameValues(target, run.to) && sameKeys(keys, run.keys)) return null;
  const from = reduced
    ? null
    : alignValues(
        run.keys,
        shownValues(run, progress),
        keys,
        target.length,
        starts,
      );
  return {
    from: from ?? target,
    keys,
    moving: from !== null && !sameValues(from, target),
    to: target,
  };
}

export type TweenOptions = {
  /** The element whose motion tokens set the timing: the chart. The document root by default. */
  container?: React.RefObject<Element | null>;
  /**
   * Names the values when their number changes, so each follows its own key:
   * one that is new grows from 0. Without keys a change in the number of values
   * shows the new values at once.
   */
  keys?: readonly string[];
  /**
   * Where each value starts whose key is new, in the order of the target. 0 for
   * each by default, so a new value grows from nothing; a value that should
   * appear where it is starts at its own target.
   */
  starts?: readonly number[];
};

/**
 * Moves the values toward their target when it changes, and returns what to
 * draw this frame. At rest it returns `target` itself (the same array), which
 * tells a component that nothing moves. A target equal in content to the last
 * one starts nothing, so a component may pass a fresh array on every render.
 */
export function useTweenedValues(
  target: readonly number[],
  { container, keys, starts }: TweenOptions = {},
): readonly number[] {
  const reduced = useReducedMotionPreference();
  const [run, setRun] = React.useState<TweenRun>(() => ({
    from: target,
    keys,
    moving: false,
    to: target,
  }));
  const [progress, setProgress] = React.useState(1);

  // A new target: start a run from what is shown now.
  const next = nextRun(run, progress, target, keys, reduced, starts);
  if (next) {
    setRun(next);
    setProgress(next.moving ? 0 : 1);
  }

  React.useLayoutEffect(() => {
    if (!run.moving) return;
    const controls = animate(0, 1, {
      ...measureTiming(
        container?.current ?? null,
        "--motion-duration-value",
        "--motion-ease-standard",
      ),
      onComplete: () => setProgress(1),
      onUpdate: setProgress,
    });
    return () => controls.stop();
  }, [container, run]);

  return !run.moving || progress >= 1
    ? target
    : mixValues(run.from, run.to, progress);
}

/** A single number that moves toward its target; see `useTweenedValues`. */
export function useTweenedValue(
  target: number,
  options?: Pick<TweenOptions, "container">,
): number {
  const targets = React.useMemo(() => [target], [target]);
  return useTweenedValues(targets, options)[0] ?? target;
}

/** One keyed row as it is drawn: its number so far, and whether it is on its way out. */
export type TweenedRow<T> = {
  key: string;
  leaving: boolean;
  row: T;
  value: number;
};

/** What a keyed row is without a number of its own: the entries as `useLeavingEntries` lists them. */
type RowEntry<T> = { element: { row: T }; leaving: boolean };

/**
 * The numbers a list of rows heads for and the numbers its new rows start from.
 * A row that is there heads for the number `read` gives, one that is leaving for
 * the number it has while it is absent (`absent`, 0 by default), and a row that
 * is new starts from that same number.
 */
export function rowNumbers<T>(
  entries: readonly RowEntry<T>[],
  read: (row: T) => number,
  absent?: (row: T) => number,
): { starts: number[]; targets: number[] } {
  const away = (entry: RowEntry<T>) => (absent ? absent(entry.element.row) : 0);
  return {
    starts: entries.map(away),
    targets: entries.map((entry) =>
      entry.leaving ? away(entry) : read(entry.element.row),
    ),
  };
}

/**
 * Moves the number of each keyed row toward the one `read` gives for the new
 * rows: a row that is new grows from 0, a row that is gone shrinks to 0 and
 * then leaves the list. `absent` gives another number for a row to start from
 * and to end at, for a number that is not a size: a row that should appear or
 * disappear where it stands has its own place for it, and one that stays glides
 * to its new place. The rows come back in order, a leaving row staying right
 * after the row it followed. Draw `value`; keep reading the data from the rows
 * you gave.
 */
export function useTweenedRows<T extends { id: string }>(
  rows: readonly T[],
  read: (row: T) => number,
  {
    absent,
    ...options
  }: Pick<TweenOptions, "container"> & {
    /** The number a row has while it is not there: where a new row starts and where a leaving row ends. 0 by default. */
    absent?: (row: T) => number;
  } = {},
): TweenedRow<T>[] {
  const reduced = useReducedMotionPreference();
  const present = rows.map((row) => ({ key: row.id, row }));
  const { entries, remove } = useLeavingEntries(present, !reduced);
  const keys = entries.map((entry) => String(entry.key));
  const { starts, targets } = rowNumbers(entries, read, absent);
  const values = useTweenedValues(targets, { ...options, keys, starts });

  // The rows that left have shrunk to nothing: they go.
  const settled = values === targets;
  React.useEffect(() => {
    if (!settled) return;
    for (const entry of entries) if (entry.leaving) remove(entry.key);
  });

  return entries.map((entry, index) => ({
    key: String(entry.key),
    leaving: entry.leaving,
    row: entry.element.row,
    value: values[index] ?? 0,
  }));
}


// ~/src/siteplane/components/motion/motion-scroll.ts

"use client";

import { animate } from "motion/react";

import { getMotionTransitionFromCss } from "../../system/motion/css-transition";

/** A scroll the motion component runs; `stop` ends it where it is. */
export type ScrollMotion = { stop: () => void };

/** Reduced motion scrolls at once (rulebook M5): the document mode, the provider preset and the system setting. */
function scrollsAtOnce(element: HTMLElement): boolean {
  return (
    document.documentElement.dataset.motionReduce === "true" ||
    Boolean(element.closest('[data-sp-motion="reduced"]')) ||
    window.matchMedia("(prefers-reduced-motion: reduce)").matches
  );
}

/**
 * Scrolls an element along the inline axis to `left`, its physical
 * scrollLeft, which runs toward negative values in a right-to-left element. It
 * takes the tokens of a list that scrolls to a target (rulebook M1), read when
 * the scroll starts, so a token set on any container around the element
 * applies. With `smooth` false, or under reduced motion, it jumps there at
 * once and returns null.
 */
export function scrollInlineTo(
  element: HTMLElement,
  left: number,
  smooth: boolean,
): ScrollMotion | null {
  if (!smooth || scrollsAtOnce(element)) {
    element.scrollLeft = left;
    return null;
  }
  return animate(element.scrollLeft, left, {
    ...getMotionTransitionFromCss(
      element,
      "--motion-duration-moderate",
      "--motion-ease-standard",
    ),
    onUpdate: (value) => {
      element.scrollLeft = value;
    },
  });
}


// ~/src/siteplane/components/motion/motion-follow-value.ts

"use client";

import {
  animate,
  motion,
  useMotionValue,
  type MotionValue,
} from "motion/react";
import * as React from "react";

import { useReducedMotionPreference } from "../../system/motion/use-reduced-motion-preference";
import { measureTiming } from "./motion-presence";

/**
 * Something that follows a target: the crosshair of a chart that glides to the
 * next item, the card of a tooltip that trails it, a pill under the axis. A
 * component hands over where the target is now and binds what it gets back to
 * an element; it writes no animation loop of its own. The glide is a spring
 * that never overshoots, timed by a `--motion-duration-*` token of the chart's
 * own container, read when a glide starts (rulebook M1). Reduced motion (M5)
 * puts every follower at its target at once, and the first render shows the
 * target, so the server and the client agree.
 */

/** The token the pointer's followers take: the crosshair, the dots and the pill of a chart. */
export const FOLLOW_DURATION = "--motion-duration-follow";
/** The token a card takes that trails them, so it visibly lags the item it belongs to. */
export const FOLLOW_TRAIL_DURATION = "--motion-duration-follow-trail";

/** A spring that Motion's `animate` takes: stiffness and damping instead of a duration, so a value that is sent to a new target on the way keeps its speed. */
export type FollowSpring = {
  damping: number;
  mass: 1;
  restDelta: number;
  restSpeed: number;
  stiffness: number;
  type: "spring";
};

/**
 * The spring that brings a value to its target in `seconds` without bouncing:
 * critically damped, with the frequency Motion's own `visualDuration` gives a
 * spring of that duration (`2π / 1.2 seconds`), so the value is at 97 % of the
 * way after `seconds` and sits on the target soon after. Motion's duration-based
 * springs forget the speed of a value that is retargeted on the way; these keep
 * it, and a pointer that sweeps across items moves the follower on without
 * stopping at each of them.
 */
export function followSpring(seconds: number): FollowSpring {
  const frequency = (2 * Math.PI) / (1.2 * seconds);
  return {
    damping: 2 * frequency,
    mass: 1,
    // A hundredth of a pixel and a tenth of a pixel a second: still for the eye.
    restDelta: 0.01,
    restSpeed: 0.1,
    stiffness: frequency * frequency,
    type: "spring",
  };
}

/** How a change of the target is shown. */
export type FollowMode = "glide" | "jump";

/**
 * A follower glides only while it is active and was active before: one that
 * comes in is put where its target is, instead of gliding from where it was
 * last seen. It also jumps when motion is reduced and when the token gives it
 * no time.
 */
export function followMode({
  active,
  reduced,
  seconds,
  wasActive,
}: {
  active: boolean;
  reduced: boolean;
  seconds: number;
  wasActive: boolean;
}): FollowMode {
  return active && wasActive && !reduced && seconds > 0 ? "glide" : "jump";
}

/**
 * Sends a follower to its target: puts the value there at once (`jump`), or
 * glides it there and returns what stops the glide. A glide that has nothing to
 * cover is not started.
 */
export function startFollow(
  value: MotionValue<number>,
  target: number,
  mode: FollowMode,
  seconds: number,
): (() => void) | undefined {
  if (mode === "jump") {
    value.jump(target);
    return undefined;
  }
  if (value.get() === target) return undefined;
  const controls = animate(value, target, followSpring(seconds));
  return () => controls.stop();
}

export type FollowValueOptions = {
  /** The element whose motion tokens set the timing: the chart. The document root by default. */
  container?: React.RefObject<Element | null> | undefined;
  /** The token that sets how long a glide takes: `FOLLOW_DURATION` by default. */
  duration?: `--motion-duration-${string}` | undefined;
  /**
   * Whether the follower is in use. One that is not sits at its target; when it
   * becomes active it is already in its place, and glides from there on. A part
   * that fades out waits where it was and stays inactive until it is needed.
   */
  active?: boolean | undefined;
};

/**
 * A number that glides to its target when the target changes, as a motion value
 * to bind to an element (`followed.line`, `followed.circle`, ...): the element
 * moves frame by frame and the component does not render again. At rest the
 * value is the target itself.
 */
export function useFollowValue(
  target: number,
  {
    active = true,
    container,
    duration = FOLLOW_DURATION,
  }: FollowValueOptions = {},
): MotionValue<number> {
  const reduced = useReducedMotionPreference();
  const value = useMotionValue(target);
  const wasActive = React.useRef(active);

  React.useLayoutEffect(() => {
    const seconds =
      (
        measureTiming(
          container?.current ?? null,
          duration,
          "--motion-ease-standard",
        ) as { duration?: number }
      ).duration ?? 0;
    const mode = followMode({
      active,
      reduced,
      seconds,
      wasActive: wasActive.current,
    });
    wasActive.current = active;
    return startFollow(value, target, mode, seconds);
  }, [active, container, duration, reduced, target, value]);

  return value;
}

/**
 * Keeps `target` at what `derive` makes of `source`, now and every time `source`
 * moves, and returns what ends it. `derive` is read again at each move, so one
 * that changes with the component is always the latest.
 */
export function bindDerived(
  source: MotionValue<number>,
  target: MotionValue<number>,
  derive: () => (value: number) => number,
): () => void {
  const follow = (value: number) => target.set(derive()(value));
  follow(source.get());
  return source.on("change", follow);
}

/**
 * A motion value that is a function of another and moves with it: a mark that
 * rides a curve while it glides along it, whose height is the curve's at the
 * place it has reached. It starts at what `derive` makes of the source.
 */
export function useFollowDerived(
  source: MotionValue<number>,
  derive: (value: number) => number,
): MotionValue<number> {
  const derived = useMotionValue(derive(source.get()));
  const latest = React.useRef(derive);
  latest.current = derive;
  React.useLayoutEffect(
    () => bindDerived(source, derived, () => latest.current),
    [derived, source],
  );
  // A `derive` that changes while the source stands still moves the value too.
  React.useLayoutEffect(() => {
    derived.set(derive(source.get()));
  });
  return derived;
}

/** Two numbers that glide to the place of a point; see `useFollowValue`. */
export function useFollowPoint(
  target: { x: number; y: number },
  options?: FollowValueOptions,
): { x: MotionValue<number>; y: MotionValue<number> } {
  return {
    x: useFollowValue(target.x, options),
    y: useFollowValue(target.y, options),
  };
}

/**
 * Renders the component again at every frame in which one of the values moves.
 * For a part that has to hand the numbers on as props, such as the anchor of a
 * floating element; anything that can bind the motion values to an element
 * should do that instead, and not render.
 */
export function useFollowFrames(values: readonly MotionValue<number>[]): void {
  const [, render] = React.useReducer((count: number) => count + 1, 0);
  React.useEffect(() => {
    const stops = values.map((value) => value.on("change", render));
    return () => {
      for (const stop of stops) stop();
    };
    // The motion values are the same ones for as long as the component lives.
  }, values);
}

/**
 * The elements that follow a motion value from `useFollowValue`: an attribute
 * or the style of one takes the value, and the element moves with it. A path
 * has no position attribute, so it moves through its style: `style={{ x, y }}`
 * translates it.
 */
export const followed = {
  circle: motion.circle,
  div: motion.div,
  line: motion.line,
  path: motion.path,
  rect: motion.rect,
} as const;


// ~/src/siteplane/components/motion/index.ts

export * from "./motion";
export {
  FOLLOW_DURATION,
  FOLLOW_TRAIL_DURATION,
  followMode,
  followSpring,
  followed,
  useFollowDerived,
  useFollowFrames,
  useFollowPoint,
  useFollowValue,
  type FollowMode,
  type FollowSpring,
  type FollowValueOptions,
} from "./motion-follow-value";
export { MotionNumber, type MotionNumberProps } from "./motion-number";
export {
  useTweenedRows,
  useTweenedValue,
  useTweenedValues,
  type TweenedRow,
  type TweenOptions,
} from "./motion-values";


// ~/src/siteplane/system/motion/css-transition.ts

function parseCubicBezier(
  value: string,
): [number, number, number, number] | undefined {
  const match = value.match(
    /^cubic-bezier\(([-\d.]+),\s*([-\d.]+),\s*([-\d.]+),\s*([-\d.]+)\)$/,
  );
  return match
    ? [Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4])]
    : undefined;
}
export function getMotionTransitionFromCss(
  element: Element,
  durationVariable: `--motion-${string}`,
  easingVariable: `--motion-${string}`,
) {
  const styles = getComputedStyle(element);
  const duration = styles.getPropertyValue(durationVariable).trim();
  const easing = styles.getPropertyValue(easingVariable).trim();
  return {
    duration:
      (Number.parseFloat(duration) || 0) / (duration.endsWith("ms") ? 1000 : 1),
    ease:
      easing === "linear"
        ? ("linear" as const)
        : (parseCubicBezier(easing) ?? [0.16, 1, 0.3, 1]),
  };
}