Share & Permissions Popover

1"use client";
2 
3import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
4import { MotionConfig, motion, useReducedMotion } from "motion/react";
5 
6// Share & permissions popover - three views in one floating element.
7//
8// A popover is a FLOATING element with three different-sized panels inside
9// (share list · a person's role picker · link settings), and swapping panels
10// has to feel like one surface changing shape, not three popovers taking turns.
11//
12//   · Animated auto-size on BOTH axes. Each view declares its natural width and
13//     grows its own height; views are absolutely positioned so they keep their
14//     intrinsic size, and the frame's width AND height are measured px
15//     (useLayoutEffect + ResizeObserver) that motion eases between - the
16//     height:auto illusion, on two axes. A fresh open snaps to size instead of
17//     morphing from the last session's.
18//   · A focus trap that survives view swaps. Tab cycles the LIVE view's
19//     controls only; every swap hands focus somewhere sensible (push → the
20//     current role; pop → the row that opened it; close → the trigger). Pass
21//     trap={false} to feel Tab walk out.
22//   · Breadcrumb back-navigation. Escape backs out one layer at a time.
23//
24// The popover scales in FROM THE TRIGGER (origin under the Share button), stays
25// mounted so open/close are interruptible, and slides views directionally:
26// push enters from the right, pop from the left, with a short-lived leaving
27// snapshot. Animation via motion/react; honours prefers-reduced-motion.
28// Requires the lab-theme tokens. Fully Tailwind, no CSS files.
29 
30const EASE = [0.22, 1, 0.36, 1] as const;
31const EASE_ICON = [0.2, 0, 0, 1] as const;
32const SLIDE = 28; // 1.75rem directional slide distance
33 
34export interface Person {
35  id: string;
36  name: string;
37  email: string;
38}
39 
40export interface SharePopoverState {
41  open: boolean;
42  view: string;
43  people: number;
44  link: string;
45  size: { w: number; h: number } | null;
46  lastAction: string | null;
47}
48 
49type View = { name: "share" } | { name: "role"; person: Person } | { name: "link" };
50 
51const ROLES = [
52  { id: "full", label: "Full access", hint: "Edit, share and manage" },
53  { id: "edit", label: "Can edit", hint: "Edit but not share" },
54  { id: "comment", label: "Can comment", hint: "Read and comment" },
55  { id: "view", label: "Can view", hint: "Read only" },
56];
57 
58const LINK_SCOPES = [
59// … truncated