Dynamic Island

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

export interface DynamicIslandView {
  /** Short name of the activity, e.g. "Now playing". Used in announcements and the expand button. */
  label: string;
  /** Content of the compact pill. Keep it non-interactive: the whole pill is the expand button. */
  compact: React.ReactNode;
  /** Content of the expanded card. May contain controls. */
  expanded: React.ReactNode;
  /** Optional polite announcement when this activity starts (defaults to the label). */
  announcement?: string;
}

type Spring = { stiffness: number; damping: number; mass: number };

export interface DynamicIslandProps<K extends string = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
  /** Every activity the island can show, keyed by name. */
  views: Record<K, DynamicIslandView>;
  /** The current activity, or null for the idle pill. */
  activity: K | null;
  /** Expanded state (controlled). */
  expanded?: boolean;
  /** Initial expanded state (uncontrolled). Resets to collapsed when the activity changes. */
  defaultExpanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
  /** Spring used to morph the size and shape. */
  spring?: Spring;
  /** Width of the idle pill in px. */
  idleWidth?: number;
  /** Width of the expanded card in px. */
  expandedWidth?: number;
  /** Blur content as it cross-fades between states. */
  blur?: boolean;
  /** Accent for the focus ring, also exposed to views as the CSS variable --di-accent. */
  accent?: string;
}

const IDLE_HEIGHT = 36;

/**
 * A black pill that morphs between idle, compact and expanded states on a spring, measuring each
 * state's content so it always lands on the right size. Content cross-fades between states and
 * every change is announced through a polite live region.
 */
export function DynamicIsland<K extends string = string>({
  views,
  activity,
  expanded,
  defaultExpanded = false,
  onExpandedChange,
  spring = { stiffness: 400, damping: 30, mass: 0.9 },
  idleWidth = 120,
  expandedWidth = 340,
  blur = true,
  accent = "#FF7448",
  className = "",
  style,
  ...props
}: DynamicIslandProps<K>) {
  const uid = React.useId();
  const reduceMotion = useReducedMotion();
  const rootRef = React.useRef<HTMLDivElement>(null);
  const expandButtonRef = React.useRef<HTMLButtonElement>(null);
  const panelRef = React.useRef<HTMLDivElement>(null);
  /** Move focus after the next state change (only for user-initiated changes). */
  const focusIntentRef = React.useRef<"panel" | "button" | null>(null);

  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
  // A new activity always starts collapsed (uncontrolled mode).
  const [prevActivity, setPrevActivity] = React.useState(activity);
  if (prevActivity !== activity) {
    setPrevActivity(activity);
    setInternalExpanded(false);
  }
  const isExpanded = expanded ?? internalExpanded;
  const view = activity === null ? null : views[activity];
  const mode: "idle" | "compact" | "expanded" = !view ? "idle" : isExpanded ? "expanded" : "compact";
  const contentKey = view ? `${activity}-${mode}` : "idle";

  // Size of the content currently on screen, measured with a ResizeObserver.
  const [size, setSize] = React.useState({ width: idleWidth, height: IDLE_HEIGHT });

  const setExpanded = (next: boolean, focus: "panel" | "button" | null) => {
    if (next === isExpanded) return;
    focusIntentRef.current = focus;
    if (expanded === undefined) setInternalExpanded(next);
    onExpandedChange?.(next);
  };

  React.useEffect(() => {
    const intent = focusIntentRef.current;
    focusIntentRef.current = null;
    if (intent === "panel") panelRef.current?.focus({ preventScroll: true });
    if (intent === "button") expandButtonRef.current?.focus({ preventScroll: true });
  }, [mode]);

  const outsidePointer = React.useEffectEvent((event: PointerEvent) => {
    if (!rootRef.current?.contains(event.target as Node)) setExpanded(false, null);
  });

  // Pressing outside the expanded island collapses it.
  React.useEffect(() => {
    if (mode !== "expanded") return;
    const onDown = (event: PointerEvent) => outsidePointer(event);
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [mode]);

  const measure = (node: HTMLDivElement | null) => {
    if (!node) return;
    const observer = new ResizeObserver(() => {
      const width = node.offsetWidth;
      const height = node.offsetHeight;
      setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
    });
    observer.observe(node);
    return () => observer.disconnect();
  };

  const morph = reduceMotion ? { duration: 0 } : { type: "spring" as const, ...spring };
  const fade = reduceMotion ? { duration: 0 } : { duration: 0.22, ease: [0.16, 1, 0.3, 1] as const };
  const hidden = reduceMotion
    ? { opacity: 0 }
    : { opacity: 0, scale: 0.92, filter: blur ? "blur(6px)" : "blur(0px)" };
  const shown = reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, filter: "blur(0px)" };

  const radius = mode === "expanded" ? Math.min(32, size.height / 2) : size.height / 2;
  const announcement = view ? (mode === "expanded" ? `${view.label}, expanded` : (view.announcement ?? view.label)) : "";

  return (
    <div
      ref={rootRef}
      className={`relative inline-flex justify-center ${className}`}
      style={{ ["--di-accent" as string]: accent, ...style }}
      onKeyDown={(event) => {
        if (event.key === "Escape" && mode === "expanded") {
          event.preventDefault();
          setExpanded(false, "button");
        }
      }}
      {...props}
    >
      <motion.div
        initial={false}
        animate={{ width: size.width, height: size.height, borderRadius: radius }}
        transition={morph}
        aria-hidden={mode === "idle" || undefined}
        className="relative grid place-items-center overflow-hidden bg-black text-white shadow-[0_12px_32px_-14px_rgba(0,0,0,0.55)] dark:ring-1 dark:ring-white/[0.08]"
      >
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.div
            key={contentKey}
            initial={hidden}
            animate={shown}
            exit={hidden}
            transition={fade}
            className="col-start-1 row-start-1"
          >
            <div ref={measure}>
              {mode === "idle" && <div style={{ width: idleWidth, height: IDLE_HEIGHT }} />}
              {mode === "compact" && view && (
                <div
                  id={`${uid}-compact`}
                  aria-hidden="true"
                  className="flex h-9 items-center justify-between gap-4 px-3.5 text-[13px] font-medium tracking-tight"
                  style={{ minWidth: idleWidth }}
                >
                  {view.compact}
                </div>
              )}
              {mode === "expanded" && view && (
                <div
                  ref={panelRef}
                  role="group"
                  aria-label={view.label}
                  tabIndex={-1}
                  className="relative p-4 outline-none"
                  // Never wider than a small viewport.
                  style={{ width: expandedWidth, maxWidth: "calc(100vw - 32px)" }}
                >
                  <button
                    type="button"
                    onClick={() => setExpanded(false, "button")}
                    className="sr-only rounded-full px-2 py-0.5 text-[11px] focus-visible:not-sr-only focus-visible:absolute focus-visible:right-3 focus-visible:top-3 focus-visible:z-10 focus-visible:bg-white/15 focus-visible:outline-2 focus-visible:outline-[var(--di-accent)]"
                  >
                    Collapse
                  </button>
                  {view.expanded}
                </div>
              )}
            </div>
          </motion.div>
        </AnimatePresence>

        {mode === "compact" && view && (
          // The whole compact pill is the expand control; its content describes it.
          <button
            ref={expandButtonRef}
            type="button"
            aria-expanded={false}
            aria-label={`${view.label}: expand`}
            aria-describedby={`${uid}-compact`}
            onClick={() => setExpanded(true, "panel")}
            className="absolute inset-0 rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--di-accent)]"
          />
        )}
      </motion.div>

      <span role="status" aria-live="polite" className="sr-only">
        {announcement}
      </span>
    </div>
  );
}