{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "imessage", "homepage": "https://imessage.swerdlow.dev", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "platform", "title": "Platform context", "description": "Tells every iMessage component whether to render iOS 26 or macOS 26 metrics.", "files": [ { "path": "registry/imessage/platform.tsx", "content": "\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\n/** Which native Messages app to replicate. Sizes, spacing, and chrome all key off this. */\nexport type Platform = \"ios\" | \"macos\";\n\nconst PlatformContext = createContext(\"ios\");\n\nexport function PlatformProvider({ platform, children }: { platform: Platform; children: ReactNode }) {\n return {children};\n}\n\nexport function usePlatform(): Platform {\n return useContext(PlatformContext);\n}\n", "type": "registry:ui", "target": "components/imessage/platform.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tokens", "title": "Design tokens", "description": "Measured colors, screen-space bubble gradients, type scale, and spacing for iOS and macOS.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/platform.json" ], "files": [ { "path": "registry/imessage/tokens.ts", "content": "import type { Platform } from \"@/components/imessage/platform\";\n\n/**\n * Measured design tokens (see references/SPEC.md). Points equal CSS px.\n * Colors that vary with vertical screen position are expressed as top/bottom pairs of a\n * screen-space linear gradient; `screenHeight` is the reference height they were measured on.\n */\nexport type Service = \"imessage\" | \"sms\";\nexport type Direction = \"incoming\" | \"outgoing\";\n\nexport type BubbleMetrics = {\n fontSize: number;\n lineHeight: number;\n paddingX: number;\n paddingY: number;\n radius: number;\n minWidth: number;\n /** Widest bubble in px (iOS uses a fixed width at 402pt screens). */\n maxWidth: number;\n /** Fraction of the message pane width a bubble may occupy (macOS). */\n maxWidthRatio: number;\n /** Scale applied to the traced iOS tail (1 on iOS, 0.7 on macOS). */\n tailScale: number;\n /** Gap between consecutive bubbles of the same group, and between groups. */\n gapInGroup: number;\n gapBetweenGroups: number;\n /** Inset from the pane edge on the bubble's own side. */\n edgeInset: number;\n /** Whether every bubble gets a tail. Both platforms only tail the last bubble of a cluster. */\n tailOnEveryBubble: boolean;\n /** Status label (\"Delivered\") typography and offsets. Always semibold. */\n statusFontSize: number;\n statusLineHeight: number;\n statusLetterSpacing: number;\n statusGap: number;\n statusInset: number;\n /** Large glyph size, line box, and edge inset for emoji-only messages. */\n emojiOnlySize: number;\n emojiOnlyLineHeight: number;\n emojiOnlyInset: number;\n /** Tracking applied to bubble text so the web's SF matches native widths. */\n letterSpacing: number;\n};\n\nexport const bubbleMetrics: Record = {\n ios: {\n fontSize: 17,\n lineHeight: 20,\n paddingX: 13.85,\n paddingY: 10,\n radius: 19,\n minWidth: 48,\n maxWidth: 280.5,\n /** Unverified: 0.17 under `maxWidth`. `message-list` uses the ratio on iOS too, so a bubble is\n * 280.33 wide in a list and 280.5 standalone. The widest body in `conv3-light.png` measures 280.67. */\n maxWidthRatio: 280.33 / 402,\n tailScale: 1,\n gapInGroup: 4.3333,\n // 10.33 cannot reproduce the 50.000 pt step native puts between the third \"V\" and the long\n // bubble: solving all seven row origins at once pins this to 10.168-10.25.\n gapBetweenGroups: 10.2,\n edgeInset: 16,\n tailOnEveryBubble: false,\n statusFontSize: 11,\n statusLineHeight: 13,\n statusLetterSpacing: -0.25,\n statusGap: 4.65,\n statusInset: 20.3,\n /** Unverified: no iOS capture holds an emoji-only message. Scaled from the measured macOS 72/87.3. */\n emojiOnlySize: 58,\n emojiOnlyLineHeight: 70,\n emojiOnlyInset: 4,\n letterSpacing: 0,\n },\n macos: {\n fontSize: 13,\n lineHeight: 14.7,\n paddingX: 12.5,\n paddingY: 7.03,\n // 14.5, not 14. An arc anchored to the four-line bubble's own measured straight edges (left\n // 227.477, top 493.976 in conversation-pane-light.png) fits 25 sub-pixel rows of the top\n // corners at 0.119 rmse; r = 14 fits at 0.194 with all 25 residuals on the same side. The same\n // routine run against our own 14.5 render returns 14.42, so native's 14.39 reads as 14.46 once\n // that bias is removed. What is left at 14.5 is a symmetric S of +-0.15, twice our own render's,\n // which is the shape difference of a slightly continuous corner, not a radius error.\n radius: 14.5,\n minWidth: 40,\n maxWidth: 382.5,\n maxWidthRatio: 0.6068,\n tailScale: 0.7,\n // Native lands every row's top on the device grid (0.5 at 2x), so a single gap reads anywhere\n // from 2.75 to 3.25. The run of six one-line bubbles in conversation-pane-dark.png settles it:\n // tops 379.5 / 411.5 / 443.0 / 475.0 / 506.5 / 538.5, a mean pitch of 31.7997 over five gaps\n // against a body height of 28.7545, so the gap is 3.045 +- 0.1. Do not re-derive it from one\n // pair of bubbles in a pane capture; those read 3.24 or 2.75 depending on the phase.\n gapInGroup: 3,\n gapBetweenGroups: 11.5,\n edgeInset: 20,\n tailOnEveryBubble: false,\n statusFontSize: 9,\n statusLineHeight: 11,\n statusLetterSpacing: 0,\n statusGap: 4,\n statusInset: 15.9,\n emojiOnlySize: 72,\n emojiOnlyLineHeight: 87.3,\n emojiOnlyInset: 4,\n letterSpacing: -0.4,\n },\n};\n\nexport type ScreenGradient = { top: string; bottom: string; screenHeight: number };\n\nexport type Palette = {\n background: string;\n /** Outgoing iMessage blue, screen-space gradient. */\n imessage: ScreenGradient;\n /** Outgoing SMS green, screen-space gradient. */\n sms: ScreenGradient;\n /** Incoming gray, screen-space gradient (nearly flat). */\n incoming: ScreenGradient;\n incomingText: string;\n outgoingText: string;\n secondaryLabel: string;\n edited: string;\n /** Tapback balloon fills. */\n tapbackMine: string;\n tapbackTheirs: string;\n separator: string;\n};\n\n/**\n * iOS 26 measured: SMS green from the simulator. The blue and gray gradients are taken from macOS 26,\n * which shares Messages' palette; they are marked as such in SPEC.md until an iOS capture confirms them.\n *\n * Not measured, and not in SPEC.md either: `macos.*.sms` (no macOS capture holds a green bubble; the\n * only green in any of them is the plus-menu app icons), `macos.light.edited`, and both `ios.*.separator`\n * values. Treat them as placeholders, not as measurements.\n */\nexport const palettes: Record = {\n ios: {\n light: {\n background: \"#ffffff\",\n imessage: { top: \"#77c7f5\", bottom: \"#3682f7\", screenHeight: 874 },\n sms: { top: \"#53e678\", bottom: \"#31c355\", screenHeight: 874 },\n incoming: { top: \"#e9e9eb\", bottom: \"#e9e9eb\", screenHeight: 874 },\n incomingText: \"#000000\",\n outgoingText: \"#ffffff\",\n secondaryLabel: \"#8a8a8e\",\n edited: \"#3f8ff7\",\n tapbackMine: \"#0088ff\",\n tapbackTheirs: \"#e9e9eb\",\n separator: \"#c6c6c8\",\n },\n dark: {\n background: \"#000000\",\n imessage: { top: \"#589af7\", bottom: \"#3d8ef7\", screenHeight: 874 },\n sms: { top: \"#53e678\", bottom: \"#31c355\", screenHeight: 874 },\n incoming: { top: \"#262629\", bottom: \"#262629\", screenHeight: 874 },\n incomingText: \"#ffffff\",\n outgoingText: \"#ffffff\",\n secondaryLabel: \"#8d8d93\",\n edited: \"#3f8ff7\",\n tapbackMine: \"#0088ff\",\n tapbackTheirs: \"#262629\",\n separator: \"#38383a\",\n },\n },\n macos: {\n light: {\n background: \"#ffffff\",\n imessage: { top: \"#77c7f5\", bottom: \"#3682f7\", screenHeight: 640 },\n sms: { top: \"#5fe083\", bottom: \"#35c65b\", screenHeight: 640 },\n incoming: { top: \"#e9e9eb\", bottom: \"#e9e9eb\", screenHeight: 640 },\n incomingText: \"#000000\",\n outgoingText: \"#ffffff\",\n secondaryLabel: \"#808080\",\n edited: \"#1f7cf5\",\n tapbackMine: \"#5498f8\",\n tapbackTheirs: \"#e9e9eb\",\n separator: \"#e1e1e1\",\n },\n dark: {\n background: \"#1e1e1e\",\n imessage: { top: \"#589af7\", bottom: \"#3d8ef7\", screenHeight: 640 },\n sms: { top: \"#4fd772\", bottom: \"#33bf56\", screenHeight: 640 },\n incoming: { top: \"#38383a\", bottom: \"#3c3c3e\", screenHeight: 640 },\n incomingText: \"#ffffff\",\n outgoingText: \"#ffffff\",\n secondaryLabel: \"#9a9a9a\",\n edited: \"#3f8ff7\",\n tapbackMine: \"#5498f8\",\n tapbackTheirs: \"#3b3b3d\",\n separator: \"#3a3a3a\",\n },\n },\n};\n\n/** CSS custom properties that carry a palette, so components stay theme-aware through `.dark`. */\nexport function paletteVars(p: Palette): Record {\n return {\n \"--im-bg\": p.background,\n \"--im-blue-top\": p.imessage.top,\n \"--im-blue-bottom\": p.imessage.bottom,\n \"--im-green-top\": p.sms.top,\n \"--im-green-bottom\": p.sms.bottom,\n \"--im-gray-top\": p.incoming.top,\n \"--im-gray-bottom\": p.incoming.bottom,\n \"--im-incoming-text\": p.incomingText,\n \"--im-outgoing-text\": p.outgoingText,\n \"--im-secondary\": p.secondaryLabel,\n \"--im-edited\": p.edited,\n \"--im-tapback-mine\": p.tapbackMine,\n \"--im-tapback-theirs\": p.tapbackTheirs,\n \"--im-separator\": p.separator,\n \"--im-screen-h\": `${p.imessage.screenHeight}px`,\n };\n}\n\n/** System font stacks. `-apple-system` resolves to SF Pro on Apple platforms, which is what native renders. */\nexport const fontStack = '-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\nexport const emojiFontStack = '\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif';\n", "type": "registry:ui", "target": "components/imessage/tokens.ts" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bubble-shape", "title": "Bubble shape", "description": "The traced native bubble outline and tail as SVG path and clip-path generators.", "files": [ { "path": "registry/imessage/bubble-shape.ts", "content": "/**\n * Native iMessage bubble geometry, traced from iOS 26 Messages (see references/SPEC.md and\n * references/ios/bubble-tail-beziers.json). All values are points (CSS px).\n *\n * The bubble body is a rounded rectangle with circular corners. On the sender's side the bottom\n * corner is replaced by the tail: the edge sweeps inward over the last ~19pt of height into a\n * neck, bulges back out, and ends in a point that hangs ~6.8pt below the body. The tail region is\n * a fixed 22×28pt box anchored at the body's bottom corner, so it never scales with the bubble.\n */\nexport type TailSide = \"left\" | \"right\" | \"none\";\n\n/** Cubic Béziers relative to the body's bottom-right corner (x grows right, y grows down). */\nconst TAIL_SEGMENTS: Array<[number, number, number, number, number, number]> = [\n // S-curve from the straight right edge down to the neck\n [-0.442, -13.682, -3.003, -8.238, -7.457, -4.87],\n [-9.101, -3.553, -10.598, -1.75, -10.513, 0.463],\n // bulge from the neck down to the tip\n [-10.766, 2.71, -8.409, 4.088, -8.319, 6.13],\n // rounded tip\n [-8.33, 6.55, -8.6, 6.75, -9.0, 6.698],\n // underside from the tip back to the body's bottom edge\n [-14.001, 6.333, -17.413, 1.539, -22.0, 0],\n];\nconst TAIL_START_Y = -19.203; // where the straight edge ends, relative to the body bottom\nconst TAIL_EDGE_START = -21.2; // clip box top: a little above so the arc/straight edge is untouched\n\nexport const tailBox = { width: 22, height: 21.2, hang: 6.8 } as const;\n\nfunction fmt(n: number) {\n return Number(n.toFixed(3)).toString();\n}\n\n/**\n * SVG path for the fixed tail region. The path is in a `tailBox.width × (tailBox.height + tailBox.hang)`\n * coordinate system whose top-left is (bodyRight − 22, bodyBottom − 21.2). For a left tail it is mirrored.\n */\nexport function tailPath(side: Exclude, scale = 1): string {\n const w = tailBox.width * scale;\n const h = tailBox.height * scale;\n const mx = (x: number) => (side === \"right\" ? w + x * scale : -x * scale);\n const my = (y: number) => h + y * scale;\n const parts = [`M${fmt(mx(-22))},${fmt(my(TAIL_EDGE_START))}`, `L${fmt(mx(0))},${fmt(my(TAIL_EDGE_START))}`, `L${fmt(mx(0))},${fmt(my(TAIL_START_Y))}`];\n for (const [x1, y1, x2, y2, x, y] of TAIL_SEGMENTS) {\n parts.push(`C${fmt(mx(x1))},${fmt(my(y1))} ${fmt(mx(x2))},${fmt(my(y2))} ${fmt(mx(x))},${fmt(my(y))}`);\n }\n parts.push(\"Z\");\n return parts.join(\" \");\n}\n\n/**\n * How far the body's clip has to reach into the tail box so the two do not leave a hairline where\n * they meet. Both platforms need it, and the reason is Chrome, not the geometry: a `clip-path`\n * reference box is snapped to whole CSS px before it rasterises, and the body's box and the tail's\n * box snap independently. Their shared edge then lands on two different device rows and the\n * background shows through the row between them - a white line running out of the tail across the\n * bubble, which is exactly what it looks like.\n *\n * 0.75 was measured, not guessed: `scripts/measure/hairline.ts` over `/lab?scene=ios-conv3` at\n * twelve sub-pixel offsets of the message column still finds the seam at 0.25 and never finds it\n * from 0.5 up, so 0.75 keeps a quarter point of margin. The ceiling is the tail's own straight top\n * segment, `(tailBox.height - 19.203) * scale` = 1.997 on iOS and 1.398 on macOS; past that the\n * body would paint outside the tail's outline.\n */\nexport const tailSeamOverlap: Record<\"ios\" | \"macos\", number> = { ios: 0.75, macos: 0.75 };\n\n/**\n * clip-path polygon that removes the tail box from a plain rounded-rectangle body so the tail SVG\n * can draw that region exactly. Use with `border-radius` for the three untouched corners.\n *\n * `overlap` shrinks the removed box along its two interior edges, so the body keeps painting that\n * far *into* the tail box and covers the seam described on `tailSeamOverlap`. Both edges are\n * interior to the tail's own outline, so the body can only become visible there if it reaches past\n * the tail's straight top segment.\n */\nexport function bodyClipPath(side: Exclude, scale = 1, overlap = 0): string {\n const w = tailBox.width * scale - overlap;\n const h = tailBox.height * scale - overlap;\n return side === \"right\"\n ? `polygon(0 0, 100% 0, 100% calc(100% - ${fmt(h)}px), calc(100% - ${fmt(w)}px) calc(100% - ${fmt(h)}px), calc(100% - ${fmt(w)}px) 100%, 0 100%)`\n : `polygon(0 0, 100% 0, 100% 100%, ${fmt(w)}px 100%, ${fmt(w)}px calc(100% - ${fmt(h)}px), 0 calc(100% - ${fmt(h)}px))`;\n}\n\n/** Full bubble outline as an SVG path (for masks, effects, and tests). */\nexport function bubblePath(width: number, height: number, side: TailSide, radius = 19, scale = 1): string {\n const r = Math.min(radius, height / 2, width / 2);\n if (side === \"none\") {\n return `M${fmt(r)},0 H${fmt(width - r)} A${fmt(r)},${fmt(r)} 0 0 1 ${fmt(width)},${fmt(r)} V${fmt(height - r)} A${fmt(r)},${fmt(r)} 0 0 1 ${fmt(width - r)},${fmt(height)} H${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 1 0,${fmt(height - r)} V${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 1 ${fmt(r)},0 Z`;\n }\n const mx = (x: number) => (side === \"right\" ? width + x * scale : -x * scale);\n const my = (y: number) => height + y * scale;\n const tail: string[] = [`L${fmt(mx(0))},${fmt(my(TAIL_START_Y))}`];\n for (const [x1, y1, x2, y2, x, y] of TAIL_SEGMENTS) tail.push(`C${fmt(mx(x1))},${fmt(my(y1))} ${fmt(mx(x2))},${fmt(my(y2))} ${fmt(mx(x))},${fmt(my(y))}`);\n if (side === \"right\") {\n return `M${fmt(r)},0 H${fmt(width - r)} A${fmt(r)},${fmt(r)} 0 0 1 ${fmt(width)},${fmt(r)} ${tail.join(\" \")} H${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 1 0,${fmt(height - r)} V${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 1 ${fmt(r)},0 Z`;\n }\n // left tail: walk the outline counter-clockwise so the mirrored tail segments read in order\n return `M${fmt(width - r)},0 H${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 0 0,${fmt(r)} ${tail.join(\" \")} H${fmt(width - r)} A${fmt(r)},${fmt(r)} 0 0 0 ${fmt(width)},${fmt(height - r)} V${fmt(r)} A${fmt(r)},${fmt(r)} 0 0 0 ${fmt(width - r)},0 Z`;\n}\n", "type": "registry:ui", "target": "components/imessage/bubble-shape.ts" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "use-screen-space", "title": "Screen-space fill hook", "description": "Keeps bubble fills aligned to the screen-space gradient while a list scrolls.", "files": [ { "path": "registry/imessage/use-screen-space.ts", "content": "\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\n\n/**\n * Native bubbles are filled with one gradient fixed to the screen, so a bubble's color depends on\n * where it currently sits. This keeps every `[data-slot=\"message-bubble\"]` and every\n * `[data-slot=\"typing-indicator\"]` inside `container` in sync\n * by writing `--bubble-bottom` (the body's bottom edge relative to the screen frame) on scroll and\n * resize. It touches the DOM directly, so scrolling never re-renders React.\n *\n * `frame` is the element that represents the device screen (defaults to the container).\n */\nexport function useBubbleScreenSpace(container: RefObject, frame?: RefObject) {\n useEffect(() => {\n const root = container.current;\n if (!root) return;\n let raf = 0;\n const update = () => {\n raf = 0;\n const screen = (frame?.current ?? root).getBoundingClientRect();\n // The typing indicator is an incoming bubble too, so it needs the same screen-space fill.\n root.querySelectorAll('[data-slot=\"message-bubble\"], [data-slot=\"typing-indicator\"]').forEach(bubble => {\n // The typing indicator is its own body; a message bubble keeps its body in a child.\n const body = bubble.querySelector('[data-slot=\"bubble\"], [data-slot=\"emoji\"]') ?? (bubble.dataset.slot === \"typing-indicator\" ? bubble : null);\n if (!body) return;\n const bottom = body.getBoundingClientRect().bottom - screen.top;\n bubble.style.setProperty(\"--bubble-bottom\", `${bottom.toFixed(2)}px`);\n });\n };\n const schedule = () => { if (!raf) raf = requestAnimationFrame(update); };\n update();\n root.addEventListener(\"scroll\", schedule, { passive: true });\n const observer = new ResizeObserver(schedule);\n observer.observe(root);\n const mutations = new MutationObserver(schedule);\n mutations.observe(root, { childList: true, subtree: true, characterData: true });\n return () => { cancelAnimationFrame(raf); root.removeEventListener(\"scroll\", schedule); observer.disconnect(); mutations.disconnect(); };\n }, [container, frame]);\n}\n", "type": "registry:ui", "target": "components/imessage/use-screen-space.ts" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "message-bubble", "title": "Message bubble", "description": "Native iOS 26 and macOS 26 bubbles: traced outline and tail, screen-space gradient fill, status, edited, reactions, and emoji-only messages.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/bubble-shape.json", "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/message-bubble.tsx", "content": "\"use client\";\n\nimport { useLayoutEffect, useRef, type ComponentProps, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { bodyClipPath, tailBox, tailPath, tailSeamOverlap } from \"@/components/imessage/bubble-shape\";\nimport { bubbleMetrics, emojiFontStack, fontStack, type Direction, type Service } from \"@/components/imessage/tokens\";\n\nexport type MessageBubbleProps = Omit, \"children\"> & {\n direction?: Direction;\n service?: Service;\n /** Draw the tail. Both platforms only tail the last bubble of a cluster; the list decides. */\n tail?: boolean;\n /** Group-chat sender name shown above an incoming bubble. */\n sender?: string;\n /** \"Delivered\", \"Read 9:41 AM\", \"Sent as Text Message\"… */\n status?: ReactNode;\n edited?: boolean;\n /** Tapback balloons; positioned on the bubble's top corner away from the screen edge. */\n reactions?: ReactNode;\n /** Render a big glyph with no bubble (auto-detected for 1–3 emoji when omitted). */\n emojiOnly?: boolean;\n /**\n * Clicked once, so the balloon carries its selection overlay. macOS only; the message list drives\n * this from `selectedIds` and the macOS pane owns the click. See `selectionOverlayClass`.\n */\n selected?: boolean;\n /**\n * Screen-space y of the bubble body's bottom edge, in px, for the native position-dependent fill.\n * The message list keeps this updated while scrolling; leave it unset for a mid-screen color.\n */\n screenBottom?: number;\n /** Widest the bubble may grow. Defaults to the native rule: 280.5px on iOS, 60.7% of the pane on macOS. */\n maxWidth?: number | string;\n platform?: Platform;\n children?: ReactNode;\n};\n\nconst EMOJI_ONLY = /^(?:\\p{Extended_Pictographic}(?:️|‍\\p{Extended_Pictographic}|[\\u{1F3FB}-\\u{1F3FF}])*\\s?){1,3}$/u;\n\nexport function isEmojiOnly(text: ReactNode): boolean {\n return typeof text === \"string\" && EMOJI_ONLY.test(text.trim());\n}\n\n/**\n * Where a reaction balloon hangs off a message's own box, per platform. It lives here because every\n * message kind needs it, not only a text bubble: a photo, a link card, an audio row and a bare emoji\n * all take reactions too, and each draws its own container.\n */\nexport const reactionOffsets: Record = {\n ios: { marginTop: 28, top: -27.25, side: -14.1 },\n macos: { marginTop: 19.6, top: -19.1, side: -9.9 },\n};\n\nfunction fillVars(direction: Direction, service: Service): CSSProperties {\n const key = direction === \"incoming\" ? \"gray\" : service === \"sms\" ? \"green\" : \"blue\";\n return { \"--im-fill-top\": `var(--im-${key}-top)`, \"--im-fill-bottom\": `var(--im-${key}-bottom)`, \"--im-sel\": `var(--im-sel-${key})` } as CSSProperties;\n}\n\n/**\n * The overlay a selected balloon carries, read out of macOS Messages itself rather than a screenshot:\n * `-[CKTextBalloonView setSelected:withSelectionState:]` turns on a highlight overlay layer whose\n * colour is `-[CKBalloonView highlightOverlayColor]`, which for a coloured balloon is\n * `-[CKUIThemeMac balloonOverlayColorForColorType:]`. Blue and gray are opaque there, so a selected\n * bubble drops its screen-space gradient for a flat fill; green is a wash left over it. Both themes\n * share the green. Values from ChatKit 26.5 (macOS 26.5).\n */\nexport const selectionOverlayClass =\n \"[--im-sel-blue:#1b60d8] [--im-sel-gray:#c6c6c7] [--im-sel-green:#0a0a7833] \" +\n \"dark:[--im-sel-blue:#0b50c8] dark:[--im-sel-gray:#55555c]\";\n\n/**\n * Native bubbles hug their longest wrapped line instead of stretching to the maximum width, and\n * center text that is narrower than the minimum bubble width. CSS shrink-to-fit cannot express either,\n * so measure the laid-out line boxes and set the frame width explicitly.\n */\nfunction useNativeTextFit(enabled: boolean, paddingX: number, minWidth: number, deps: unknown[]) {\n // The ref is created here rather than passed in, so the DOM writes below are on a value this hook\n // owns.\n const frame = useRef(null);\n useLayoutEffect(() => {\n const frameEl = frame.current;\n const textEl = frameEl?.querySelector('[data-slot=\"text\"]');\n if (!enabled || !frameEl || !textEl) return;\n const container = frameEl.parentElement;\n let raf = 0;\n const measure = () => {\n frameEl.style.width = \"\";\n const range = document.createRange();\n range.selectNodeContents(textEl);\n const lines: Array<{ top: number; left: number; right: number }> = [];\n for (const rect of Array.from(range.getClientRects())) {\n if (rect.width === 0 && rect.height === 0) continue;\n const line = lines.find(l => Math.abs(l.top - rect.top) < 1);\n if (line) { line.left = Math.min(line.left, rect.left); line.right = Math.max(line.right, rect.right); }\n else lines.push({ top: rect.top, left: rect.left, right: rect.right });\n }\n if (!lines.length) return;\n const longest = Math.max(...lines.map(l => l.right - l.left));\n const bubble = textEl.parentElement as HTMLElement;\n bubble.style.textAlign = lines.length === 1 && longest < minWidth - 2 * paddingX ? \"center\" : \"\";\n const hug = Math.ceil((longest + 2 * paddingX) * 100) / 100 + 0.05;\n if (lines.length > 1 && hug < frameEl.getBoundingClientRect().width - 0.1) frameEl.style.width = `${hug}px`;\n };\n measure();\n const observer = new ResizeObserver(() => { cancelAnimationFrame(raf); raf = requestAnimationFrame(measure); });\n if (container) observer.observe(container);\n document.fonts?.ready.then(() => measure()).catch(() => {});\n return () => { observer.disconnect(); cancelAnimationFrame(raf); };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled, paddingX, minWidth, ...deps]);\n return frame;\n}\n\nexport function MessageBubble({\n direction = \"incoming\", service = \"imessage\", tail = false, sender, status, edited = false, reactions, emojiOnly, selected = false,\n screenBottom, maxWidth, platform: platformProp, className, style, children, ...props\n}: MessageBubbleProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = bubbleMetrics[platform];\n const outgoing = direction === \"outgoing\";\n const side = outgoing ? \"right\" : \"left\";\n const big = emojiOnly ?? isEmojiOnly(children);\n const tailW = tailBox.width * m.tailScale;\n const tailH = tailBox.height * m.tailScale;\n const hang = tailBox.hang * m.tailScale;\n // macOS's tail box is 15.4 × 14.84, so its left edge lands on a fraction (594.609 in the 630pt\n // pane) and Chrome paints the tail's clip up to half a point off the body's clip edge, leaving a\n // white hairline down the bubble (one 75%-white device pixel at 2x, measured at x 594.5 on the\n // four-line bubble). Overlapping the body into the box closes it. iOS's box is 22 × 21.2 on whole\n // pixels and shows no seam, so it keeps a flush join. See bodyClipPath.\n const tailOverlap = tailSeamOverlap[platform];\n const frame = useNativeTextFit(!big, m.paddingX, m.minWidth, [children, platform, maxWidth]);\n\n // The fill is one gradient in screen coordinates. Anchor it to the bubble's bottom so the body and\n // the tail (which hangs `hang` px lower) share the same image without knowing the body height.\n // `--bubble-bottom` may also be set on the element directly (see use-screen-space.ts) so scrolling\n // never needs a React render.\n const bottomVar = screenBottom === undefined ? \"var(--bubble-bottom, calc(var(--im-screen-h) * 0.55))\" : `${screenBottom}px`;\n // The selection overlay is one more background layer over the fill, so the body's clip and the\n // tail's clip carry it for free and no extra element is needed.\n const fill: CSSProperties = {\n backgroundImage: `${selected ? \"linear-gradient(var(--im-sel), var(--im-sel)),\" : \"\"}linear-gradient(var(--im-fill-top), var(--im-fill-bottom))`,\n backgroundSize: selected ? \"100% 100%, 100% var(--im-screen-h)\" : \"100% var(--im-screen-h)\",\n backgroundRepeat: \"no-repeat\",\n backgroundColor: \"var(--im-fill-bottom)\",\n };\n // background-position-y = 100% + K puts the image's bottom K below the element's bottom.\n const at = (position: string) => (selected ? `0 0, ${position}` : position);\n const bodyFill: CSSProperties = { ...fill, backgroundPosition: at(`0 calc(100% + (var(--im-screen-h) - ${bottomVar}))`) };\n const tailFill: CSSProperties = { ...fill, backgroundPosition: at(`0 calc(100% + (var(--im-screen-h) - ${bottomVar} - ${hang}px))`) };\n const vars = { ...(screenBottom === undefined ? {} : { \"--bubble-bottom\": `${screenBottom}px` }), ...fillVars(direction, service) } as CSSProperties;\n const reactionOffset = reactionOffsets[platform];\n\n return (\n
\n {sender && {sender}}\n
\n {big ? (\n
\n {outgoing ? \"You: \" : `${sender ?? \"Contact\"}: `}{children}\n
\n ) : (\n
\n {/* The fill lives behind the text so clipping the tail corner never clips glyphs.\n Chrome rounds a painted background box to whole CSS px, so the widest macOS bubble,\n whose layout box is 227.71875 to 610, paints 228.00 to 610.00: 0.29 narrower and\n 0.24 to the right of native's 227.477 to 609.763. No token can move that. A layout\n left edge of 227.5 rounds to the same 228, and `will-change` does not opt out;\n only a fractional `transform` escapes the rounding, and the send and receive\n animations already own this element's transform, so it stays as it is. */}\n {/* The tail-less case still carries a clip-path, and that is not cosmetic: Chrome snaps a\n plain rounded-rect background to whole CSS pixels, so a body laid out at 100.333 paints\n at 100.0, while native's bodies sit on thirds. A clip-path opts the fill out of that\n snapping and it paints where the layout put it. Verified at 3x: 100.333 painted at\n 100.0 without one and at exactly device row 301 with one. */}\n
\n {tail &&
}\n {outgoing ? \"You: \" : `${sender ?? \"Contact\"}: `}\n {children}\n
\n )}\n {reactions &&
{reactions}
}\n
\n {edited && Edited}\n {status &&
{status}
}\n
\n );\n}\n", "type": "registry:ui", "target": "components/imessage/message-bubble.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tapback", "title": "Tapback", "description": "The native reaction balloon: six classic Tapbacks and custom emoji, own and others' colors, counts, and the selected state.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/tapback.tsx", "content": "\"use client\";\n\nimport { useId, useLayoutEffect, useRef, type ComponentProps, type CSSProperties, type ReactNode, type RefObject } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { emojiFontStack, fontStack } from \"@/components/imessage/tokens\";\n\n/**\n * Tapback balloon, measured from iOS 26 (`references/ios/captures/tapback-love-light.png`, 3x):\n * a Ø34 circle with two trailing circles (Ø10.4 at (−10.82, +15.20) and Ø5 at (−17.49, +23.46) from\n * the balloon's center) pointing away from the bubble. Own reactions are #0088ff (light and dark), the\n * heart is an 18.34×16.33 glossy pink shape centered 0.8 below the circle's center. Others' balloons are\n * #e9e9eb light / #262629 dark (`incoming-light.png`, `incoming-dark.png`). macOS (circle-fitted on\n * `references/macos/captures/tapback-love-light-2x.png` and `tapback-love-dark-2x.png`, both 2x, rmse\n * 0.01–0.03 pt): Ø27.98 centred (136.72, 57.45) pt, trail Ø8.04 at (−9.04, +12.42) and Ø4.00 at\n * (−14.22, +19.05), heart ink 14.64 × 12.96 centred 0.53 below the circle's centre. Both captures give\n * the same numbers to 0.01 pt.\n *\n * The macOS fill is one theme-independent blue, #5498f8, laid over the pane with a vertical opacity\n * ramp: solving the light/dark pair row by row gives a constant colour (85, 152, 248) and an alpha of\n * 0.912 at the top edge rising to 1.00 at ≈83% down (light row y=89 reads (100,161,249), dark\n * (80,141,229); by row y=139 both read (84,152,248)). The trailing circles are fully opaque.\n * The artwork is also knocked out of whatever it covers by a 0.5 pt rim in the pane colour: invisible\n * over the empty pane, it shows as a ring where the balloon laps the bubble (dark 2x, radial cut at\n * −50°: (84,151,247) → (55,88,133) → (84,152,248); light: (85,152,248) → (182,218,251) → (108,186,245)).\n */\nexport const tapbackLabels = { love: \"Love\", like: \"Like\", dislike: \"Dislike\", laugh: \"Laugh\", emphasize: \"Emphasize\", question: \"Question\" } as const;\nexport type TapbackType = keyof typeof tapbackLabels;\nexport const tapbackTypes = Object.keys(tapbackLabels) as TapbackType[];\n\n/** Local color tokens (not in tokens.ts). Measured own-reaction blue; the rest are system values. */\nexport const tapbackColors = {\n own: \"#0088ff\",\n ownDark: \"#0088ff\",\n /** Highlight ring behind the chosen tapback inside the bar (Ø44.2; measured on both selected captures). */\n selectedRing: \"#26aeff\",\n selectedRingDark: \"#0064d2\",\n} as const;\n\n/**\n * The macOS own-reaction blue and the opacity ramp the main circle carries over it. Solved row by row\n * from the light/dark pair of `tapback-love-*-2x.png` at the balloon's own rows y 89–139 (2x): one\n * colour in both themes, alpha 0.907 at the top edge, 0.951 a quarter down, 0.982 at the centre and\n * opaque from ≈83% down. Reproducing it as alpha (not as two baked colours) keeps both themes right.\n */\nexport const macosBalloonFill = \"#5498f8\";\nconst macosBalloonSurface = \"linear-gradient(to bottom, rgba(84,152,248,0.907) 0%, rgba(84,152,248,0.951) 25%, rgba(84,152,248,0.982) 50%, rgba(84,152,248,1) 100%)\";\n/** The macOS balloon is knocked out of what it covers by this much pane colour (measured 0.51 pt). */\nexport const macosBalloonRim = 0.5;\n\n/**\n * CSS variables the tapback UI reads (with fallbacks to the light iOS values). Spread on a frame\n * next to `paletteVars`. Glass fills were solved from the captures: the pill over the dimmed white\n * list is #ededef and over the dimmed green bubble ≈#b4efc6 (brighter than the dimmed content, hence\n * the brightness term); over the dimmed black list it is #1f1e21. The dim itself is rgba(22,18,44,0.21).\n */\nexport function tapbackVars(theme: \"light\" | \"dark\", platform: Platform = \"ios\"): Record {\n const ios: Record = theme === \"light\" ? {\n \"--im-dim\": \"rgba(22,18,44,0.21)\", \"--im-glass\": \"rgba(229,229,231,0.69)\", \"--im-glass-filter\": \"blur(9px) brightness(1.32) saturate(1.35)\", \"--im-glass-solid\": \"#ededef\", \"--im-glass-rim\": \"rgba(255,255,255,0.55)\",\n \"--im-glass-shadow\": \"0 6px 24px rgba(0,0,0,0.10)\", \"--im-picker-icon\": \"#aeaeb2\", \"--im-menu-glass\": \"rgba(229,229,231,0.69)\", \"--im-menu-glass-filter\": \"blur(9px) brightness(1.32) saturate(1.35)\", \"--im-menu-bg\": \"#edeff1\", \"--im-menu-text\": \"#000000\",\n \"--im-menu-separator\": \"rgba(0,0,0,0.12)\", \"--im-menu-destructive\": \"#ff3b30\", \"--im-tapback-own\": tapbackColors.own, \"--im-tapback-ring\": tapbackColors.selectedRing,\n } : {\n \"--im-dim\": \"rgba(22,18,44,0.21)\", \"--im-glass\": \"rgba(38,37,39,0.8)\", \"--im-glass-filter\": \"blur(9px) saturate(1.6)\", \"--im-glass-solid\": \"#1f1e21\", \"--im-glass-rim\": \"rgba(255,255,255,0.10)\",\n \"--im-glass-shadow\": \"0 6px 24px rgba(0,0,0,0.5)\", \"--im-picker-icon\": \"#8e8e93\", \"--im-menu-glass\": \"rgba(20,25,25,0.8)\", \"--im-menu-glass-filter\": \"blur(9px) saturate(2)\", \"--im-menu-bg\": \"#121316\", \"--im-menu-text\": \"#ffffff\",\n \"--im-menu-separator\": \"rgba(255,255,255,0.15)\", \"--im-menu-destructive\": \"#ff453a\", \"--im-tapback-own\": tapbackColors.ownDark, \"--im-tapback-theirs\": \"#262629\", \"--im-tapback-ring\": tapbackColors.selectedRingDark,\n };\n if (platform === \"ios\") return ios;\n const macos = { \"--im-tapback-own\": macosBalloonFill, \"--im-tapback-own-surface\": macosBalloonSurface };\n return theme === \"light\"\n ? { ...ios, ...macos, \"--im-menu-bg\": \"rgba(247,248,251,0.92)\", \"--im-menu-text\": \"#242526\", \"--im-menu-separator\": \"#dfe0e2\", \"--im-menu-border\": \"#b1b1b1\", \"--im-menu-rim\": \"rgba(255,255,255,0.7)\" }\n : { ...ios, ...macos, \"--im-menu-bg\": \"rgba(30,34,39,0.92)\", \"--im-menu-text\": \"#dcddde\", \"--im-menu-separator\": \"#3e4145\", \"--im-menu-border\": \"#050506\", \"--im-menu-rim\": \"rgba(255,255,255,0.28)\", \"--im-tapback-theirs\": \"#3b3b3d\" };\n}\n\nexport type BalloonGeometry = { main: number; medium: number; small: number; mediumOffset: [number, number]; smallOffset: [number, number]; glyph: number; /** The glyph sits this far below the circle's centre. */ glyphOffsetY?: number };\n\n/**\n * Balloon geometry per platform. Offsets are the trailing circles' centers relative to the main\n * center, pointing left. iOS from `incoming-light.png` (Ø34.0, trail Ø10.4 at (−10.82, +15.20) and\n * Ø5.0 at (−17.49, +23.46), heart ink 18.34).\n *\n * macOS is circle-fitted on both `tapback-love-light-2x.png` and `tapback-love-dark-2x.png`, which\n * agree to 0.01 pt: main centre (273.44, 114.90) px Ø55.97 px, medium (255.37, 139.73) Ø16.07, small\n * (245.00, 153.00) Ø7.99. It is close to the iOS artwork at 28/34 but not exactly: that scaling would\n * put the trail at Ø8.57 and Ø4.12, 6% and 3% larger. The heart ink (rows y 103–129, columns x 259–288)\n * measures 14.64 × 12.96 with its centre 0.53 below the circle's, of which 0.07 comes from the glyph\n * box itself, so the box is nudged 0.46.\n */\nexport const balloonGeometry: Record = {\n ios: { main: 34, medium: 10.4, small: 5, mediumOffset: [-10.82, 15.2], smallOffset: [-17.49, 23.46], glyph: 18.34, glyphOffsetY: 0.8 },\n macos: { main: 28, medium: 8.04, small: 4, mediumOffset: [-9.04, 12.42], smallOffset: [-14.22, 19.05], glyph: 14.64, glyphOffsetY: 0.46 },\n};\n\n/**\n * Where a balloon sits relative to the bubble body it belongs to, measured on the settled captures.\n * `marginTop` is the extra space the list opens above the bubble, `top`/`side` place the main circle\n * against the body's top corner on the side away from the screen edge. Consumed by `message-bubble`.\n *\n * iOS: `conv3-light.png` → `tapback-love-light.png` is the same fixture with and without the balloon,\n * and the cluster gap grows from 10.313 to 38.313, i.e. exactly 28. `top`/`side` average the outgoing\n * capture (−27.47 / −14.02) and the mirrored incoming one (`incoming-light.png`, −27.31 / +13.68).\n * macOS (`tapback-love-dark-2x.png`, cross-checked light): body bottom 34.93 → next body top 65.51 is\n * a 30.58 gap where the cluster gap below it is 3.18, so the slot opens 27.40; the Ø28 circle's top\n * (86.92 px) sits 22.05 above the body top (131.01 px) and its leading edge (245.46 px) 11.79 outside\n * the body's leading edge (269.03 px).\n *\n * `message-bubble` carries its own copy of these numbers and is the one that actually places a\n * balloon; its macOS row still reads { 19.6, −19.1, −9.9 } and is 7.8 / 3.0 / 1.9 pt off.\n */\nexport const balloonSlot: Record = {\n ios: { marginTop: 28, top: -27.39, side: -13.85 },\n macos: { marginTop: 27.4, top: -22.05, side: -11.79 },\n};\n\n/** The emoji-picker \"thought bubble\" beside a long-pressed message is the same shape at ~1.3x. */\nexport const pickerBalloonGeometry: BalloonGeometry = { main: 44, medium: 14.6, small: 8, mediumOffset: [-13.2, 20.3], smallOffset: [-22.2, 30.7], glyph: 24 };\n\n/** Renders the trailing circles of a balloon; the parent is the main circle (position: relative). */\nexport function BalloonTrail({ geometry, side, color }: { geometry: BalloonGeometry; side: \"left\" | \"right\"; color: string }) {\n const half = geometry.main / 2;\n const place = (d: number, [dx, dy]: [number, number]): CSSProperties => ({\n position: \"absolute\", width: d, height: d, borderRadius: \"50%\", background: color, top: half + dy - d / 2,\n [side === \"left\" ? \"left\" : \"right\"]: half + dx - d / 2,\n });\n return (\n <>\n \n \n \n );\n}\n\nconst glossyText = (gradient: string): CSSProperties => ({ backgroundImage: gradient, WebkitBackgroundClip: \"text\", backgroundClip: \"text\", color: \"transparent\", WebkitTextFillColor: \"transparent\" });\n\n/**\n * Heart ramps, sampled at matching heights on every capture. On a gray or white balloon Apple's heart\n * runs #ffc1d8 → #ff4796; on the blue own-reaction balloon (and on the blue selected disc in the bar)\n * the same artwork reads a constant 21/255 lighter in green and 20/255 in blue, so it keeps its\n * contrast. Positions are the radial offsets fitted to the Ø49.8 balloon in the details popover.\n */\nconst heartRamp = {\n plain: [[\"0\", \"#ffd9ea\"], [\"0.12\", \"#ffc1d8\"], [\"0.38\", \"#ff99ca\"], [\"0.51\", \"#ff81bd\"], [\"0.79\", \"#ff6cb0\"], [\"1\", \"#ff4796\"]],\n onAccent: [[\"0\", \"#ffeefe\"], [\"0.12\", \"#ffd6ec\"], [\"0.38\", \"#ffaede\"], [\"0.51\", \"#ff96d1\"], [\"0.79\", \"#ff81c4\"], [\"1\", \"#ff5caa\"]],\n} as const;\n\n/**\n * The six classic tapback glyphs and custom emoji, drawn to match Apple's artwork.\n * `size` is the glyph box: 25.33 in the iOS tapback bar, 18.34 in a Ø34 balloon.\n * `onAccent` picks the lighter artwork Apple uses on the blue balloon and the blue selected disc.\n */\nexport function TapbackGlyph({ type, emoji, size, onAccent = false, className, style }: { type?: TapbackType; emoji?: string; size: number; onAccent?: boolean; className?: string; style?: CSSProperties }) {\n const id = useId().replace(/:/g, \"\");\n const base: CSSProperties = { display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", lineHeight: 1, userSelect: \"none\", ...style };\n if (emoji || !type) {\n return {emoji};\n }\n if (type === \"love\") {\n // Outline traced from `tapback-love-light.png` at 3x: ink 18.34 × 16.33 (ratio 0.8906), the two\n // lobes are r 4.75 circles centred (4.75, 4.91) and (13.25, 4.91) meeting in a notch at (9, 2.79),\n // and each flank is one cubic to the tip (rmse 0.03 against 15 sampled rows).\n const w = size, h = size * 0.8906;\n return (\n \n \n \n {(onAccent ? heartRamp.onAccent : heartRamp.plain).map(([offset, color]) => )}\n \n \n \n \n );\n }\n if (type === \"like\" || type === \"dislike\") {\n // The 👎 face sits 1.84 higher than native in a 25.33 slot; 👍 lands right. Push it back down.\n const drop = type === \"dislike\" ? size * 0.145 : 0;\n return {type === \"like\" ? \"👍\" : \"👎\"};\n }\n if (type === \"laugh\") {\n return (\n \n HAHA\n \n );\n }\n if (type === \"emphasize\") {\n const w = size * 0.71, h = size * 1.053;\n return (\n \n \n {[0, 10].map(x => (\n \n \n \n \n \n ))}\n \n );\n }\n if (type === \"question\") {\n const w = size * 0.566, h = size * 0.987;\n return (\n \n \n \n \n \n \n );\n }\n return null;\n}\n\nexport type TapbackProps = Omit, \"children\" | \"type\"> & {\n reaction?: TapbackType;\n /** A custom emoji reaction instead of one of the six classics. */\n emoji?: string;\n /** Blue balloon (your own reaction) or the gray one for other people's. */\n own?: boolean;\n /** Which side of the bubble the balloon sits on; the trail points that way. Outgoing bubbles use \"left\". */\n side?: \"left\" | \"right\";\n selected?: boolean;\n count?: number;\n platform?: Platform;\n /** Extra content, e.g. a screen-reader description. */\n children?: ReactNode;\n /**\n * Pop the balloon in the way applying a Tapback does natively: it scales up past its size and\n * settles, the trailing circles riding the same scale. Off by default, because reactions that were\n * already on a message when the conversation opened do not animate; turn it on for one the person\n * just applied.\n */\n animateIn?: boolean;\n /** Scrub the entrance (0..1) instead of playing it. */\n appearProgress?: number;\n};\n\n/**\n * Timed on `references/macos/captures/tapback-apply-frames-100-123.png`, 24 consecutive 60 fps frames\n * (f100 = 1667 ms, 16.67 ms apart). The menu is still whole at f101 and has gone at f112, a 183 ms\n * dissolve (95%→5% in 134 ms). The balloon then appears at f118 = 1967 ms, 100 ms after the menu is\n * gone, in the same frame the list starts opening the slot. Its fill diameter over the settled Ø28\n * measures 0.19 (f118), 0.28 (f119), ≈0.52 (f120), ≈0.65 (f121), ≈0.75 (f122) and ≥0.80 (f123), so it\n * needs ≈110 ms to reach full size counting from the last empty frame. The small trailing circle\n * measures 0.49 / 0.64 / 0.71 / 0.81 across f120–f123, i.e. it rides the balloon's own scale with no\n * delay of its own — hence `trailDelay: 0` and no separate animation for the trail.\n *\n * The strip ends at f123 = 2050 ms with the balloon still growing, so the overshoot past 1 and the\n * settle after it are NOT in the capture: `duration` and the peak below are unverified.\n */\nexport const tapbackAppear = { duration: 420, growth: 110, trailDelay: 0 } as const;\n\nexport function Tapback({ reaction = \"love\", emoji, own = true, side = \"left\", selected = false, count, platform: platformProp, className, onClick, style, children, animateIn = false, appearProgress, ...props }: TapbackProps) {\n const contextPlatform = usePlatform();\n const host = useRef(null);\n useLayoutEffect(() => {\n const element = host.current;\n if (!element || !animateIn) return;\n const reduced = typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches === true;\n if (reduced) return;\n // The trailing circles are children, so the one scale below carries them: the capture shows them\n // at the balloon's own scale in every frame, with no delay to animate separately.\n const grow = tapbackAppear.growth / tapbackAppear.duration;\n const balloon = element.animate(\n [\n { transform: \"scale(0)\", opacity: 0 },\n { offset: grow * 0.08, transform: \"scale(0.12)\", opacity: 1 },\n { offset: grow, transform: \"scale(1)\" },\n { offset: grow * 1.26, transform: \"scale(1.14)\" },\n { offset: 0.62, transform: \"scale(0.94)\" },\n { offset: 0.84, transform: \"scale(1.03)\" },\n { transform: \"scale(1)\" },\n ],\n { duration: tapbackAppear.duration, easing: \"linear\", fill: \"both\" },\n );\n if (appearProgress === undefined) balloon.play();\n else { balloon.pause(); balloon.currentTime = Math.max(0, Math.min(1, appearProgress)) * tapbackAppear.duration; }\n return () => balloon.cancel();\n }, [animateIn, appearProgress]);\n const platform = platformProp ?? contextPlatform;\n const g = balloonGeometry[platform];\n const fill = own ? \"var(--im-tapback-own, #0088ff)\" : \"var(--im-tapback-theirs, #e9e9eb)\";\n // macOS paints the main circle with the measured opacity ramp and knocks the artwork out of\n // whatever it laps with a 0.5 pt pane-coloured rim; the trailing circles stay flat and rimless.\n const surface = platform === \"macos\" && own ? `var(--im-tapback-own-surface, ${fill})` : fill;\n const rim = platform === \"macos\" ? `0 0 0 ${macosBalloonRim}px var(--im-bg, #fff)` : null;\n const ring = selected ? `0 0 0 ${platform === \"ios\" ? 2 : 1.5}px var(--im-bg, #fff), 0 0 0 ${platform === \"ios\" ? 4 : 3}px var(--im-tapback-ring, ${tapbackColors.selectedRing})` : null;\n // Reads on its own: \"Love tapback, 2, from you\" rather than a bare glyph name and a bracket.\n const label = `${emoji ?? tapbackLabels[reaction]} tapback${count !== undefined && count > 1 ? `, ${count}` : \"\"}${own ? \", from you\" : \"\"}`;\n const pill = count !== undefined && count > 1;\n const rootStyle: CSSProperties = {\n position: \"relative\", display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", boxSizing: \"border-box\",\n width: pill ? undefined : g.main, minWidth: g.main, height: g.main, borderRadius: g.main / 2, background: surface,\n paddingInline: pill ? g.main * 0.26 : 0, gap: g.main * 0.12, fontFamily: fontStack,\n color: own ? \"#fff\" : \"var(--im-incoming-text, #000)\",\n // The selected ring uses the same token as the picker, so dark gets #0064d2 rather than #26aeff.\n boxShadow: [rim, ring].filter(Boolean).join(\", \") || undefined,\n ...style,\n };\n const content = (\n <>\n \n {pill && {count}}\n \n {children}\n \n );\n const shared = { \"data-slot\": \"tapback\", \"data-reaction\": emoji ? \"emoji\" : reaction, \"data-own\": own, \"data-side\": side, \"data-platform\": platform } as const;\n if (!onClick) return } role=\"img\" aria-label={label} className={cn(\"select-none\", className)} style={{ ...rootStyle, transformOrigin: side === \"left\" ? \"85% 85%\" : \"15% 85%\" }} {...shared}>{content};\n return (\n \n );\n}\n", "type": "registry:ui", "target": "components/imessage/tapback.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tapback-details", "title": "Tapback details", "description": "The surface \"Tapback Details…\" opens: who reacted and with what, as a sheet on iOS and an anchored popover on macOS, with your own reaction removable.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/avatar.json", "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tapback.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/tapback-details.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, type ComponentProps, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Avatar } from \"@/components/imessage/avatar\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { BalloonTrail, TapbackGlyph, balloonGeometry, macosBalloonRim, tapbackLabels, type BalloonGeometry, type TapbackType } from \"@/components/imessage/tapback\";\nimport { fontStack } from \"@/components/imessage/tokens\";\n\n/**\n * \"Tapback Details…\", the surface both context menus open: who reacted, with what, and a way to take\n * your own reaction back.\n *\n * **NO CAPTURE EXISTS.** Nothing in `references/` records this surface on either platform, so not one\n * number below was read off a frame. They come from ChatKit 26.5 instead, the framework macOS\n * Messages is built on, read out of the live runtime on 2026-09-08 with a Mac Catalyst probe\n * (`clang -target arm64-apple-ios26.0-macabi`, `dlopen` of\n * `/System/iOSSupport/System/Library/PrivateFrameworks/ChatKit.framework/ChatKit`, then `objc_msgSend`\n * on the class and instance getters named below). Every value states its selector.\n *\n * ChatKit calls this the **voting view**: `-[CKUIBehavior messageAcknowledgementVotingViewHeight]`\n * and its neighbours size the platter, and the Swift type `ChatKit.StyleSupport` carries the interior\n * as class constants (`+votingViewCellWidth` and the rest). The strings are ChatKit's own, from\n * `ChatKit.framework/Resources/ChatKit.loctable` (`en`): `TAPBACK_DETAILS_ELLIPSIS` = \"Tapback\n * Details…\" is the menu row, `TAPBACK_DETAILS` = \"Tapback Details\" the title, and\n * `ACCESSIBILITY_TAPBACK_LABEL` = \"%@ reacted with %@\" plus\n * `ACCESSIBILITY_EXPANDED_TAPBACK_FORMAT` = \"%lu %@ reactions from %@\" are the accessibility texts\n * this file reproduces.\n *\n * **The native layout is a horizontal platter, not a table.** `votingViewPlatterCornerRadius` = 34\n * round, `messageAcknowledgementVotingViewHeight` = 72 tall on iOS and 80 on Mac, holding one\n * `votingViewCellWidth` = 64 wide cell per reactor: a `votingViewAvatarDiameter` = 44 avatar badged\n * with the reaction in a `votingViewAvatarViewGlyphFrame` 20 square, then\n * `votingViewAvatarToTextSpacing` = 4 and a `votingViewAvatarViewLabelHeight` = 18 name. The count\n * leads it as a `votingViewExpandedTally` 27 square per reaction kind with its total beside it\n * (`votingViewTallyLabelSpacing` = 0). This file reproduces that shape rather than a vertical list.\n *\n * **Mac numbers go through Catalyst's 0.77.** ChatKit is a UIKit framework and Messages a Catalyst\n * app, so one Mac-idiom point is 0.77 of an AppKit point. Two of ChatKit's own constants pin that\n * factor against measurements already in SPEC.md:\n * `+[ChatKit.StyleSupport transcriptTitleViewAvatarButtonDiameter]` = 52 lands on the macOS header's\n * measured Ø40 avatar (52 × 0.77 = 40.04), and `+transcriptTitleViewHeight` = 87 lands on the 67 that\n * capture's avatar and name pill span together (87 × 0.77 = 66.99). Neither matches iOS, whose nav\n * bar avatar is Ø60. Every macOS number here is therefore its ChatKit value times `catalystScale`,\n * and is unverified against a capture.\n *\n * **What is JUDGEMENT, and is marked so below:** the presentation's durations, the close button's\n * size, using the macOS knockout rim on the iOS badge, and presenting the platter as a bottom sheet\n * on iOS and an anchored popover on macOS (ChatKit has one platter and does not say how either host\n * presents it). The platter's fill, rim and shadow are not judgement: they reuse the glass solved\n * from `references/ios/captures/longpress-*.png` in `tapback.tsx`'s `tapbackVars`, and the balloon\n * artwork is the traced geometry from the same file, scaled.\n *\n * Not to be confused with `message-actions.tsx`'s `TapbackDetails`, which is a different ChatKit\n * surface: `CKTapbackAttributionView`, the card that floats above a long-pressed message you have\n * already reacted to (`-[CKUIBehavior attributionViewHeight]` = 132, `attributionViewMaxWidth` = 400\n * on iOS and 500 on Mac).\n */\n\n/** One Mac-idiom UIKit point is this much of an AppKit point. See the header for the two constants that fix it. */\nexport const catalystScale = 0.77;\n\nexport type TapbackDetailsMetrics = {\n /** `-[CKUIBehavior messageAcknowledgementVotingViewHeight]`: 72 iOS, 80 Mac. */\n height: number;\n /** `+[ChatKit.StyleSupport votingViewPlatterCornerRadius]` = 34. */\n radius: number;\n /** `+votingViewHorizontalPadding` = 24. */\n paddingX: number;\n /** `+votingViewItemSpacing` = 24, between the tallies and between the cells. */\n itemSpacing: number;\n /** `+votingViewAdditionalTopInset` = 4. */\n topInset: number;\n /** `-[CKUIBehavior messageAcknowledgementVotingViewMaxWidth]`: 400 iOS, 500 Mac. */\n maxWidth: number;\n /** `-messageAcknowledgementVotingViewMinPadding`: 8 iOS, 6 Mac, from the presenting edge. */\n minPadding: number;\n /** `+votingViewCellWidth` = 64. */\n cellWidth: number;\n /** `+votingViewAvatarDiameter` = 44. */\n avatar: number;\n /** `+votingViewAvatarViewGlyphFrameWidth` and `…Height`, both 20: the reaction badged on the avatar. */\n glyphFrame: number;\n /** `+votingViewAvatarToTextSpacing` = 4. */\n avatarToText: number;\n /** `+votingViewAvatarViewLabelHeight` = 18. */\n labelHeight: number;\n /** `-[CKUIBehavior avatarNameFont]`: SFNS Regular 12 iOS, 16 Mac. */\n nameFontSize: number;\n /** `-[CKUIBehavior messageAcknowledgmentVoteCountFont]`: SFNS Regular 12 iOS, 16 Mac. */\n countFontSize: number;\n /** `+votingViewExpandedTallyWidth` and `…Height`, both 27. */\n tally: number;\n /** `+votingViewTallyLabelSpacing` = 0, between a tally and its count. */\n tallyLabelSpacing: number;\n /** `+votingViewBlurWidth` = 88: how far the platter fades its scrolling content at each end. */\n blurWidth: number;\n /** `+votingViewCloseButtonLeftPadding` = 22. The button's own size is judgement; see `closeSize`. */\n closeLeftPadding: number;\n /** JUDGEMENT: ChatKit gives the close button a left padding but no size, so it takes the tally's box. */\n closeSize: number;\n};\n\nconst mac = (points: number) => Number((points * catalystScale).toFixed(4));\n\nexport const tapbackDetailsMetrics: Record = {\n ios: {\n height: 72, radius: 34, paddingX: 24, itemSpacing: 24, topInset: 4, maxWidth: 400, minPadding: 8,\n cellWidth: 64, avatar: 44, glyphFrame: 20, avatarToText: 4, labelHeight: 18,\n nameFontSize: 12, countFontSize: 12, tally: 27, tallyLabelSpacing: 0,\n blurWidth: 88, closeLeftPadding: 22, closeSize: 27,\n },\n macos: {\n height: mac(80), radius: mac(34), paddingX: mac(24), itemSpacing: mac(24), topInset: mac(4), maxWidth: mac(500), minPadding: mac(6),\n cellWidth: mac(64), avatar: mac(44), glyphFrame: mac(20), avatarToText: mac(4), labelHeight: mac(18),\n nameFontSize: mac(16), countFontSize: mac(16), tally: mac(27), tallyLabelSpacing: 0,\n blurWidth: mac(88), closeLeftPadding: mac(22), closeSize: mac(27),\n },\n};\n\n/**\n * The presentation. `scale` is ChatKit's own (`+[ChatKit.StyleSupport tapbackStartingScaleX]` and\n * `…ScaleY`, both 0.3). Everything else is JUDGEMENT, borrowed from motion this kit has already\n * measured rather than invented: `enter` and `ease` are the sheet duration and curve `ios-details.tsx`\n * uses for its own rise, and `exit`/`exitEase` are the long-press overlay's measured 220 ms dismissal\n * (`messageActionsTiming.exit`). ChatKit does carry `-[CKUIBehavior tapbackDismissalDuration]` = 0.5 s,\n * but it belongs to the picker rather than to this platter, so it is recorded and not used.\n */\nexport const tapbackDetailsMotion = {\n enter: 320,\n exit: 220,\n ease: \"cubic-bezier(0.32, 0.72, 0, 1)\",\n exitEase: \"cubic-bezier(0.4, 0, 1, 1)\",\n scale: 0.3,\n /** ChatKit's `-[CKUIBehavior tapbackDismissalDuration]` in ms. Recorded, not used; see above. */\n frameworkDismissal: 500,\n} as const;\n\n/**\n * Light values ride the root's inline style so the platter renders correctly with no Tailwind at all;\n * the dark set rides a `dark:` class, the way `avatar.tsx` splits its own gradient.\n *\n * The platter's fill, rim and shadow are the glass `tapback.tsx` solved from the long-press captures\n * (`--im-glass-solid` #ededef light and #1f1e21 dark, with its rim and shadow). `--im-td-label` is\n * ChatKit's `-[CKUITheme messageAcknowledgmentVotingTextColor]`, which resolves to\n * `secondaryLabelColor`: rgba(0,0,0,0.498) light, rgba(255,255,255,0.549) dark, the same colour\n * `-attributionCountViewFontColor` returns for the count. The dim behind the iOS sheet is the 20%\n * black measured on `references/ios/captures/newmsg-light.png` (`ios-new-message-sheet.tsx`), and the\n * close button's fill is the segmented-control track measured on `effects-picker-light.png`.\n */\nconst lightVars = {\n \"--im-td-platter\": \"#ededef\",\n \"--im-td-rim\": \"rgba(255,255,255,0.55)\",\n \"--im-td-shadow\": \"0 6px 24px rgba(0,0,0,0.10)\",\n \"--im-td-label\": \"rgba(0,0,0,0.498)\",\n \"--im-td-dim\": \"rgba(0,0,0,0.2)\",\n \"--im-td-fill\": \"rgba(120,120,128,0.16)\",\n \"--im-td-theirs\": \"#e9e9eb\",\n} as const;\n\nconst darkVars =\n \"dark:[--im-td-platter:#1f1e21] dark:[--im-td-rim:rgba(255,255,255,0.10)] dark:[--im-td-shadow:0_6px_24px_rgba(0,0,0,0.5)] \" +\n \"dark:[--im-td-label:rgba(255,255,255,0.549)] dark:[--im-td-dim:rgba(0,0,0,0.5)] dark:[--im-td-fill:rgba(120,120,128,0.24)] \" +\n \"dark:[--im-td-theirs:#262629]\";\n\n/** Which corner of the popover its entrance grows out of. */\nconst transformOrigins: Record<\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\", string> = {\n \"top-left\": \"0% 0%\",\n \"top-right\": \"100% 0%\",\n \"bottom-left\": \"0% 100%\",\n \"bottom-right\": \"100% 100%\",\n};\n\nexport type TapbackReactor = {\n id: string;\n /** Full name, used for the accessible text. The cell truncates it to one line. */\n name: string;\n /** What the 64 wide cell shows under the avatar; the first word of `name` when absent. */\n shortName?: string;\n /** One or two letters for the avatar; derived from `name` when absent. */\n initials?: string;\n /** A photo instead of initials. */\n avatar?: string;\n /** One of the six classics. Ignored when `emoji` is set. */\n reaction?: TapbackType;\n /** A custom emoji reaction. */\n emoji?: string;\n /** Your own reaction: the one cell that can be activated to take it back. */\n own?: boolean;\n};\n\nexport type TapbackDetailsProps = Omit, \"children\"> & {\n reactors: TapbackReactor[];\n platform?: Platform;\n /** Called when the own cell is activated. ChatKit's own name for this action is \"Remove Tapback\". */\n onRemove?: (reactor: TapbackReactor) => void;\n /** Dismiss: Escape, the close button, the iOS dim, or a click outside the macOS popover. */\n onClose?: () => void;\n /** False plays the dismissal; the platter stays mounted until it is over, then calls `onExited`. */\n open?: boolean;\n onExited?: () => void;\n /**\n * Seek the presentation to this fraction (0..1) instead of playing it, which is what the harness\n * does. It seeks whichever direction `open` selects, and a seeked dismissal never fires `onExited`:\n * scrubbing a timeline is not a dismissal, and a checkpoint has to land on the same frame every run.\n */\n progress?: number;\n /** macOS: the popover's top-left corner in the containing block, and the corner it grows out of. */\n left?: number;\n top?: number;\n origin?: keyof typeof transformOrigins;\n /** Move focus into the platter when it opens (keyboard users). */\n autoFocus?: boolean;\n};\n\nfunction clamp01(value: number) {\n return Math.max(0, Math.min(1, value));\n}\n\nconst reducedMotionQuery = () => (typeof window === \"undefined\" ? null : window.matchMedia?.(\"(prefers-reduced-motion: reduce)\") ?? null);\nfunction subscribeReducedMotion(onChange: () => void) {\n const query = reducedMotionQuery();\n query?.addEventListener(\"change\", onChange);\n return () => query?.removeEventListener(\"change\", onChange);\n}\n/** `macos-plus-menu.tsx` has the same hook; this file keeps its own copy so it installs on its own. */\nfunction usePrefersReducedMotion() {\n return useSyncExternalStore(subscribeReducedMotion, () => reducedMotionQuery()?.matches ?? false, () => false);\n}\n\nfunction initialsOf(reactor: TapbackReactor) {\n if (reactor.initials) return reactor.initials;\n return reactor.name.trim().split(/\\s+/).slice(0, 2).map(part => part[0] ?? \"\").join(\"\").toUpperCase();\n}\n\nfunction reactionKey(reactor: TapbackReactor) {\n return reactor.emoji ? `emoji:${reactor.emoji}` : `type:${reactor.reaction ?? \"love\"}`;\n}\n\nfunction reactionName(reactor: TapbackReactor) {\n return reactor.emoji ?? tapbackLabels[reactor.reaction ?? \"love\"];\n}\n\n/**\n * The balloon geometry from `tapback.tsx`, measured on `tapback-love-light.png` (iOS, Ø34) and on\n * both `tapback-love-*-2x.png` (macOS, Ø27.98), scaled so the whole balloon fills the ChatKit frame\n * it is given. Scaling the traced artwork keeps the glyph, the neck and both trailing circles in the\n * proportions the captures fix; only the overall size comes from the framework.\n */\nexport function scaledBalloonGeometry(platform: Platform, frame: number): BalloonGeometry {\n const g = balloonGeometry[platform];\n const k = frame / g.main;\n return {\n main: frame,\n medium: g.medium * k,\n small: g.small * k,\n mediumOffset: [g.mediumOffset[0] * k, g.mediumOffset[1] * k],\n smallOffset: [g.smallOffset[0] * k, g.smallOffset[1] * k],\n glyph: g.glyph * k,\n glyphOffsetY: (g.glyphOffsetY ?? 0) * k,\n };\n}\n\n/**\n * One reaction balloon at an arbitrary size, built from the scaled measured geometry. `Tapback`\n * itself is fixed at the balloon's own measured diameter, so the badge and the tally rebuild the\n * artwork here rather than scaling that component with a transform, which would scale its rim too.\n */\nfunction Balloon({ geometry, own, side, rim = false, children, style }: { geometry: BalloonGeometry; own: boolean; side: \"left\" | \"right\"; rim?: boolean; children?: ReactNode; style?: CSSProperties }) {\n const fill = own ? \"var(--im-tapback-own, #0088ff)\" : \"var(--im-td-theirs, #e9e9eb)\";\n return (\n \n {children}\n \n \n );\n}\n\n/**\n * JUDGEMENT: the cell shows a first name. ChatKit sizes the label at `votingViewCellWidth` 64 with\n * `avatarNameFont` at 12, which fits a first name and truncates almost every full one; native avatar\n * stacks label themselves the same way. The whole name stays in the accessible text, and a caller\n * with a better short form passes `shortName`.\n */\nfunction shortNameOf(reactor: TapbackReactor) {\n return reactor.shortName ?? reactor.name.trim().split(/\\s+/)[0] ?? reactor.name;\n}\n\nexport function TapbackDetails({\n reactors, platform: platformProp, onRemove, onClose, open = true, onExited, progress,\n left, top, origin = \"top-left\", autoFocus = false, className, style, ...props\n}: TapbackDetailsProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = tapbackDetailsMetrics[platform];\n const t = tapbackDetailsMotion;\n const id = useId().replace(/:/g, \"\");\n const reduced = usePrefersReducedMotion();\n const platter = useRef(null);\n const dim = useRef(null);\n const scroller = useRef(null);\n\n /**\n * The dismissal is derived DURING RENDER, not in an effect: an effect leaves one committed frame\n * with the platter already unmounted and the exit never gets to run. `macos-plus-menu.tsx` and\n * `ios-details.tsx` derive theirs the same way.\n */\n const [seenOpen, setSeenOpen] = useState(open);\n const [shown, setShown] = useState(open);\n const [settled, setSettled] = useState(open && reduced);\n if (seenOpen !== open) {\n setSeenOpen(open);\n if (open) { setShown(true); setSettled(reduced); }\n // Under reduced motion there is no dismissal to wait for, so it goes in the same frame.\n else if (reduced) setShown(false);\n }\n const closing = shown && !open;\n const state = closing ? \"closing\" : reduced || settled || (progress !== undefined && clamp01(progress) === 1) ? \"open\" : \"entering\";\n\n const exited = useRef(onExited);\n const close = useRef(onClose);\n useEffect(() => { exited.current = onExited; close.current = onClose; });\n\n // One place fires `onExited`, whether the platter left on its animation or under reduced motion.\n const wasShown = useRef(shown);\n useEffect(() => {\n if (wasShown.current && !shown) exited.current?.();\n wasShown.current = shown;\n }, [shown]);\n\n /**\n * Web Animations, not a transition or a rAF loop, so `document.getAnimations()` can reach the\n * timeline and a `progress` frame is a seek rather than a replay. iOS rises off the bottom edge the\n * way a sheet does; macOS pops out of the corner it is anchored by, from ChatKit's own 0.3.\n */\n useEffect(() => {\n const element = platter.current;\n if (!element || !shown || reduced) return;\n const poses: Keyframe[] = platform === \"ios\"\n ? [{ opacity: 0, transform: `translateY(${m.height + m.minPadding}px)` }, { opacity: 1, transform: \"translateY(0px)\" }]\n : [{ opacity: 0, transform: `scale(${t.scale})` }, { opacity: 1, transform: \"scale(1)\" }];\n const animation = open\n ? element.animate(poses, { duration: t.enter, easing: t.ease, fill: \"both\" })\n : element.animate([poses[1], poses[0]], { duration: t.exit, easing: t.exitEase, fill: \"both\" });\n if (progress !== undefined) {\n // Seeked, not played: a scrubbed checkpoint has to land on the same frame every run.\n animation.pause();\n try { animation.currentTime = clamp01(progress) * (open ? t.enter : t.exit); } catch { /* no timeline yet */ }\n return () => animation.cancel();\n }\n const done = () => (open ? setSettled(true) : setShown(false));\n animation.addEventListener(\"finish\", done);\n return () => {\n animation.removeEventListener(\"finish\", done);\n // Reopened mid-dismissal: drop the fold so it cannot hold a stale pose under the entrance.\n if (animation.playState !== \"finished\") animation.cancel();\n };\n }, [shown, open, progress, reduced, platform, m.height, m.minPadding, t.enter, t.exit, t.ease, t.exitEase, t.scale]);\n\n // The dim rides the same timeline, so a scrubbed frame is consistent with the platter's.\n useEffect(() => {\n const element = dim.current;\n if (!element || !shown || reduced) return;\n const animation = open\n ? element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: t.enter, easing: \"ease-out\", fill: \"both\" })\n : element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: t.exit, easing: \"ease-out\", fill: \"both\" });\n if (progress !== undefined) {\n animation.pause();\n try { animation.currentTime = clamp01(progress) * (open ? t.enter : t.exit); } catch { /* no timeline yet */ }\n }\n return () => { try { animation.cancel(); } catch { /* already gone */ } };\n }, [shown, open, progress, reduced, t.enter, t.exit]);\n\n // Escape from wherever focus is, and on macOS a click anywhere outside the popover.\n useEffect(() => {\n if (!open) return;\n const onKey = (event: globalThis.KeyboardEvent) => {\n if (event.key !== \"Escape\" || !close.current) return;\n event.preventDefault();\n close.current();\n };\n const onPointerDown = (event: globalThis.PointerEvent) => {\n const target = event.target as Node | null;\n if (platform !== \"macos\" || !close.current || !target || platter.current?.contains(target)) return;\n // The control that opened it owns the toggle; closing here would let its own click reopen it.\n if (target instanceof Element && target.closest('[aria-haspopup=\"dialog\"]')) return;\n close.current();\n };\n document.addEventListener(\"keydown\", onKey);\n document.addEventListener(\"pointerdown\", onPointerDown, true);\n return () => {\n document.removeEventListener(\"keydown\", onKey);\n document.removeEventListener(\"pointerdown\", onPointerDown, true);\n };\n }, [open, platform]);\n\n useEffect(() => {\n // A scrubbed entrance must not move the caret: the harness seeks frames, it does not open dialogs.\n if (!open || !autoFocus || progress !== undefined) return;\n platter.current?.querySelector(\"button, [tabindex]:not([tabindex='-1'])\")?.focus({ preventScroll: true });\n }, [open, autoFocus, progress]);\n\n /**\n * ChatKit fades the platter's content over `votingViewBlurWidth` at each end, which only means\n * anything once there is more than fits. Keyboard users get the scroller itself as a focus stop\n * when that happens, which is the accessible pattern for a scrollable region.\n */\n const [edges, setEdges] = useState({ start: false, end: false });\n const measure = useCallback(() => {\n const node = scroller.current;\n if (!node) return;\n const hidden = node.scrollWidth - node.clientWidth;\n const next = { start: node.scrollLeft > 0.5, end: hidden > 0.5 && node.scrollLeft < hidden - 0.5 };\n setEdges(current => (current.start === next.start && current.end === next.end ? current : next));\n }, []);\n useLayoutEffect(() => {\n measure();\n const node = scroller.current;\n if (!node || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, [measure, reactors.length]);\n const overflowing = edges.start || edges.end;\n\n if (!shown || reactors.length === 0) return null;\n\n // Tallies keep first-appearance order, and one counts as yours if any reaction in it is yours.\n const tallies: Array<{ key: string; reactor: TapbackReactor; count: number; own: boolean; names: string[] }> = [];\n for (const reactor of reactors) {\n const key = reactionKey(reactor);\n const found = tallies.find(entry => entry.key === key);\n if (found) { found.count += 1; found.own = found.own || Boolean(reactor.own); found.names.push(reactor.name); }\n else tallies.push({ key, reactor, count: 1, own: Boolean(reactor.own), names: [reactor.name] });\n }\n\n const badge = scaledBalloonGeometry(platform, m.glyphFrame);\n const fade = `linear-gradient(to right, transparent 0, #000 ${m.blurWidth}px, #000 calc(100% - ${m.blurWidth}px), transparent 100%)`;\n\n /**\n * Hover, focus and pressed feedback on the one cell that does something. Driven from CSS so a\n * pointer crossing the platter never touches React state, and gated on `data-state` so nothing\n * lights up while the platter is still growing under a stationary cursor. The scroller hides its\n * bar: native fades its content instead, and a bar would eat the cells' bottom edge.\n */\n const platterCss = `[data-slot=\"tapback-details\"] [data-slot=\"tapback-details-cell-fill\"]{opacity:0;transition:opacity 80ms linear}\n[data-slot=\"tapback-details\"][data-state=\"open\"] [data-slot=\"tapback-details-remove\"]:hover [data-slot=\"tapback-details-cell-fill\"]{opacity:1}\n[data-slot=\"tapback-details\"] [data-slot=\"tapback-details-remove\"]:focus-visible [data-slot=\"tapback-details-cell-fill\"]{opacity:1}\n[data-slot=\"tapback-details\"] [data-slot=\"tapback-details-remove\"]:active [data-slot=\"tapback-details-cell-fill\"]{opacity:1}\n[data-slot=\"tapback-details-scroller\"]::-webkit-scrollbar{display:none}\n@media (prefers-reduced-motion: reduce){[data-slot=\"tapback-details\"] [data-slot=\"tapback-details-cell-fill\"]{transition:none}}`;\n\n const cellBody = (reactor: TapbackReactor) => (\n <>\n \n \n \n {/* The badge sits on the avatar's trailing-bottom with its trail pointing away, the way a\n balloon points away from its bubble. Its 0.5 knockout rim is measured on macOS\n (`macosBalloonRim`); using it on iOS too, where a balloon over a bubble has none, is\n JUDGEMENT: an avatar is not a bubble and the badge needs the separation. */}\n \n \n \n \n \n {shortNameOf(reactor)}\n \n \n );\n\n const cells = reactors.map((reactor, index) => {\n // ChatKit's own accessibility string is \"%@ reacted with %@\"; the action that takes one back is\n // \"Remove Tapback\".\n const reacted = `${reactor.name} reacted with ${reactionName(reactor)}`;\n const box: CSSProperties = { position: \"relative\", display: \"block\", width: m.cellWidth, textAlign: \"center\" };\n return (\n
  • \n {reactor.own && onRemove ? (\n \n ) : (\n \n {cellBody(reactor)}\n \n )}\n
    • \n );\n });\n\n // The platter hugs its content and only then runs into `maxWidth`, which is what ChatKit's pair of\n // a max width and a minimum padding from the presenting edge describes. On macOS an absolutely\n // positioned box with an auto width already shrink-wraps; on iOS a centring row does it instead,\n // because setting both `left` and `right` would stretch it.\n const platterStyle: CSSProperties = {\n ...(platform === \"ios\"\n ? { position: \"relative\", maxWidth: `min(${m.maxWidth}px, 100%)` }\n : { position: \"absolute\", left, top, maxWidth: m.maxWidth }),\n boxSizing: \"border-box\",\n height: m.height,\n borderRadius: m.radius,\n paddingTop: m.topInset,\n paddingInline: m.paddingX,\n display: \"flex\",\n alignItems: \"center\",\n background: \"var(--im-td-platter, #ededef)\",\n boxShadow: \"var(--im-td-shadow, 0 6px 24px rgba(0,0,0,0.10)), inset 0 0 0 0.5px var(--im-td-rim, rgba(255,255,255,0.55))\",\n transformOrigin: transformOrigins[origin],\n // Nothing is clickable while it folds away, so a dismissal cannot pick a cell by accident.\n pointerEvents: closing ? \"none\" : undefined,\n };\n\n const inside = (\n <>\n Tapback Details\n\n {/* The count and the people scroll together, which is what one fade at each end of the platter\n (`votingViewBlurWidth`) describes; only the close button is pinned. */}\n
    \n
    \n {/* ChatKit calls the count the expanded tally: one per reaction kind with its total beside\n it at `votingViewTallyLabelSpacing` 0, named with ChatKit's own\n ACCESSIBILITY_EXPANDED_TAPBACK_FORMAT, \"%lu %@ reactions from %@\". */}\n
    \n {tallies.map((entry, index) => (\n \n {/* The tally is the bare glyph in ChatKit's `votingViewExpandedTally` box, not a\n balloon: a balloon's neck and trail point at the bubble it belongs to, and a\n summary has no bubble. */}\n \n \n \n \n {entry.count}\n \n \n ))}\n
    \n
      \n {cells}\n
    \n
    \n
    \n\n {onClose && (\n \n )}\n \n );\n\n // macOS: the popover is the root, positioned by the caller against the message it belongs to.\n if (platform === \"macos\") {\n return (\n
    \n \n {inside}\n
    \n );\n }\n\n // iOS: the platter comes up over the dimmed conversation, so the dim is the root.\n return (\n
    \n \n {/* The dim is the 20% black measured on `newmsg-light.png`; tapping it dismisses, as a sheet does. */}\n
    \n
    \n
    \n {inside}\n
    \n
    \n
    \n );\n}\n", "type": "registry:ui", "target": "components/imessage/tapback-details.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "typing-indicator", "title": "Typing indicator", "description": "The native typing bubble with its three staggered dots and trailing circles.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/bubble-shape.json", "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/typing-indicator.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { bodyClipPath, tailBox, tailPath, tailSeamOverlap } from \"@/components/imessage/bubble-shape\";\nimport { bubbleMetrics, palettes } from \"@/components/imessage/tokens\";\n\n/**\n * The \"someone is typing\" balloon.\n *\n * NOT MEASURED. No capture in `references/` shows a typing indicator: every iOS and macOS still, both\n * 60 fps recordings and every motion contact sheet were checked on 2026-09-08 and none contains one.\n *\n * What is anchored to a capture is the balloon itself. It is an incoming bubble, so it takes the\n * measured incoming geometry rather than numbers of its own: the one-line body height\n * (2 x paddingY + lineHeight), the measured corner radius, the traced tail on the bottom-left, and\n * the incoming screen-space fill, all read from `bubbleMetrics` and `bubble-shape` so it can never\n * drift from a real bubble. The message list insets it by the same measured edge inset as a bubble.\n *\n * Only the dots are invented: diameter, spacing and the 1.2 s pulse are provisional, and the dot\n * colour reuses the platform's measured secondary-label gray because no capture shows the real one.\n * The pulse is a CSS animation with negative delays, so every dot is inside its active phase at every\n * time: pausing `document.getAnimations()` and setting `currentTime` pins the balloon to a frame, and\n * that frozen frame is the one the animation shows while running.\n */\nexport type TypingIndicatorMetrics = {\n /** Body box, both derived from the measured one-line incoming bubble. */\n width: number;\n height: number;\n /** Provisional: dot diameter and the gap between two dots. */\n dot: number;\n dotGap: number;\n /** Measured bubble radius and tail scale, carried through so the balloon matches a bubble exactly. */\n radius: number;\n tailScale: number;\n};\n\n/** The only free numbers in the balloon. Everything else falls out of the measured bubble. */\nconst dotSizes: Record = {\n ios: { dot: 10, dotGap: 5 },\n macos: { dot: 7, dotGap: 3.5 },\n};\n\nfunction metricsFor(platform: Platform): TypingIndicatorMetrics {\n const b = bubbleMetrics[platform];\n const { dot, dotGap } = dotSizes[platform];\n return {\n width: 2 * b.paddingX + 3 * dot + 2 * dotGap,\n height: 2 * b.paddingY + b.lineHeight,\n dot,\n dotGap,\n radius: b.radius,\n tailScale: b.tailScale,\n };\n}\n\nexport const typingIndicatorMetrics: Record = {\n ios: metricsFor(\"ios\"),\n macos: metricsFor(\"macos\"),\n};\n\n/** Dot loop and the stagger between two dots. Provisional; no capture times the pulse. */\nexport const typingLoopMs = 1200;\nexport const typingStaggerMs = 200;\n\n/**\n * The delays are negative so a dot is never in its \"before\" phase: at time 0 dot 1 is already\n * `typingStaggerMs` into the loop instead of sitting on its unanimated base style, which is what made\n * a frozen frame at t = 0 disagree with the running animation.\n */\nconst dotDelayMs = (index: number) => index * typingStaggerMs - typingLoopMs;\n\nconst keyframes = `\n@keyframes im-typing-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(-1px) scale(1.06); } }\n[data-slot=\"typing-indicator\"] > span[data-dot] { animation: im-typing-dot ${typingLoopMs}ms ease-in-out infinite both; }\n@media (prefers-reduced-motion: reduce) { [data-slot=\"typing-indicator\"] > span[data-dot] { animation: none; opacity: .7; } }\n`;\n\nexport type TypingIndicatorProps = ComponentProps<\"div\"> & {\n label?: string;\n /** The balloon is always the last thing in the transcript, so it carries a tail like any last bubble. */\n tail?: boolean;\n /**\n * Screen-space y of the body's bottom edge, in px, for the position-dependent incoming fill. The\n * message list tracks this element too, so it is only needed outside a list: pass it to keep a macOS\n * dark balloon exactly on the incoming ramp; the iOS grays are flat and never need it.\n */\n screenBottom?: number;\n platform?: Platform;\n};\n\nexport function TypingIndicator({\n label = \"Someone is typing\", tail = true, screenBottom, platform: platformProp, className, style, ...props\n}: TypingIndicatorProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const t = typingIndicatorMetrics[platform];\n const tailW = tailBox.width * t.tailScale;\n const tailH = tailBox.height * t.tailScale;\n const hang = tailBox.hang * t.tailScale;\n\n // Same screen-space fill an incoming bubble paints: one gradient in screen coordinates, anchored to\n // the body's bottom so the body and the tail (which hangs `hang` lower) share the same image. The\n // fallbacks only matter when the balloon is used outside a palette; inside one they never apply.\n const screen = `var(--im-screen-h, ${palettes[platform].light.incoming.screenHeight}px)`;\n const bottomVar = screenBottom === undefined ? `var(--bubble-bottom, calc(${screen} * 0.55))` : `${screenBottom}px`;\n const fill: CSSProperties = {\n backgroundImage: \"linear-gradient(var(--im-fill-top), var(--im-fill-bottom))\",\n backgroundSize: `100% ${screen}`,\n backgroundRepeat: \"no-repeat\",\n backgroundColor: \"var(--im-fill-bottom)\",\n };\n const bodyFill: CSSProperties = { ...fill, backgroundPosition: `0 calc(100% + (${screen} - ${bottomVar}))` };\n const tailFill: CSSProperties = { ...fill, backgroundPosition: `0 calc(100% + (${screen} - ${bottomVar} - ${hang}px))` };\n const vars = {\n \"--im-fill-top\": \"var(--im-gray-top, #e9e9eb)\",\n \"--im-fill-bottom\": \"var(--im-gray-bottom, #e9e9eb)\",\n ...(screenBottom === undefined ? {} : { \"--bubble-bottom\": `${screenBottom}px` }),\n } as CSSProperties;\n\n return (\n
    \n \n {/* The fill sits behind the dots so clipping the tail corner never clips a dot. */}\n
    \n {tail &&
    }\n {[0, 1, 2].map(index => (\n \n ))}\n
    \n );\n}\n", "type": "registry:ui", "target": "components/imessage/typing-indicator.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "date-separator", "title": "Date separator", "description": "Date headers: the iOS two-line header with its service line, the mid-list one-liner, and the macOS variant.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/date-separator.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { fontStack } from \"@/components/imessage/tokens\";\n\n/**\n * The centered timestamp that separates conversation history.\n *\n * Measured (references/ios/captures/conv3-light.png @3x, references/macos/captures/conversation-pane-light-partial.png @2x):\n * - iOS: two lines (\"iMessage\" then \"Today 1:25 AM\"), 11pt on a 14pt pitch, #8a8a8e. The service line and\n * \"Today\" render at weight 500; the time is regular. The first bubble sits 7.6pt below the second line box.\n * - macOS: one line, 9pt on an 11pt pitch (ink 63 x 9pt for \"Today 1:47 AM\"; SPEC.md's 11pt is 20% too wide),\n * \"Today\" at weight **500**, #808080 light / #9a9a9a dark. The first bubble's body top sits 6.0 below the\n * header's ink bottom. Weight 500 is measured, not assumed: rendering the string at 9pt/2x and comparing\n * the ten ink runs of `conversation-pane-light-partial.png` (normalised to the \"T\", pt from its left edge:\n * 0.00-10.50, 11.00-16.00, 16.50-21.00, 22.00-26.50, 30.00-33.00, 34.50-36.00, 37.00-42.50, 43.00-47.50,\n * 49.50-55.50, 56.50-63.00) puts weight 500 within one device px on all ten and on the 63.00 total, where\n * 600 runs 0.5 wide on seven of them and 63.50 overall, and 400 is 0.5 narrow on eight. Same weight as iOS.\n * `gapBelow` is 6 even though the box wants 5.7: at 9pt/2x Blink paints the ink at `round(box top) + 2`,\n * so 5.7 and 6 put the ink on the same device row, and 6 is the number the capture states.\n *\n * Only the header that opens a conversation carries the service name; a header inserted mid-list after an\n * hour-long gap is one line and sits in a gap of its own. Measured in `dateheader-mid-light.png`: the\n * previous body bottom is at 605.0, the header ink runs 621.0 to 631.33, the next bubble top is 639.0.\n * Chrome snaps a baseline to whole CSS px, so the ink can land a third of a point off the capture even\n * when the box is exactly right; the gaps below are the box positions, not the rasterised ink.\n */\nexport type DateSeparatorVariant = \"first\" | \"mid\";\nexport type DateSeparatorMetrics = {\n fontSize: number; lineHeight: number; weight: number; dayWeight: number;\n /** Space between the previous row and the line box, and between the line box and the next row. */\n gapAbove: number; gapBelow: number;\n /** The same two gaps for a mid-list header, which has no bubble above it to lean on. */\n midGapAbove: number; midGapBelow: number;\n};\n\nexport const dateSeparatorMetrics: Record = {\n ios: { fontSize: 11, lineHeight: 14, weight: 400, dayWeight: 500, gapAbove: 0, gapBelow: 7.6, midGapAbove: 13.33, midGapBelow: 6.67 },\n // No macOS capture of a mid-list header yet: it reuses the between-cluster gap above and the measured 6 below.\n macos: { fontSize: 9, lineHeight: 11, weight: 400, dayWeight: 500, gapAbove: 0, gapBelow: 6, midGapAbove: 11.5, midGapBelow: 6 },\n};\n\nexport type DateLabel = {\n /** \"Today\", \"Yesterday\", a weekday name, or \"Sep 8, 2026\". */\n day: string;\n /** \"1:25 AM\" (narrow no-break space before the period, as Apple renders it). */\n time: string;\n /** \" \" for relative days, \" at \" before absolute dates. */\n joiner: \" \" | \" at \";\n text: string;\n iso: string;\n};\n\nconst WEEKDAYS = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\nfunction startOfDay(d: Date) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); }\n\nexport function formatClockTime(value: Date | number): string {\n const d = new Date(value);\n const hours = d.getHours();\n const h12 = hours % 12 || 12;\n return `${h12}:${String(d.getMinutes()).padStart(2, \"0\")} ${hours < 12 ? \"AM\" : \"PM\"}`;\n}\n\n/** Apple's relative date style: Today / Yesterday / weekday within a week / \"Sep 8, 2026 at 1:25 AM\". */\nexport function formatDateLabel(value: Date | number, now: Date | number = Date.now()): DateLabel {\n const d = new Date(value);\n const days = Math.round((startOfDay(new Date(now)) - startOfDay(d)) / 86_400_000);\n const time = formatClockTime(d);\n let day: string;\n let joiner: DateLabel[\"joiner\"] = \" \";\n if (days === 0) day = \"Today\";\n else if (days === 1) day = \"Yesterday\";\n else if (days > 1 && days < 7) day = WEEKDAYS[d.getDay()];\n else { day = `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`; joiner = \" at \"; }\n return { day, time, joiner, text: `${day}${joiner}${time}`, iso: d.toISOString() };\n}\n\nexport type DateSeparatorProps = Omit, \"children\"> & {\n /** The moment the header describes. Omit to render `children` verbatim. */\n date?: Date | number;\n /** Reference time for \"Today\"/\"Yesterday\"; defaults to the current time. */\n now?: Date | number;\n /** iOS shows the conversation's service (\"iMessage\", \"Text Message\") above the date. Ignored on macOS. */\n service?: ReactNode;\n /** \"first\" opens the conversation; \"mid\" is inserted after an hour-long gap and gets its own spacing. */\n variant?: DateSeparatorVariant;\n platform?: Platform;\n /** Custom label used instead of the formatted date. */\n children?: ReactNode;\n dateTime?: string;\n};\n\nexport function DateSeparator({ date, now, service, variant = \"first\", platform: platformProp, children, dateTime, className, style, ...props }: DateSeparatorProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = dateSeparatorMetrics[platform];\n const mid = variant === \"mid\";\n const label = date === undefined ? undefined : formatDateLabel(date, now);\n return (\n
    \n {platform === \"ios\" && !mid && service ?
    {service}
    : null}\n \n
    \n );\n}\n", "type": "registry:ui", "target": "components/imessage/date-separator.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "link-preview", "title": "Link preview", "description": "The measured compact link card, plus a rich variant with an image, title and host.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/link-preview.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { fontStack } from \"@/components/imessage/tokens\";\n\n/**\n * The link card Messages shows for a URL without rich metadata: a gray rounded card with the hostname on\n * the left and a Safari compass disc on the right. With `media` (or an `image`) it becomes the rich card:\n * the image on top, then the title and hostname.\n *\n * macOS metrics are measured from the apple.com card in `references/macos/captures/conversation-pane-light.png`\n * and `conversation-pane-dark-2.png` (630x640 pt @2x, so every pixel pair is one point):\n *\n * | Part | Measurement |\n * |---|---|\n * | Card | 140 x 60 (x 470-610, y 179-239 in the light capture), radius 14 |\n * | Fill | #e9e9eb light / #3b3b3d dark (the incoming gray) |\n * | Hostname | \"apple.com\" ink 49.5 x 10, left ink edge 10 in from the card, baseline 35 below the card top |\n * | Host colour | #808084 light / #a6a6a9 dark |\n * | Disc | 24 x 24, right edge 16 in from the card's right edge (centre 28 in), #757576 light / #a7a7a7 dark |\n * | Content shift | hostname baseline and disc centre both sit 1 below the card's vertical centre |\n *\n * The corner is really one of Apple's continuous corners: a superellipse of radius 17.375 and exponent\n * 2.5 fits the light capture to 0.09 px, where the best circle (14.3) is off by up to 0.27 pt. Radius 14\n * keeps the card on the same circular geometry as the macOS bubble, which is within that error.\n *\n * There is **no native capture of the iOS card or of either rich variant**. iOS reuses what iOS itself\n * measures - the 19 bubble radius, the incoming gray (#e9e9eb / #262629), the secondary label\n * (#8a8a8e / #8d8d93), the 280.5 max bubble width and the 13.85/10 bubble padding - and its card box,\n * hostname size and disc size are the macOS ones re-proportioned for 17pt type. Treat those as a\n * considered guess, not a measurement.\n */\nexport type LinkPreviewMetrics = {\n width: number;\n height: number;\n radius: number;\n hostSize: number;\n hostLineHeight: number;\n padStart: number;\n disc: number;\n /** Distance from the card's right edge to the disc's right edge. */\n discInsetEnd: number;\n /** Native draws the hostname and disc this much below the card's vertical center. */\n contentShift: number;\n richWidth: number;\n titleSize: number;\n titleLineHeight: number;\n richPadX: number;\n richPadY: number;\n};\n\nexport const linkPreviewMetrics: Record = {\n macos: { width: 140, height: 60, radius: 14, hostSize: 10, hostLineHeight: 12, padStart: 10, disc: 24, discInsetEnd: 16, contentShift: 1, richWidth: 280, titleSize: 12, titleLineHeight: 15, richPadX: 12.5, richPadY: 8 },\n ios: { width: 198, height: 85, radius: 19, hostSize: 14, hostLineHeight: 17, padStart: 14, disc: 34, discInsetEnd: 23, contentShift: 1.4, richWidth: 280.5, titleSize: 17, titleLineHeight: 20, richPadX: 13.85, richPadY: 10 },\n};\n\nexport type LinkPreviewProps = Omit, \"title\" | \"children\" | \"href\" | \"media\"> & {\n href: string;\n title?: string;\n description?: string;\n /** Hostname label; defaults to the URL's host without \"www.\". */\n host?: string;\n /** Rich card image slot (any node, e.g. an ). */\n media?: ReactNode;\n /** Convenience for the rich card: an image URL rendered in the media slot. */\n image?: string;\n platform?: Platform;\n};\n\nfunction SafariDisc({ size }: { size: number }) {\n return (\n \n \n \n \n \n \n \n );\n}\n\n/**\n * macOS values are measured off the apple.com card. iOS swaps in its own measured grays - the incoming\n * bubble (#e9e9eb / #262629) and the secondary label (#8a8a8e / #8d8d93) - because #3b3b3d is the macOS\n * incoming gray and reads wrong next to iOS bubbles. The Safari disc keeps the macOS gray: nothing on\n * iOS measures it.\n */\nconst themeVars: Record = {\n macos: \"[--im-card:#e9e9eb] [--im-card-fg:#808084] [--im-card-icon:#757576] [--im-card-title:#000000] dark:[--im-card:#3b3b3d] dark:[--im-card-fg:#a6a6a9] dark:[--im-card-icon:#a7a7a7] dark:[--im-card-title:#ffffff]\",\n ios: \"[--im-card:#e9e9eb] [--im-card-fg:#8a8a8e] [--im-card-icon:#757576] [--im-card-title:#000000] dark:[--im-card:#262629] dark:[--im-card-fg:#8d8d93] dark:[--im-card-icon:#a7a7a7] dark:[--im-card-title:#ffffff]\",\n};\n\nexport function LinkPreview({ href, title, description, host, media, image, platform: platformProp, className, style, target, rel, ...props }: LinkPreviewProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = linkPreviewMetrics[platform];\n let url: URL;\n try { url = new URL(href); } catch { throw new Error(\"LinkPreview requires an absolute HTTP(S) URL.\"); }\n if (![\"https:\", \"http:\"].includes(url.protocol)) throw new Error(\"LinkPreview requires an absolute HTTP(S) URL.\");\n const hostname = host ?? url.hostname.replace(/^www\\./, \"\");\n // A plain : registry components stay framework-agnostic (pass `media` to use next/image).\n // eslint-disable-next-line @next/next/no-img-element\n const mediaNode = media ?? (image ? \"\" : null);\n const rich = Boolean(mediaNode);\n const shared = { fontFamily: fontStack, letterSpacing: 0, color: \"var(--im-card-fg)\", background: \"var(--im-card)\", borderRadius: m.radius, textDecoration: \"none\", ...style };\n if (!rich) {\n return (\n \n {hostname}\n \n \n );\n }\n return (\n \n
    {mediaNode}
    \n
    \n {title &&

    {title}

    }\n {description &&

    {description}

    }\n

    {hostname}

    \n
    \n     \n );\n}\n", "type": "registry:ui", "target": "components/imessage/link-preview.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "message-attachment", "title": "Attachment", "description": "The document card Messages draws instead of a text bubble, with the file icon, name and size, in the bubble's own shape.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/bubble-shape.json", "https://imessage.swerdlow.dev/r/platform.json" ], "files": [ { "path": "registry/imessage/message-attachment.tsx", "content": "\"use client\";\n\nimport { useId, type ComponentProps, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { bubblePath, tailBox } from \"@/components/imessage/bubble-shape\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\n\n/**\n * A file attachment message: the document card Messages draws instead of a text bubble.\n *\n * macOS numbers are measured from `references/macos/captures/attachment-not-delivered-dark-2x.png`\n * (960×640 @2x, so every pixel pair is one point):\n *\n * | Part | Measurement |\n * |---|---|\n * | Card | body 275 × 88.75 (x 17–292, y 5.5–94.4 in the crop), plus the 0.7-scale tail hanging 4.6 |\n * | Corner | best circle 14.5 (rmse 0.28 px on both top corners); the earlier 18 was off by 2.7 px |\n * | Fill | #3b3b3d dark (the incoming gray — file cards are gray in both directions) |\n * | Icon | 38.6 × 51.6 page at (22.7, 18.6) inside the card, 14 fold, 2 corner radius |\n * | Filename | 12pt semibold #f7f7f7 tracked −0.5 (ink 90.0 × 11.0, x-height 6.6), ink left 84.5, baseline 43.5 |\n * | Subtitle | 11pt #a6a6a9 tracked −0.45 (ink 128.5 × 10.0), ink left 84.0, baseline 58.5 |\n * | Failed | #eb534e ring, outer Ø 16.5, stroke 1.2; left edge 9.5 past the card, centre at 50.25 (body centre + 0.4) |\n * | Not Delivered | 10pt semibold #eb534e, ink 60.0 × 7.0, right ink edge 11.0 past the card's trailing edge |\n *\n * The corner is really a continuous one (superellipse radius 17.4, exponent 2.5, rmse 0.08 px), the same\n * shape the compact link card shows. `bubblePath` draws circular arcs so the card takes the best circle.\n * The badge and the label live in `ios-notices.tsx`; the numbers above are what they have to hit.\n *\n * `titleTop` and `subtitleTop` are the two baselines minus Chrome's baseline offset inside their line\n * boxes (12 for 12/15, 11 for 11/13), so the ink lands on the native baseline whenever the card sits on\n * whole points. A host that offsets the card by half a point (`/lab/ios-screens?scene=attachment` does,\n * through a `translateY(0.5px)`) puts the whole subtree in a composited layer whose text snaps a point at\n * a time, so every glyph and the icon land half a point off; that is the host's, not the card's.\n *\n * The iOS variant is that layout re-proportioned for the 17/13pt type world. **It is not verified\n * against a capture** — no iOS attachment frame exists in `references/` — so treat its numbers as a\n * considered guess, not a measurement.\n */\n\nconst font = \"-apple-system, BlinkMacSystemFont, sans-serif\";\n\n/**\n * macOS is measured off the dark crop. iOS keeps the same shape but takes its own measured grays, the\n * incoming bubble (#e9e9eb / #262629) and the secondary label (#8a8a8e / #8d8d93): #3b3b3d is the macOS\n * incoming gray and reads wrong beside iOS bubbles.\n */\nconst vars: Record = {\n macos:\n \"[--im-att-fill:#e9e9eb] [--im-att-title:#000000] [--im-att-subtitle:#6e6e6d] \" +\n \"dark:[--im-att-fill:#3b3b3d] dark:[--im-att-title:#f7f7f7] dark:[--im-att-subtitle:#a6a6a9]\",\n ios:\n \"[--im-att-fill:#e9e9eb] [--im-att-title:#000000] [--im-att-subtitle:#8a8a8e] \" +\n \"dark:[--im-att-fill:#262629] dark:[--im-att-title:#ffffff] dark:[--im-att-subtitle:#8d8d93]\",\n};\n\ntype AttachmentMetrics = {\n width: number; height: number; radius: number; tailScale: number;\n iconWidth: number; iconHeight: number; iconLeft: number; iconTop: number;\n textLeft: number; textRight: number;\n titleSize: number; titleLine: number; titleTop: number; titleTracking: number;\n subtitleSize: number; subtitleLine: number; subtitleTop: number; subtitleTracking: number;\n};\n\n/** macOS is measured; iOS is the same layout scaled to 17/13pt type and is unverified. */\nexport const attachmentMetrics: Record = {\n macos: {\n width: 275, height: 88.75, radius: 14.5, tailScale: 0.7,\n iconWidth: 38.6, iconHeight: 51.6, iconLeft: 22.7, iconTop: 18.6,\n textLeft: 83.75, textRight: 12,\n titleSize: 12, titleLine: 15, titleTop: 31.5, titleTracking: -0.5,\n subtitleSize: 11, subtitleLine: 13, subtitleTop: 47.5, subtitleTracking: -0.45,\n },\n ios: {\n width: 280.5, height: 100, radius: 19, tailScale: 1,\n iconWidth: 44, iconHeight: 58, iconLeft: 18, iconTop: 21,\n textLeft: 74, textRight: 14,\n titleSize: 17, titleLine: 22, titleTop: 31, titleTracking: 0,\n subtitleSize: 13, subtitleLine: 16, subtitleTop: 53, subtitleTracking: 0,\n },\n};\n\n/**\n * The page with a folded corner that macOS draws for a generic document, traced off the same crop.\n *\n * The user space is the page's own 38.6 × 51.6 box. Its top-right corner is cut at 45° over the last 14,\n * and the flap folds back onto the page as the triangle (24.6,0)–(38.6,14)–(24.6,14). Sampling the crop on\n * a grid gives a flat #f5f5f5 body shading one level per point of distance along the (1,−1) diagonal, down\n * to about #e0e0e0 at the cut; the flap runs the other way, #e7e7e7 at the cut up to #ffffff about 4.6 in,\n * and drops a short shadow along its two straight edges. The page sits on a soft shadow of its own (peak\n * alpha ≈ 0.3 at the bottom edge, gone by 3 out).\n *\n * `preserveAspectRatio=\"none\"` because the drawing is the box: any letterboxing would offset the whole\n * page by a fraction of a point against the card.\n */\nfunction DocumentIcon({ width, height }: { width: number; height: number }) {\n const id = useId();\n return (\n \n \n {/* Both ramps run along the page's (1,−1) diagonal, in the page's own coordinates. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport type MessageAttachmentProps = Omit, \"children\" | \"title\"> & {\n /** File name, e.g. \"design-notes.txt\". */\n name: string;\n /** Kind, e.g. \"Text Document\". Joined with `size` by a middle dot. */\n kind?: string;\n /** Human size, e.g. \"275 bytes\". Used alone when `kind` is absent. */\n size?: string;\n /** Overrides the whole second line. */\n subtitle?: ReactNode;\n /** Turns the card into a link. */\n href?: string;\n download?: boolean;\n onOpen?: () => void;\n direction?: \"incoming\" | \"outgoing\";\n /** The card only tails when it ends a cluster, exactly like a text bubble. */\n tail?: boolean;\n platform?: Platform;\n /** Custom artwork in place of the document page (a thumbnail, say). */\n icon?: ReactNode;\n};\n\nexport function MessageAttachment({\n name, kind, size, subtitle, href, download, onOpen,\n direction = \"outgoing\", tail = false, platform: platformProp, icon, className, style, ...props\n}: MessageAttachmentProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = attachmentMetrics[platform];\n const side = direction === \"outgoing\" ? \"right\" : \"left\";\n const hang = tailBox.hang * m.tailScale;\n const secondLine = subtitle ?? (kind && size ? `${kind} · ${size}` : (kind ?? size));\n\n const surface: CSSProperties = { background: \"var(--im-att-fill)\" };\n const Inner = href ? \"a\" : onOpen ? \"button\" : \"div\";\n const innerProps = href\n ? { href, download, target: href.startsWith(\"http\") ? \"_blank\" : undefined, rel: href.startsWith(\"http\") ? \"noreferrer\" : undefined }\n : onOpen ? { type: \"button\" as const, onClick: onOpen } : {};\n\n return (\n
    \n {/*\n Body and tail are one clipped box, not two adjacent ones. Chrome rasterises two abutting\n clip paths independently and snaps the second to a whole device pixel, which left a 1px\n hairline of the page showing along the tail's leading and top edges at 2x (the card's\n 88.75 height puts that join on a half device pixel).\n */}\n
    \n \n \n {icon ?? }\n \n \n {name}\n \n {secondLine !== undefined && (\n \n {secondLine}\n \n )}\n \n
    \n );\n}\n", "type": "registry:ui", "target": "components/imessage/message-attachment.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "conversation", "title": "Conversation", "description": "A complete, composable conversation for either platform: header, scrolling log with clusters and reactions, typing state, and a composer. Bring your own data and send handler.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/ios-composer.json", "https://imessage.swerdlow.dev/r/ios-nav-bar.json", "https://imessage.swerdlow.dev/r/macos-composer.json", "https://imessage.swerdlow.dev/r/macos-header.json", "https://imessage.swerdlow.dev/r/message-list.json", "https://imessage.swerdlow.dev/r/palette.json", "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tapback.json" ], "files": [ { "path": "registry/imessage/conversation.tsx", "content": "\"use client\";\n\nimport { useRef, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { PlatformProvider, type Platform } from \"@/components/imessage/platform\";\nimport { PaletteStyle } from \"@/components/imessage/palette\";\nimport { MessageList, type Message, type MessageListHandle } from \"@/components/imessage/message-list\";\nimport { IosNavBar } from \"@/components/imessage/ios-nav-bar\";\nimport { IosComposer } from \"@/components/imessage/ios-composer\";\nimport { MacHeader, macHeaderMetrics } from \"@/components/imessage/macos-header\";\nimport { MacComposer, macComposerMetrics } from \"@/components/imessage/macos-composer\";\nimport { Tapback, type TapbackType } from \"@/components/imessage/tapback\";\n\nexport type { Message as ConversationMessage };\n\n/**\n * What the macOS log keeps clear at the bottom. The composer's field top edge sits 42 above the pane\n * bottom (`macComposerMetrics.bottom` 11 + field height 31) and the log's content box stops 16.15 above\n * that edge. Measured in `references/macos/captures/conversation-pane-light.png` (630 x 640 pane at 2x):\n * the field's top edge is at pane y 598.0, the last bubble's body bottom at 566.85 and the \"Delivered\"\n * ink bottom at 580.5, which is where 57.2 puts them. The same number as `macScreen.listBottom` in the\n * app shell; kept local so installing `conversation` does not pull in the whole window.\n */\nconst macListBottom = macComposerMetrics.bottom + macComposerMetrics.field.height + 16.15;\n\nexport type ConversationProps = Omit, \"children\"> & {\n platform?: Platform;\n name: string;\n initials?: string;\n messages: Message[];\n typing?: boolean;\n group?: boolean;\n now?: Date | number;\n onSend?: (text: string) => void | Promise;\n onAttach?: () => void;\n onBack?: () => void;\n onVideoCall?: () => void;\n onDetails?: () => void;\n /** Called when a balloon is clicked (e.g. to remove your own reaction). */\n onReaction?: (message: Message, reaction: NonNullable[number]) => void;\n renderReactions?: (message: Message) => ReactNode;\n width?: number;\n height?: number;\n};\n\n/**\n * A complete conversation pane for either platform: header, the scrolling log with native clusters,\n * tails, date headers and reactions, and the composer. Bring your own data and send handler.\n */\nexport function Conversation({ platform = \"ios\", name, initials, messages, typing = false, group = false, now, onSend, onAttach, onBack, onVideoCall, onDetails, onReaction, renderReactions, width, height, className, style, ...props }: ConversationProps) {\n const frame = useRef(null);\n const list = useRef(null);\n const ios = platform === \"ios\";\n const reactions = renderReactions ?? ((message: Message) => message.reactions?.length ? (\n
    \n {message.reactions.map((reaction, index) => (\n onReaction(message, reaction) : undefined} />\n ))}\n
    \n ) : undefined);\n const size = { width: width ?? (ios ? 402 : 630), height: height ?? (ios ? 760 : 640) };\n return (\n \n \n
    \n \n {ios ? (\n <>\n \n {onSend && }\n \n ) : (\n <>\n \n {onSend && }\n \n )}\n
    \n     \n );\n}\n", "type": "registry:component", "target": "components/imessage/conversation.tsx" } ], "type": "registry:block" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "message-motion", "title": "Message motion", "description": "The measured send and receive animations, seekable so a harness can scrub them.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/bubble-shape.json", "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/message-motion.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useLayoutEffect, useRef, type ComponentProps, type RefObject } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { bubblePath, tailBox } from \"@/components/imessage/bubble-shape\";\nimport { bubbleMetrics } from \"@/components/imessage/tokens\";\nimport type { Platform } from \"@/components/imessage/platform\";\n\n/**\n * Motion engine for the message list. Everything is built on the Web Animations API so a running\n * animation can be paused and scrubbed with `seek(ms)`, which is how the lab captures frames for\n * comparison with the 60 fps native recording (references/ios/motion/).\n *\n * Send timeline, re-measured frame by frame from `references/ios/motion/send-60fps.mp4`. Frames are the\n * 0-based output of `ffmpeg -vsync 0 -start_number 0` (299 frames, 60 fps), so t = (f - 73) / 60 s: f68 to\n * f72 differ by at most 2 in any channel and every one of them paints the blue send button (3321 px with\n * B - R > 80 in an 80 x 65 box over it; f73 has none), so f73 is the first animated frame and t = 0. The\n * contact sheets in that folder are 1-based on the same clip - their \"f74\" is this file's f73 - and the\n * times this file used to carry were read from f71, two frames (33 ms) early of the first frame that moves.\n * - 0 ms (f73): the text row is *already* a tinted rounded rect, tail and all, over exactly the field's text\n * box; the send button is already gone and the placeholder is already at full strength (its darkest glyph\n * luma is 170.5 here and 175.9 once the rect has passed, over backgrounds of 232.6 and 253.0).\n * - 17 to 150 ms: the rect collapses toward the field's right end. Widths, pt: 292 (f73), 294 (f74), 272\n * (f75), 252, 226, 195, 154 (f79), 123 (f80), 98, 82, 68 (f84). f74 is still full width, so the collapse\n * starts between 17 and 33 ms. Native keeps shrinking past the bubble's own size to 0.772 at 183 ms; the\n * clone cannot hold a scale above 1, so the rect carries the shape to 150 ms, where the scale crosses 1.\n * - 33 ms on: the bubble leaves the field on a spring released from rest. Fitted over f84 to f133 with the\n * amplitude pinned to the geometric travel (127.1 pt), damping 0.73 and 11.9 rad/s reproduces the body's\n * bottom edge to 0.28 pt rms / 0.77 pt worst over 50 frames; the old 0.8 and 15 rad/s from 103 ms misses\n * by 9.6 pt rms / 35 pt worst. Scale recovers on a second, slower spring released 10 ms past the minimum.\n * - The bubble overshoots: its tail corner passes 5.0 pt above the slot at 417 ms (f98) and falls back,\n * inside 0.25 pt of rest at 633 ms (f111) and settled by 690 ms (f114). Scale is done by ~500 ms flat.\n *\n * Measured \"Hi there\" body tops, recording/this model (402x874 screen, slot top 686.8/687.25): 150 ms\n * 760.8/763.2, 233 ms 717.6/718.0, 317 ms 691.8/692.9, 350 ms 686.9/688.0. f83 duplicates f82, so 167 ms\n * is a repeat. At 1017 ms (f134) \"Delivered\" moves off the bubble above and the slot rises 15 pt to 671.75.\n */\nexport const messageMotion = {\n /** Legacy tokens kept for the harness and pressable-message. */\n arrival: 420,\n delivery: 900,\n reaction: 320,\n press: 120,\n longPress: 500,\n send: {\n morph: 17, liftoff: 33, shrink: 150, duration: 690,\n textReveal: 25, textVisible: 70,\n /** The placeholder is already at full strength in f73, so it holds rather than fading in. */\n placeholderIn: 0, tint: 0.55,\n /** In-flight scale: the bubble flies at (1 - squash) of its size and grows back on `growSpring`. */\n squash: 0.228, grow: 193,\n spring: { damping: 0.73, frequency: 11.9 },\n growSpring: { damping: 0.8, frequency: 13.1 },\n },\n receive: { duration: 300, fade: 80, startScale: 0.5, spring: { damping: 0.7, frequency: 30 } },\n reduced: { duration: 200 },\n} as const;\n\nexport type MotionHandle = {\n duration: number;\n /** Pause every animation and jump to `ms`. */\n seek(ms: number): void;\n play(): void;\n pause(): void;\n /** Stop and remove any helper elements. */\n cancel(): void;\n /** Resolves when the animation finishes (or is cancelled). */\n finished: Promise;\n readonly animations: Animation[];\n};\n\nexport function prefersReducedMotion(): boolean {\n return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/**\n * Remaining offset (as a fraction of the start offset) of an underdamped spring released from rest,\n * `t` in seconds. With the send spring's damping 0.73 and 11.9 rad/s the first overshoot is 3.5% of the\n * travel 386 ms after release, 3.8% once `offsetAt` normalises it: 4.9 pt of the send's 127.1 pt travel at\n * 419 ms, which is the 5.0 pt at 417 ms (f98) that the recording overshoots its slot by.\n */\nexport function springOffset(t: number, damping: number, frequency: number): number {\n if (t <= 0) return 1;\n const root = Math.sqrt(1 - damping * damping);\n const wd = frequency * root;\n return Math.exp(-damping * frequency * t) * (Math.cos(wd * t) + (damping / root) * Math.sin(wd * t));\n}\n\ntype Rect = { left: number; top: number; width: number; height: number };\n\nfunction makeHandle(animations: Animation[], duration: number, cleanup: () => void, paused: boolean | undefined, tick?: (ms: number) => void): MotionHandle {\n if (paused) animations.forEach(a => a.pause());\n let done = false;\n let raf = 0;\n const finish = () => { if (done) return; done = true; cancelAnimationFrame(raf); cleanup(); animations.forEach(a => { try { a.cancel(); } catch { /* already gone */ } }); };\n const finished = Promise.all(animations.map(a => a.finished.catch(() => undefined))).then(finish);\n const loop = () => {\n raf = 0;\n if (done || !tick) return;\n const t = Number(animations[0]?.currentTime ?? 0);\n tick(Math.max(0, Math.min(duration, t)));\n if (animations[0]?.playState === \"running\") raf = requestAnimationFrame(loop);\n };\n if (tick && !paused) raf = requestAnimationFrame(loop);\n return {\n duration,\n animations,\n finished,\n // Once `finish` has run the helper elements are gone, so every control is inert from then on:\n // a late seek or play would otherwise drive animations whose targets are no longer in the page.\n seek(ms) { if (done) return; const t = Math.max(0, Math.min(duration, ms)); animations.forEach(a => { a.pause(); a.currentTime = t; }); tick?.(t); },\n play() { if (done) return; animations.forEach(a => a.play()); if (tick && !raf) raf = requestAnimationFrame(loop); },\n pause() { if (done) return; animations.forEach(a => a.pause()); },\n cancel() { finish(); },\n };\n}\n\nfunction hexToRgb(hex: string): [number, number, number] | null {\n const h = hex.trim().replace(\"#\", \"\");\n if (h.length === 3) return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];\n if (h.length === 6) return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];\n return null;\n}\n\n/** Solid color of the bubble's screen-space gradient at screen y `bottom` (px from the frame top). */\nfunction fillAt(body: HTMLElement, bottom: number): string {\n const cs = getComputedStyle(body);\n const top = hexToRgb(cs.getPropertyValue(\"--im-fill-top\"));\n const end = hexToRgb(cs.getPropertyValue(\"--im-fill-bottom\"));\n const screen = parseFloat(cs.getPropertyValue(\"--im-screen-h\")) || 874;\n if (!top || !end) return cs.backgroundColor;\n const k = Math.max(0, Math.min(1, bottom / screen));\n const c = top.map((v, i) => Math.round(v + (end[i] - v) * k));\n return `rgb(${c[0]}, ${c[1]}, ${c[2]})`;\n}\n\nfunction visibleText(body: HTMLElement): string {\n return Array.from(body.childNodes).map(node => (node instanceof HTMLElement && node.classList.contains(\"sr-only\") ? \"\" : node.textContent ?? \"\")).join(\"\").trim();\n}\n\nexport type SendAnimationOptions = {\n /** The element that represents the device screen. The transient ghost is appended to it, so it needs `position: relative`. */\n frame: HTMLElement;\n /** The composer text field's rect in viewport coordinates (from getBoundingClientRect). */\n field: Rect;\n /** The new message's `[data-slot=\"message-bubble\"]` element (already laid out in its final slot). */\n bubble: HTMLElement;\n /** Composer placeholder to fade in while the rect shrinks. */\n placeholder?: HTMLElement | null;\n /** Composer send button to hide in the first 17 ms. */\n sendButton?: HTMLElement | null;\n /** Text drawn inside the shrinking rect; defaults to the bubble's text. */\n text?: string;\n /** Corner radius of the composer field; the rect starts as that shape. Defaults to a pill. */\n fieldRadius?: number;\n /**\n * Where the shrinking rect is drawn. Native draws it inside the field, under the placeholder, so pass the\n * field element (a positioned one) to get that layering; it is added as the first child. Defaults to `frame`.\n */\n ghostParent?: HTMLElement | null;\n /** Start paused so the caller can `seek`. */\n paused?: boolean;\n reducedMotion?: boolean;\n};\n\nconst lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\nexport function playSendAnimation(o: SendAnimationOptions): MotionHandle {\n const S = messageMotion.send;\n const reduced = o.reducedMotion ?? prefersReducedMotion();\n if (reduced) {\n const D = messageMotion.reduced.duration;\n const a = o.bubble.animate([{ opacity: 0 }, { opacity: 1 }], { duration: D, fill: \"both\", easing: \"ease-out\" });\n const b = o.placeholder ? [o.placeholder.animate([{ opacity: 0 }, { opacity: 1 }], { duration: D, fill: \"both\" })] : [];\n return makeHandle([a, ...b], D, () => undefined, o.paused);\n }\n const D = S.duration;\n const at = (ms: number) => ms / D;\n const timing: KeyframeAnimationOptions = { duration: D, fill: \"both\", easing: \"linear\" };\n const body = o.bubble.querySelector('[data-slot=\"bubble\"], [data-slot=\"emoji\"]') ?? o.bubble;\n const platform = (o.bubble.dataset.platform ?? \"ios\") as Platform;\n const m = bubbleMetrics[platform];\n const side = o.bubble.dataset.direction === \"incoming\" ? \"left\" : \"right\";\n const frameRect = o.frame.getBoundingClientRect();\n const slot = body.getBoundingClientRect();\n const fx = o.field.left - frameRect.left, fy = o.field.top - frameRect.top, fw = o.field.width, fh = o.field.height;\n const bw = slot.width, bh = slot.height;\n const sx = slot.left - frameRect.left, sy = slot.top - frameRect.top;\n const gx = side === \"right\" ? fx + fw - bw : fx, gy = fy + (fh - bh) / 2;\n const dx = gx - sx, dy = gy - sy;\n const cs = getComputedStyle(body);\n\n // Two springs, both released from rest and both normalised so they land exactly on the slot at `duration`\n // (without that the last keyframe would step by ~0.5 pt). `offsetAt` is the fraction of the travel still\n // to go; `scaleAt` is the uniform scale, anchored at the bubble's tail corner so that corner flies alone.\n const P = S.spring, G = S.growSpring;\n const kEnd = springOffset((D - S.liftoff) / 1000, P.damping, P.frequency);\n const gEnd = springOffset((D - S.grow) / 1000, G.damping, G.frequency);\n const offsetAt = (ms: number) => (springOffset((ms - S.liftoff) / 1000, P.damping, P.frequency) - kEnd) / (1 - kEnd);\n const scaleAt = (ms: number) => 1 - S.squash * (springOffset((ms - S.grow) / 1000, G.damping, G.frequency) - gEnd) / (1 - gEnd);\n /** Where the flying bubble's box sits at `ms`, in frame coordinates. */\n const flightBox = (ms: number) => {\n const k = offsetAt(ms), scale = scaleAt(ms);\n const width = bw * scale, height = bh * scale;\n const bottom = sy + bh + dy * k;\n const left = side === \"right\" ? sx + bw + dx * k - width : sx + dx * k;\n return { left, top: bottom - height, width, height, scale };\n };\n\n // Phase 1: the field's text row becomes a bubble-shaped rect and shrinks toward the field's sending end.\n // It ends exactly on the flying bubble's box at `shrink`, so the hand-over is invisible.\n const ghost = document.createElement(\"div\");\n ghost.dataset.slot = \"send-ghost\";\n ghost.setAttribute(\"aria-hidden\", \"true\");\n Object.assign(ghost.style, {\n position: \"absolute\", left: \"0px\", top: \"0px\", boxSizing: \"border-box\",\n background: fillAt(body, fy + fh), pointerEvents: \"none\",\n // Inside the field it paints in DOM order, under the placeholder; over the frame it needs to be lifted.\n zIndex: o.ghostParent ? \"auto\" : \"30\",\n // A transient element must never become a scroll anchor: scrubbing rebuilds it every frame, and each\n // insert and remove would otherwise let scroll anchoring nudge whatever scroller contains it.\n overflowAnchor: \"none\",\n } satisfies Partial);\n const tint = document.createElement(\"div\");\n Object.assign(tint.style, { position: \"absolute\", inset: \"0\", background: \"#ffffff\", opacity: String(S.tint) });\n const label = document.createElement(\"div\");\n label.textContent = o.text ?? visibleText(body);\n Object.assign(label.style, {\n position: \"absolute\", [side]: \"0\", top: \"0\", width: `${bw}px`, height: `${bh}px`, boxSizing: \"border-box\",\n padding: cs.padding, transformOrigin: `${side} top`,\n font: cs.font, letterSpacing: cs.letterSpacing, lineHeight: cs.lineHeight, color: cs.color, whiteSpace: \"nowrap\", overflow: \"hidden\", opacity: \"0\",\n textAlign: bw <= parseFloat(cs.minWidth || \"0\") + 0.5 ? \"center\" : \"start\",\n });\n ghost.append(tint, label);\n const ghostParent = o.ghostParent ?? o.frame;\n // Under the field's own text, but above whatever paints the field itself (a glass stack, a background).\n const editor = ghostParent.querySelector(\"textarea, input, [contenteditable]\");\n ghostParent.insertBefore(ghost, editor?.parentElement === ghostParent ? editor : ghostParent.firstChild);\n // The keyframes below are in frame coordinates; shift them if the rect lives inside the field instead.\n const ox = ghostParent === o.frame ? 0 : ghostParent.getBoundingClientRect().left - frameRect.left;\n const oy = ghostParent === o.frame ? 0 : ghostParent.getBoundingClientRect().top - frameRect.top;\n\n const fieldRadius = o.fieldRadius ?? fh / 2;\n const shape: Keyframe[] = [];\n const labelScale: Keyframe[] = [];\n for (let ms = 0; ms <= S.shrink; ms = Math.min(S.shrink, ms + 5)) {\n const p = Math.max(0, Math.min(1, (ms - S.morph) / (S.shrink - S.morph)));\n const b = flightBox(ms);\n const width = lerp(fw, b.width, p), height = lerp(fh, b.height, p);\n const tailScale = m.tailScale * lerp(1, b.scale, p);\n shape.push({\n offset: at(ms), opacity: ms < S.morph ? at(ms) / at(S.morph) : 1,\n left: `${(lerp(fx, b.left, p) - ox).toFixed(2)}px`, top: `${(lerp(fy, b.top, p) - oy).toFixed(2)}px`,\n width: `${width.toFixed(2)}px`, height: `${(height + tailBox.hang * tailScale).toFixed(2)}px`,\n clipPath: `path(\"${bubblePath(width, height, side, lerp(fieldRadius, m.radius * b.scale, p), tailScale)}\")`,\n });\n labelScale.push({ offset: at(ms), transform: `scale(${lerp(1, b.scale, p).toFixed(4)})` });\n if (ms >= S.shrink) break;\n }\n const settled = { ...shape[shape.length - 1], offset: undefined } as Keyframe;\n const animations: Animation[] = [\n ghost.animate([...shape, { ...settled, offset: at(S.shrink) + 0.002, opacity: 0 }, { ...settled, offset: 1, opacity: 0 }], timing),\n tint.animate([{ offset: 0, opacity: S.tint }, { offset: at(S.morph), opacity: S.tint }, { offset: at(S.shrink), opacity: 0 }, { offset: 1, opacity: 0 }], timing),\n label.animate(labelScale.map(frame => ({ ...frame, opacity: labelOpacity(Number(frame.offset) * D, S) })), timing),\n ];\n\n // Phase 2: the flight is flown by a clone of the bubble in the frame's overlay layer, so it passes over the\n // composer the way the native bubble does (at 133 ms the recording draws its tail across the field's pill);\n // the real bubble stays invisible in its slot until the clone lands.\n const rootRect = o.bubble.getBoundingClientRect();\n const clone = o.bubble.cloneNode(true) as HTMLElement;\n clone.dataset.slot = \"send-clone\";\n clone.setAttribute(\"aria-hidden\", \"true\");\n clone.querySelectorAll(\"[id]\").forEach(el => el.removeAttribute(\"id\"));\n Object.assign(clone.style, {\n position: \"absolute\", left: `${rootRect.left - frameRect.left}px`, top: `${rootRect.top - frameRect.top}px`, width: `${rootRect.width}px`,\n margin: \"0\", pointerEvents: \"none\", zIndex: \"31\", opacity: \"0\", overflowAnchor: \"none\",\n // The tail corner is the anchor: it flies alone and the rest of the bubble unfolds from it.\n transformOrigin: `${((side === \"right\" ? slot.right : slot.left) - rootRect.left).toFixed(2)}px ${(slot.bottom - rootRect.top).toFixed(2)}px`,\n });\n // `cloneNode` copies declarations but not the palette the bubble inherits, so resolve it onto the clone.\n // It then paints the measured gradient wherever it is appended, not only under the element that\n // happens to declare `--im-*` today (both shells append it inside that element; this stops depending on it).\n for (const property of Array.from(cs)) if (property.startsWith(\"--im-\")) clone.style.setProperty(property, cs.getPropertyValue(property));\n const realFrame = o.bubble.querySelector('[data-slot=\"bubble-frame\"]');\n const cloneFrame = clone.querySelector('[data-slot=\"bubble-frame\"]');\n if (realFrame && cloneFrame) { cloneFrame.style.width = `${realFrame.getBoundingClientRect().width}px`; cloneFrame.style.maxWidth = \"none\"; }\n o.frame.appendChild(clone);\n\n const transformAt = (ms: number) => `translate(${(dx * offsetAt(ms)).toFixed(2)}px, ${(dy * offsetAt(ms)).toFixed(2)}px) scale(${scaleAt(ms).toFixed(4)})`;\n const flight: Keyframe[] = [{ offset: 0, transform: transformAt(0) }, { offset: at(S.shrink) - 0.002, transform: transformAt(S.shrink) }];\n for (let ms = S.shrink; ms < D; ms += 5) flight.push({ offset: at(ms), transform: transformAt(ms) });\n flight.push({ offset: 1, transform: \"translate(0px, 0px) scale(1)\" });\n animations.push(clone.animate(flight, timing));\n // The clone and the real bubble swap places with a step, not a crossfade, so at `duration` (and at\n // progress 1, which never runs `cleanup` because a seeked animation never finishes) exactly one of\n // them is painted and the frame equals the settled layout. A ramp here would let a scrub land on a\n // frame with both of them half opaque, which reads as a lighter, doubled bubble.\n animations.push(clone.animate([{ offset: 0, opacity: 0 }, { offset: at(S.shrink) - 0.002, opacity: 0 }, { offset: at(S.shrink), opacity: 1, easing: \"step-end\" }, { offset: 1, opacity: 0 }], timing));\n animations.push(o.bubble.animate([{ offset: 0, opacity: 0, easing: \"step-end\" }, { offset: 1, opacity: 1 }], timing));\n // f73 already draws the placeholder at full strength behind the rect (hence `placeholderIn: 0`), so it is\n // held up for the whole flight rather than faded in; it is animated only so the handle owns its opacity.\n if (o.placeholder) animations.push(o.placeholder.animate([{ offset: 0, opacity: 1 }, { offset: 1, opacity: 1 }], timing));\n if (o.sendButton) animations.push(o.sendButton.animate([{ offset: 0, opacity: 1 }, { offset: at(S.morph), opacity: 0 }, { offset: 1, opacity: 0 }], timing));\n // Keep the clone's screen-space fill honest while it climbs (the body's bottom edge moves through the gradient).\n const tick = (ms: number) => clone.style.setProperty(\"--bubble-bottom\", `${(sy + bh + dy * offsetAt(ms)).toFixed(2)}px`);\n tick(0);\n return makeHandle(animations, D, () => { ghost.remove(); clone.remove(); }, o.paused, tick);\n}\n\n/** The message text fades in inside the shrinking rect as it takes the bubble's shape. */\nfunction labelOpacity(ms: number, S: typeof messageMotion.send): number {\n if (ms <= S.textReveal) return 0;\n if (ms >= S.textVisible) return 1;\n return (ms - S.textReveal) / (S.textVisible - S.textReveal);\n}\n\nexport type ReceiveAnimationOptions = {\n /** The new incoming message's `[data-slot=\"message-bubble\"]` element. */\n bubble: HTMLElement;\n /** Where the bubble pops from (the typing indicator's rect, viewport coordinates). Defaults to just below the slot. */\n from?: Rect | null;\n paused?: boolean;\n reducedMotion?: boolean;\n};\n\nexport function playReceiveAnimation(o: ReceiveAnimationOptions): MotionHandle {\n const R = messageMotion.receive;\n const reduced = o.reducedMotion ?? prefersReducedMotion();\n if (reduced) {\n const D = messageMotion.reduced.duration;\n return makeHandle([o.bubble.animate([{ opacity: 0 }, { opacity: 1 }], { duration: D, fill: \"both\", easing: \"ease-out\" })], D, () => undefined, o.paused);\n }\n const D = R.duration;\n const body = o.bubble.querySelector('[data-slot=\"bubble\"], [data-slot=\"emoji\"]') ?? o.bubble;\n const slot = body.getBoundingClientRect();\n const dx = o.from ? o.from.left - slot.left : 0;\n const dy = o.from ? o.from.top + o.from.height - (slot.top + slot.height) : 8;\n // The corner it grows from rides in the keyframes rather than in the element's own style: a seeked\n // animation never finishes, so a cleanup that restored an inline `transform-origin` would never run.\n const transformOrigin = o.bubble.dataset.direction === \"outgoing\" ? \"right bottom\" : \"left bottom\";\n const frames: Keyframe[] = [];\n for (let ms = 0; ms <= D; ms += 5) {\n const k = springOffset(ms / 1000, R.spring.damping, R.spring.frequency);\n const p = 1 - k;\n const scale = R.startScale + (1 - R.startScale) * p;\n frames.push({ offset: ms / D, opacity: Math.min(1, ms / R.fade), transformOrigin, transform: `translate(${(dx * k).toFixed(2)}px, ${(dy * k).toFixed(2)}px) scale(${scale.toFixed(4)})` });\n }\n frames.push({ offset: 1, opacity: 1, transformOrigin, transform: \"translate(0px, 0px) scale(1)\" });\n const animation = o.bubble.animate(frames, { duration: D, fill: \"both\", easing: \"linear\" });\n return makeHandle([animation], D, () => undefined, o.paused);\n}\n\n/** Runs the send animation for a freshly rendered outgoing bubble. Cancels on unmount and when a new send starts. */\nexport function useSendAnimation() {\n const current = useRef(null);\n useEffect(() => () => current.current?.cancel(), []);\n const play = useCallback((options: SendAnimationOptions) => {\n current.current?.cancel();\n const handle = playSendAnimation(options);\n current.current = handle;\n void handle.finished.then(() => { if (current.current === handle) current.current = null; });\n return handle;\n }, []);\n return { play, current };\n}\n\n/** Pops a freshly rendered incoming bubble in from the typing indicator's position. */\nexport function useReceiveAnimation() {\n const current = useRef(null);\n useEffect(() => () => current.current?.cancel(), []);\n const play = useCallback((options: ReceiveAnimationOptions) => {\n current.current?.cancel();\n const handle = playReceiveAnimation(options);\n current.current = handle;\n void handle.finished.then(() => { if (current.current === handle) current.current = null; });\n return handle;\n }, []);\n return { play, current };\n}\n\n/** One message's arrival: `progress` (0 to 1) seeks the animation instead of playing it. */\nexport type ArrivalAnimation = { id: string; progress?: number };\n\nexport type ArrivalAnimationOptions = {\n /** The device frame (iOS) or window pane (macOS); the flying copy is added to it. */\n frame: RefObject;\n /** The message that was just sent: the composer's text row becomes that bubble and flies to its slot. */\n send?: ArrivalAnimation | null;\n /** The message that just arrived: it pops in from the typing indicator's position. */\n receive?: ArrivalAnimation | null;\n /** Called when a played (not seeked) send animation finishes. */\n onSendEnd?: () => void;\n};\n\n/**\n * Drives the send and receive animations for the app shells: give it the frame and the id of the message\n * that just arrived and it finds the bubble, the composer field and the typing indicator itself.\n */\nexport function useArrivalAnimation({ frame, send, receive, onSendEnd }: ArrivalAnimationOptions) {\n const running = useRef(null);\n // Kept in a ref so a fresh inline callback cannot restart a flight that is already in the air.\n const end = useRef(onSendEnd);\n useEffect(() => { end.current = onSendEnd; }, [onSendEnd]);\n const sendId = send?.id ?? null, sendProgress = send?.progress;\n const receiveId = receive?.id ?? null, receiveProgress = receive?.progress;\n\n useLayoutEffect(() => {\n const root = frame.current;\n if (!root || !sendId) return;\n const bubble = root.querySelector(`[data-message-id=\"${CSS.escape(sendId)}\"] [data-slot=\"message-bubble\"]`);\n const field = root.querySelector('[data-slot=\"field\"]');\n if (!bubble || !field) return;\n running.current?.cancel();\n const handle = playSendAnimation({\n frame: root, field: field.getBoundingClientRect(), bubble, ghostParent: field,\n sendButton: field.querySelector('[data-slot=\"send\"]'),\n fieldRadius: parseFloat(getComputedStyle(field).borderTopLeftRadius) || undefined,\n paused: sendProgress !== undefined,\n });\n running.current = handle;\n if (sendProgress === undefined) void handle.finished.then(() => { if (running.current === handle) { running.current = null; end.current?.(); } });\n else handle.seek(Math.max(0, Math.min(1, sendProgress)) * handle.duration);\n return () => { handle.cancel(); if (running.current === handle) running.current = null; };\n }, [frame, sendId, sendProgress]);\n\n useLayoutEffect(() => {\n const root = frame.current;\n if (!root || !receiveId) return;\n const bubble = root.querySelector(`[data-message-id=\"${CSS.escape(receiveId)}\"] [data-slot=\"message-bubble\"]`);\n if (!bubble) return;\n running.current?.cancel();\n const indicator = root.querySelector('[data-slot=\"typing-indicator\"]');\n const handle = playReceiveAnimation({ bubble, from: indicator?.getBoundingClientRect() ?? null, paused: receiveProgress !== undefined });\n running.current = handle;\n if (receiveProgress !== undefined) handle.seek(Math.max(0, Math.min(1, receiveProgress)) * handle.duration);\n return () => { handle.cancel(); if (running.current === handle) running.current = null; };\n }, [frame, receiveId, receiveProgress]);\n\n useEffect(() => () => running.current?.cancel(), []);\n}\n\n/** Progress-driven arrival wrapper kept for the harness: `progress` 0..1 maps onto the receive spring. */\nexport function MessageMotion({ progress = 1, direction = \"incoming\", className, style, ...props }: ComponentProps<\"div\"> & { progress?: number; direction?: \"incoming\" | \"outgoing\" }) {\n const t = Math.max(0, Math.min(1, progress));\n const k = springOffset((t * messageMotion.receive.duration) / 1000, messageMotion.receive.spring.damping, messageMotion.receive.spring.frequency);\n const p = t >= 1 ? 1 : 1 - k;\n const scale = messageMotion.receive.startScale + (1 - messageMotion.receive.startScale) * p;\n return
    = 1 ? undefined : `translateY(${((1 - p) * (direction === \"outgoing\" ? 30 : 12)).toFixed(2)}px) scale(${scale.toFixed(4)})`, ...style }} {...props} />;\n}\n", "type": "registry:ui", "target": "components/imessage/message-motion.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "facetime-card", "title": "FaceTime card", "description": "A FaceTime link card in the native card style, plus the call states an application may want to show around it.", "registryDependencies": [ "https://imessage.swerdlow.dev/r/platform.json", "https://imessage.swerdlow.dev/r/tokens.json" ], "files": [ { "path": "registry/imessage/facetime-card.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { usePlatform, type Platform } from \"@/components/imessage/platform\";\nimport { fontStack } from \"@/components/imessage/tokens\";\n\n/**\n * A FaceTime link shared into a conversation, and the call states an app may want to show around it.\n *\n * Messages does not render a live call inline: an active FaceTime call lives in its own window, and\n * call history lives in the Phone and FaceTime apps. What genuinely appears in a transcript is a\n * FaceTime *link* card, which SPEC.md records as \"the same gray card as a link preview\".\n *\n * **No capture in this repo shows a FaceTime card, in either state.** Nothing below was measured off\n * one. What the card does inherit is the link card's own measured geometry, so that \"the same gray\n * card\" is true of the pixels and not only of the prose (`references/macos/captures/conversation-pane-light.png`,\n * via `link-preview.tsx`): the fill #e9e9eb light / #3b3b3d dark, the 14 radius, the 10 side padding,\n * and the caption at 10pt on a 12pt pitch in #808084 / #a6a6a9. iOS takes the same parts from the\n * numbers iOS itself measures, exactly as `link-preview.tsx` does: the 19 bubble radius, the 280.5\n * widest bubble, the incoming gray, and the secondary label. Everything else here is invented: the\n * icon, the greens and the red, the button, and every gap. The four states other than `invitation`\n * are app surfaces, not reproductions of a native element. Do not quote any of it as measured.\n */\nexport type FaceTimeState = \"invitation\" | \"ringing\" | \"connected\" | \"ended\" | \"missed\";\n\ntype Metrics = { width: number; radius: number; padX: number; padY: number; icon: number; iconRadius: number; title: number; titleLine: number; sub: number; subLine: number; gap: number; button: number; buttonText: number; rowGap: number };\n\nconst metrics: Record = {\n ios: { width: 280.5, radius: 19, padX: 14, padY: 12, icon: 44, iconRadius: 11, title: 17, titleLine: 20, sub: 14, subLine: 17, gap: 11, button: 36, buttonText: 15, rowGap: 12 },\n macos: { width: 240, radius: 14, padX: 10, padY: 10, icon: 34, iconRadius: 8.5, title: 13, titleLine: 16, sub: 10, subLine: 12, gap: 9, button: 28, buttonText: 12, rowGap: 9 },\n};\n\n/**\n * The link card's fill and caption colour, copied from `link-preview.tsx` so the two cards match.\n * macOS is measured off the apple.com card; iOS swaps in its own measured incoming gray and secondary\n * label, because #3b3b3d is the macOS gray and reads wrong beside iOS bubbles.\n */\nconst cardVars: Record = {\n macos: \"[--im-card:#e9e9eb] [--im-card-fg:#808084] [--im-card-title:#000000] dark:[--im-card:#3b3b3d] dark:[--im-card-fg:#a6a6a9] dark:[--im-card-title:#ffffff]\",\n ios: \"[--im-card:#e9e9eb] [--im-card-fg:#8a8a8e] [--im-card-title:#000000] dark:[--im-card:#262629] dark:[--im-card-fg:#8d8d93] dark:[--im-card-title:#ffffff]\",\n};\n\n/** Unverified: no capture holds a FaceTime card, so these are the system colours, not measured ones. */\nconst facetimeGreen = \"#30c653\";\nconst missedRed = \"#ff453a\";\n\nfunction VideoGlyph({ size }: { size: number }) {\n // SF Symbol \"video.fill\": a rounded rectangle body with a wedge lens on the trailing side.\n return (\n \n \n \n \n );\n}\n\nexport type FaceTimeCardProps = Omit, \"children\"> & {\n state?: FaceTimeState;\n /** Shown while connected, e.g. \"12:04\". */\n duration?: string;\n /** Line under the title. Defaults to a sensible label for the state. */\n caption?: string;\n onJoin?: () => void;\n onEnd?: () => void;\n platform?: Platform;\n};\n\nexport function FaceTimeCard({ state = \"invitation\", duration = \"00:00\", caption, onJoin, onEnd, platform: platformProp, className, style, ...props }: FaceTimeCardProps) {\n const contextPlatform = usePlatform();\n const platform = platformProp ?? contextPlatform;\n const m = metrics[platform];\n const active = state === \"connected\" || state === \"ringing\";\n const missed = state === \"missed\";\n const label = caption ?? (state === \"invitation\" ? \"FaceTime Link\" : state === \"ringing\" ? \"Calling\" : state === \"connected\" ? duration : missed ? \"Missed FaceTime\" : \"FaceTime ended\");\n const action = active ? onEnd : onJoin;\n const actionLabel = active ? \"Leave\" : state === \"invitation\" ? \"Join\" : \"Call Back\";\n // The button's visible word is one syllable; out of context it needs to say what it calls.\n const actionName = active ? \"Leave the FaceTime call\" : state === \"invitation\" ? \"Join the FaceTime call\" : \"Call back on FaceTime\";\n const card: CSSProperties = {\n width: m.width, maxWidth: \"100%\", borderRadius: m.radius, padding: `${m.padY}px ${m.padX}px`,\n background: \"var(--im-card)\", color: \"var(--im-card-title)\", fontFamily: fontStack,\n };\n return (\n
    \n
    \n \n \n \n \n FaceTime\n {/* A live region only while the call is one: \"FaceTime Link\" is a caption, not an update. */}\n {label}\n \n
    \n {action && (\n \n )}\n
    \n );\n}\n", "type": "registry:ui", "target": "components/imessage/facetime-card.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "avatar", "title": "Avatar", "description": "Initials on the measured Messages gradient, a photo, or the generic silhouette, at native sizes.", "files": [ { "path": "registry/imessage/avatar.tsx", "content": "import type { ComponentProps, CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Contact avatar: initials over the native gray-blue gradient, a photo, or the generic silhouette.\n *\n * **Fill.** A vertical linear gradient across the circle's own box: light #a9c2e1 → #747fb9, dark\n * #575368 → #302649. Fitted to the Ø45 row avatars in `references/ios/captures/list-light.png` and\n * `list-dark.png`, and re-fitted independently to the Ø60 nav-bar avatar in `conv3-light.png`, which\n * returns the same endpoints (max residual 0.7/255 against a straight line). The gradient does not\n * change with the circle's size.\n *\n * **Initials.** White, weight 600, at **7/15 of the diameter** (0.4667). Three diameters in the\n * captures pin that ratio, and Chrome reproduces each one's ink exactly:\n *\n * | Where | Ø | Type | Native ink | Chrome at 3x |\n * |---|---|---|---|---|\n * | List row (`list-light.png`), circle x 26-71 y 188-233 | 45 | 21 | \"JA\" 24.67 wide, cap 15.00, ink top 15.33 below the circle | 24.67 wide, ink top 15.33 |\n * | Nav bar (`conv3-light.png`), circle x 171-231 y 62-122 | 60 | 28 | \"JA\" 32.67 wide, cap 19.67, ink top 20.33 below the circle | 33.00 wide, ink top 20.67 |\n * | Details (`details-light.png`), circle x 161-241 y 62-142 | 80 | 37.33 | \"JA\" 44.00 wide, cap 26.67, ink top 27.00 below the circle | 44.00 wide, ink top 27.00 |\n *\n * Chrome rasterises the caps one to two device px taller than the simulator, so no offset can land both\n * edges. `translateY(0.02em)` puts the ink *top* on native at Ø45 and Ø80 and one device px low at Ø60,\n * which no other offset beats; the ink then hangs a device px below native. Diffed against the captures\n * that hold an avatar, that leaves 0.74% of Ø45 \"JA\", 0.62% of Ø45 \"KB\" and 0.50% of Ø80 \"JA\" mismatched,\n * all of it glyph edges: the circle and the gradient are exact.\n *\n * **Photo.** A plain circular clip, no rim and no shadow: measured on the Ø40 macOS header avatar in\n * `references/macos/captures/conversation-pane-light.png` (x 592-671, y 16-95 at 2x = 40.0 square).\n *\n * **Silhouette: unverified.** No committed capture has a contact without initials or a photo, so the\n * glyph's proportions are drawn from the SF Symbol, not measured. Do not quote them as measured.\n *\n * `ios-nav-bar.tsx`, `ios-conversation-list.tsx` and `ios-details.tsx` each draw their own circle with\n * their own copy of these values instead of importing this component.\n */\nexport type AvatarSize = 40 | 45 | 60 | 72 | 80 | number;\n\nexport type AvatarProps = Omit, \"children\"> & {\n size?: AvatarSize;\n /** One or two letters. Ignored when `src` is set. */\n initials?: string;\n /** Photo variant. */\n src?: string;\n /** Accessible name; falls back to the initials. */\n name?: string;\n};\n\n/** Initials type size for a circle of `size`: the measured 7/15 of the diameter (45 → 21, 60 → 28, 80 → 37.33). */\nexport function avatarFontSize(size: number): number {\n return (size * 7) / 15;\n}\n\n/** The literal value of `fontStack` in tokens.ts, inlined so the avatar installs with no dependencies. */\nconst fontStack = '-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n\nexport function Avatar({ size = 40, initials, src, name, className, style, ...props }: AvatarProps) {\n const label = name ?? initials ?? \"Contact\";\n const vars = { \"--av-top\": \"#a9c2e1\", \"--av-bottom\": \"#747fb9\" } as CSSProperties;\n return (\n \n {src ? (\n // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework-neutral\n \"\"\n ) : initials ? (\n {initials.slice(0, 2)}\n ) : (\n \n )}\n \n );\n}\n\n/**\n * The generic contact glyph: head above shoulders, white, clipped by the circle.\n * Unverified: no capture in this repo shows a contact without initials or a photo.\n */\nfunction Silhouette({ size }: { size: number }) {\n return (\n \n \n \n \n );\n}\n", "type": "registry:ui", "target": "components/imessage/avatar.tsx" } ], "type": "registry:ui" }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "macos-window", "title": "macOS window", "description": "The Messages window frame: traffic lights, sidebar and content slots, active and inactive states.", "files": [ { "path": "registry/imessage/macos-window.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * macOS 26 Messages window frame. The pane captures are crops of window x 330–960, so they carry the\n * window's top, right and bottom edges but never its left column. Measured at 2x:\n * - corners: continuous. `conversation-pane-light.png` and `conversation-pane-dark-2.png` are both\n * shadow-free captures, so their alpha edge is the window's own outline: fitting it with the\n * exponent Chrome's `superellipse(1.4)` draws (2.639) gives radius 31.67 and 31.81 pt at 0.23 px\n * rms, and the best plain circle is 25.5 pt at 0.38 px rms (0.9 px worst point). Tracing a Chrome\n * render of those two values back returns them to 0.06 pt, so the fit reads a radius honestly.\n * The rim ridge of `conversation-pane-dark.png` reads 0.8 pt larger; that capture sits on the\n * desktop and its rim is a lit band, so the two alpha outlines are the better evidence.\n * - dark frame: 1 pt #4b4b4b down the sides and along the bottom (two device columns at window\n * x 959–960 of `conversation-pane-dark.png`). The top edge is brighter and is not painted gray: it\n * reads #6f6f6f then #5d5d5d over the #1e1e1e pane, and #74787f then #63696f where a blue bubble\n * sits under the header, which is white at 0.36 and 0.28 over both.\n * - light frame: no side or bottom rim, the pane runs to the edge. The same top highlight is there,\n * white at 0.70 then 0.40: #fefefe then #fdfdfd over the #fcfcfc header glass, and white over the\n * plain pane of `conversation-pane-light-partial.png`.\n * - traffic lights: Ø14 centred (25.75, 25.75), (48.75, 25.75), (71.75, 25.75), from SPEC \"macOS\n * Chrome\". No committed capture contains them: every pane crop starts at window x 330, so these\n * come from the full-window frames held outside the repo and cannot be re-measured here. Their\n * inactive fills are not measured at all, since no capture shows a window that is not key.\n */\nexport const macWindowMetrics = {\n width: 960,\n height: 640,\n sidebarWidth: 330,\n /** Best circular fit to the window outline. Browsers with `corner-shape` get `continuousRadius`. */\n cornerRadius: 25.5,\n continuousRadius: 31.75,\n trafficLight: { diameter: 14, centers: [25.75, 48.75, 71.75] as const, y: 25.75 },\n};\n\nexport type MacWindowProps = Omit, \"children\" | \"content\"> & {\n width?: number;\n height?: number;\n /** Key window: colored traffic lights and the blue sidebar selection. */\n active?: boolean;\n /** The conversation list. Rendered in the left `sidebarWidth` (330 pt) column. */\n sidebar?: ReactNode;\n sidebarWidth?: number;\n /** The conversation pane. */\n content?: ReactNode;\n children?: ReactNode;\n};\n\nconst lights = [\n { name: \"Close\", fill: \"#ff5f57\", rim: \"#e0443e\" },\n { name: \"Minimize\", fill: \"#febc2e\", rim: \"#dea123\" },\n { name: \"Zoom\", fill: \"#28c840\", rim: \"#1aab29\" },\n];\n\nexport function MacWindow({ width = macWindowMetrics.width, height = macWindowMetrics.height, active = true, sidebar, sidebarWidth = macWindowMetrics.sidebarWidth, content, children, className, style, ...props }: MacWindowProps) {\n const { diameter, centers, y } = macWindowMetrics.trafficLight;\n return (\n \n \n
    {sidebar}
    \n
    {content ?? children}
    \n
    \n {lights.map((light, index) => (\n \n ))}\n
    \n {/* Frame rim, in two parts because native's top edge replaces the side rim rather than sitting on\n top of it: dark draws #4b4b4b down the sides and along the bottom, and both themes draw the\n top edge as white glass, so whatever scrolls under the header shows through it. */}\n