Collaborative Launch Hero

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  useControllableState,
8  useDisclosure,
9  useReducedMotion,
10  type StatusTone,
11} from "@/lib/motiq";
12 
13import {
14  LivePresenceStack,
15  type PresenceUser,
16} from "@/components/motiq/live-presence-stack";
17import {
18  TypingAndPresence,
19  type Participant,
20} from "@/components/motiq/typing-and-presence";
21import {
22  ApprovalWorkflow,
23  type ApprovalWorkflowData,
24  type ApprovalStatus,
25  type ActionContext,
26  type Reviewer,
27  type WorkflowStage,
28  type Decision,
29} from "@/components/motiq/approval-workflow";
30import {
31  CommentThread,
32  type Comment,
33  type CommentAuthor,
34} from "@/components/motiq/comment-thread";
35import {
36  ActivityStream,
37  type ActivityEvent,
38} from "@/components/motiq/activity-stream";
39 
40/* --------------------------------------------------------------------------
41 * CollaborativeLaunchHero — an editable hero block for collaboration / review
42 * products. A wide copy band (eyebrow, outcome headline, copy, two CTAs, current
43 * phase) sits above a full-width collaboration window that composes five released
44 * components at *reduced* complexity to tell one story: people are here
45 * (LivePresenceStack), someone is writing right now (TypingAndPresence), a short
46 * review is underway (ActivityStream), there is one change request in the thread
47 * (CommentThread), and one decision is pending (ApprovalWorkflow). In a wide
48 * container the surface tiles into two columns (the decision · the discussion)
49 * so the hero holds a calm height. It is deliberately not a generic social feed
50 * — the surface always resolves to a single approaching outcome.
51 *
52 * RESPONSIVENESS IS CONTAINER-BASED, NOT VIEWPORT-BASED. The block is a
53 * `@container/hero`, and every layout decision below queries that container, so
54 * the hero composes correctly inside a narrow content column on a wide screen
55 * (a docs preview, a two-column marketing page, a CMS slot) — not just at
56 * full-bleed viewport width. Thresholds (measured on the container's CONTENT
57 * box, which is how container queries resolve):
58 *
59 *   @lg/hero      512px  past-phone chrome: type ramp, roomier gaps, intrinsic
60 *                        CTA widths, the window's own padding + subtitle.
61 *   @2xl/hero     672px  the outer gutter steps to 48px — below this a 48px
62 *                        inset eats the surface it is meant to frame.
63 *   @[1000px]/hero       the split: copy + CTA rail side by side, and the
64// … truncated