motion-ui-skill 2.0.0

package/components/motion/command-palette.tsx

@@ -0,0 +1,381 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Search, type LucideIcon } from "lucide-react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { EASE_OUT } from "@/lib/ease";
+import { useOnOpen } from "@/lib/hooks/use-on-open";
+import { useRowCursor } from "@/lib/hooks/use-row-cursor";
+import { useTouchCapable } from "@/lib/hooks/use-touch-capable";
+import { PresenceGate } from "@/lib/presence-gate";
+import { cn } from "@/lib/utils";
+
+export type CommandItem = {
+  id: string;
+  label: string;
+  group?: string;
+  hint?: string;
+  keywords?: string[];
+  icon?: LucideIcon;
+  badge?: ReactNode;
+  onSelect: () => void;
+};
+
+export interface CommandPaletteProps {
+  items: CommandItem[];
+  /** Opens with Cmd/Ctrl + this key. Default: "k" */
+  shortcut?: string;
+  placeholder?: string;
+  emptyMessage?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+function fuzzyMatch(needle: string, hay: string) {
+  if (!needle) return true;
+  needle = needle.toLowerCase();
+  hay = hay.toLowerCase();
+  let i = 0;
+  for (const ch of hay) {
+    if (ch === needle[i]) i++;
+    if (i === needle.length) return true;
+  }
+  return false;
+}
+
+// Opened via a keyboard shortcut many times a day — entrance must read as
+// instant. Tight spring, even faster exit.
+const PANEL_SPRING = {
+  type: "spring",
+  stiffness: 560,
+  damping: 40,
+  mass: 0.5,
+} as const;
+
+export function CommandPalette({
+  items,
+  shortcut = "k",
+  placeholder = "Type a command or search…",
+  emptyMessage = "No results found.",
+  open: controlledOpen,
+  onOpenChange,
+}: CommandPaletteProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (v: boolean) => {
+      if (!controlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [controlled, onOpenChange],
+  );
+
+  const [query, setQuery] = useState("");
+  // Portal target only exists client-side; render nothing during SSR/hydration.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const uid = useId();
+  const reduce = useReducedMotion();
+  const canTouch = useTouchCapable();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (
+        (e.metaKey || e.ctrlKey) &&
+        e.key.toLowerCase() === shortcut.toLowerCase()
+      ) {
+        e.preventDefault();
+        setOpen(!open);
+        return;
+      }
+      if (e.key === "Escape" && open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, shortcut, setOpen]);
+
+  useEffect(() => {
+    if (!open) return;
+    const root = document.documentElement;
+    const previousRootOverflow = root.style.overflow;
+    const previousBodyOverflow = document.body.style.overflow;
+    root.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    return () => {
+      root.style.overflow = previousRootOverflow;
+      document.body.style.overflow = previousBodyOverflow;
+    };
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!query) return items;
+    return items.filter((it) => {
+      const haystacks = [it.label, it.group ?? "", ...(it.keywords ?? [])];
+      return haystacks.some((h) => fuzzyMatch(query, h));
+    });
+  }, [items, query]);
+
+  // Reserve the icon column only when at least one item brings an icon, so
+  // icon-less lists don't render a dead gap before every label.
+  const hasIcons = useMemo(() => items.some((it) => it.icon), [items]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, CommandItem[]>();
+    filtered.forEach((it) => {
+      const g = it.group ?? "Results";
+      const groupItems = map.get(g) ?? [];
+      groupItems.push(it);
+      map.set(g, groupItems);
+    });
+    return Array.from(map.entries());
+  }, [filtered]);
+
+  // Grouping reorders the list, so the rendered order is not the filtered
+  // order whenever two groups interleave. Everything that has to agree on
+  // "which row" — the highlight, the ids, Enter, the scroll — reads this one
+  // array, so they cannot drift apart.
+  const rows = useMemo(() => grouped.flatMap(([, list]) => list), [grouped]);
+
+  const { activeIndex: active, moveTo, moveActive } = useRowCursor(rows, query);
+
+  // Clearing the query would drop the cursor on its own, but only if it had
+  // changed; `moveTo(null)` covers reopening on an already-empty query.
+  useOnOpen(open, () => {
+    setQuery("");
+    moveTo(null);
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveActive(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveActive(-1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const it = rows[active];
+      if (it) {
+        it.onSelect();
+        setOpen(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const el = listRef.current?.querySelector<HTMLButtonElement>(
+      `[data-index="${active}"]`,
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, open]);
+
+  if (!mounted) return null;
+
+  // Portaled to <body> so ancestors with transforms, filters, or fixed
+  // positioning can't trap the overlay in their stacking context, and mounted
+  // only while open. The chrome is two fixed siblings rather than one wrapper:
+  // the backdrop spans the viewport edges but carries the scrim colour, and the
+  // layer positioning the panel is inset off every edge. Both hang off
+  // `PresenceGate`, so interaction releases in the same commit that starts the
+  // exit rather than when it ends — `open` is already false for those frames.
+  // See tests/fixed-overlay-edge-sampling.test.tsx.
+  return createPortal(
+    <AnimatePresence initial={false}>
+      {open ? (
+        <PresenceGate key="backdrop">
+          {({ gate }) => (
+            <motion.button
+              type="button"
+              aria-label="Close command palette"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: { duration: 0.12, ease: EASE_OUT },
+              }}
+              transition={{ duration: 0.18, ease: EASE_OUT }}
+              {...gate}
+              onClick={() => setOpen(false)}
+              className="pointer-events-auto fixed inset-0 z-[100] bg-background/5 [backdrop-filter:blur(12px)_saturate(140%)] [-webkit-backdrop-filter:blur(12px)_saturate(140%)]"
+            />
+          )}
+        </PresenceGate>
+      ) : null}
+
+      {open ? (
+        <PresenceGate key="panel-layer">
+          {({ isPresent, gate }) => (
+            // The layer itself never takes pointer events, so it carries
+            // `inert` alone rather than the gate's pointer-events value.
+            <div
+              inert={!isPresent}
+              className="pointer-events-none fixed inset-x-4 bottom-4 top-[18vh] z-[100] flex items-start justify-center"
+            >
+              <motion.div
+                role="dialog"
+                aria-modal="true"
+                aria-label="Command palette"
+                initial={{
+                  opacity: 0,
+                  y: reduce ? 0 : -8,
+                  scale: reduce ? 1 : 0.97,
+                }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{
+                  opacity: 0,
+                  y: reduce ? 0 : -8,
+                  scale: reduce ? 1 : 0.97,
+                  transition: { duration: 0.12, ease: EASE_OUT },
+                }}
+                transition={reduce ? { duration: 0.1 } : PANEL_SPRING}
+                {...gate}
+                onKeyDown={onKeyDown}
+                className="pointer-events-auto w-full max-w-xl overflow-hidden rounded-2xl border border-border bg-card shadow-2xl will-change-transform"
+              >
+                <div className="flex items-center gap-3 border-b border-border px-4">
+                  <Search className="h-4 w-4 text-muted-foreground" />
+                  <input
+                    ref={inputRef}
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder={placeholder}
+                    role="combobox"
+                    // The field only exists while the palette is open.
+                    aria-expanded="true"
+                    aria-controls={`${uid}-list`}
+                    aria-activedescendant={
+                      rows.length > 0 ? `${uid}-opt-${active}` : undefined
+                    }
+                    aria-autocomplete="list"
+                    className={cn(
+                      "h-12 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                      // The palette focuses this field the moment it opens, and iOS
+                      // zooms the page in on a focused field under 16px: the fixed
+                      // overlay is magnified off-center — clipped leading edge, half
+                      // an icon column — and the zoom outlives the palette. 16px on
+                      // touch keeps the page at scale 1; pointer devices keep 14px.
+                      canTouch && "text-base",
+                    )}
+                  />
+                  <kbd className="hidden rounded border border-border bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground sm:inline-block">
+                    ESC
+                  </kbd>
+                </div>
+                <div
+                  ref={listRef}
+                  id={`${uid}-list`}
+                  role="listbox"
+                  aria-label="Commands"
+                  className="max-h-[60vh] overflow-y-auto overscroll-contain p-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                >
+                  {rows.length === 0 ? (
+                    <div className="p-8 text-center text-sm text-muted-foreground">
+                      {emptyMessage}
+                    </div>
+                  ) : (
+                    grouped.map(([group, list]) => (
+                      <div key={group} className="mb-1 last:mb-0">
+                        <div
+                          aria-hidden
+                          className="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
+                        >
+                          {group}
+                        </div>
+                        {list.map((it) => {
+                          // `rows` holds these very objects, in render order.
+                          const idx = rows.indexOf(it);
+                          const isActive = idx === active;
+                          const Icon = it.icon;
+                          return (
+                            <button
+                              key={it.id}
+                              type="button"
+                              id={`${uid}-opt-${idx}`}
+                              role="option"
+                              aria-selected={isActive}
+                              data-index={idx}
+                              onMouseEnter={() => moveTo(it.id)}
+                              onClick={() => {
+                                it.onSelect();
+                                setOpen(false);
+                              }}
+                              className={cn(
+                                "relative isolate flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm transition-colors",
+                                isActive
+                                  ? "text-foreground"
+                                  : "text-muted-foreground",
+                              )}
+                            >
+                              {isActive ? (
+                                <motion.span
+                                  layoutId={`${uid}-active`}
+                                  className="absolute inset-0 z-0 rounded-md bg-primary/[0.05]"
+                                  transition={
+                                    reduce
+                                      ? { duration: 0 }
+                                      : // Tracks rapid arrow-key navigation — keep it tighter
+                                        // than SPRING_LAYOUT so it never lags the active row.
+                                        {
+                                          type: "spring",
+                                          stiffness: 480,
+                                          damping: 38,
+                                        }
+                                  }
+                                />
+                              ) : null}
+                              {Icon ? (
+                                <Icon className="relative z-10 h-4 w-4" />
+                              ) : hasIcons ? (
+                                <span className="relative z-10 h-4 w-4" />
+                              ) : null}
+                              <span className="relative z-10 flex-1 truncate">
+                                {it.label}
+                              </span>
+                              {it.badge ? (
+                                <span className="relative z-10 shrink-0">
+                                  {it.badge}
+                                </span>
+                              ) : null}
+                              {it.hint ? (
+                                <kbd className="relative z-10 rounded border border-border bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                                  {it.hint}
+                                </kbd>
+                              ) : null}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ))
+                  )}
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </PresenceGate>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}

package/components/motion/confetti.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import React, { useEffect, useState } from "react";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ConfettiParticle {
+  id: number;
+  x: number;
+  y: number;
+  rotate: number;
+  color: string;
+  size: number;
+  duration: number;
+}
+
+export interface ConfettiProps {
+  trigger?: boolean;
+  particleCount?: number;
+  colors?: string[];
+  duration?: number;
+  onComplete?: () => void;
+  className?: string;
+}
+
+const DEFAULT_COLORS = [
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ec4899",
+  "#8b5cf6",
+  "#06b6d4",
+];
+
+export function Confetti({
+  trigger = false,
+  particleCount = 40,
+  colors = DEFAULT_COLORS,
+  duration = 2.5,
+  onComplete,
+  className,
+}: ConfettiProps) {
+  const [particles, setParticles] = useState<ConfettiParticle[]>([]);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  useEffect(() => {
+    if (!trigger) {
+      setParticles([]);
+      return;
+    }
+
+    if (shouldReduceMotion) {
+      setParticles([]);
+      onComplete?.();
+      return;
+    }
+
+    triggerHaptic("success");
+
+    const newParticles: ConfettiParticle[] = Array.from({ length: particleCount }).map((_, i) => {
+      const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5);
+      const velocity = 80 + Math.random() * 180;
+      return {
+        id: i,
+        x: Math.cos(angle) * velocity,
+        y: Math.sin(angle) * velocity - 60, // Slight upward arc
+        rotate: (Math.random() - 0.5) * 720,
+        color: colors[i % colors.length],
+        size: 6 + Math.random() * 6,
+        duration: duration * (0.7 + Math.random() * 0.6),
+      };
+    });
+
+    setParticles(newParticles);
+
+    const timer = setTimeout(() => {
+      setParticles([]);
+      onComplete?.();
+    }, duration * 1000);
+
+    return () => clearTimeout(timer);
+  }, [trigger, particleCount, colors, duration, shouldReduceMotion, onComplete, triggerHaptic]);
+
+  if (shouldReduceMotion || particles.length === 0) return null;
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none fixed inset-0 z-50 flex items-center justify-center overflow-hidden",
+        className
+      )}
+    >
+      <AnimatePresence>
+        {particles.map((p) => (
+          <motion.span
+            key={p.id}
+            initial={{ x: 0, y: 0, scale: 0, rotate: 0, opacity: 1 }}
+            animate={{
+              x: p.x,
+              y: p.y + 150, // Gravity pull downwards
+              scale: [0, 1.2, 0.8],
+              rotate: p.rotate,
+              opacity: [1, 1, 0],
+            }}
+            transition={{
+              duration: p.duration,
+              ease: [0.25, 1, 0.5, 1],
+            }}
+            style={{
+              backgroundColor: p.color,
+              width: p.size,
+              height: p.size * (Math.random() > 0.5 ? 1 : 1.6),
+              borderRadius: Math.random() > 0.4 ? "2px" : "9999px",
+            }}
+            className="absolute"
+          />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}