@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/video-call-speaker-filmstrip/VideoCallSpeakerFilmstrip.tsx

@@ -0,0 +1,303 @@
+"use client"
+
+import * as React from "react"
+import { Captions, LayoutGrid, SignalHigh } from "lucide-react"
+import { Badge } from "../../ui/badge/badge"
+import { Button } from "../../ui/button/button"
+import { cn } from "../../../src/lib/utils"
+import {
+  CallStage,
+  ControlsDock,
+  FAST_MS,
+  Figures,
+  ParticipantTile,
+  STAGE_DOCK_COPY,
+  STANDARD,
+  StageBar,
+  VideoCallSection,
+  fillTemplate,
+  prefersReducedMotion,
+  stageDockControls,
+  type StageDockCopy,
+  type VideoCallLocale,
+  type VideoCallParticipant,
+  type VideoCallPhotos,
+} from "../video-call/video-call"
+
+/*
+ * Figma: `Video Call` (42869:1033), Type=Speaker & Filmstrip.
+ *
+ * A call stage in a card: the stage bar (the meeting name and its time; the
+ * view button, a captions badge and the connection badge), one big tile for
+ * whoever is speaking, a strip of everyone else, and the controls dock.
+ *
+ * Desktop puts the strip beside the speaker as a 232px rail (at the start in
+ * Arabic, on the left); Tablet puts it under the speaker as a row; a phone
+ * keeps three thumbnails and a shorter meeting name, and the stage bar keeps
+ * only the connection badge. The dock keeps five controls with an icon-only
+ * Leave on a phone.
+ *
+ * When the dominant speaker changes (`speakerId`) the big tile cross-dissolves
+ * over 200ms while the outgoing thumbnail scales 0.96 to 1 back into the strip,
+ * and the strip scrolls the new speaker into view smoothly. Pressing a
+ * thumbnail makes that person the speaker. Pinning suspends the automatic
+ * swap until it is released, and the pin turns 15 degrees as it is pressed. The
+ * speaker's name and the speaking mark do not mirror. Reduced motion makes the
+ * swap a plain fade and the scroll an instant one.
+ *
+ * Stills only: each tile is a photo, never a video. Every real action (the view
+ * button, a speaker change, pinning, the dock) is a callback.
+ *
+ * Content limits: a name chip up to 28 characters and the meeting name up to
+ * 42, shortened to 14 on a phone. The other limits are in the block's
+ * documentation page, which the default copy stays inside.
+ */
+
+export interface VideoCallSpeakerFilmstripCopy {
+  /** The meeting's name. */
+  title: string
+  /** The shorter name a phone shows. */
+  shortTitle: string
+  /** The elapsed time. */
+  time: string
+  /** The view button's label. */
+  view: string
+  /** The captions badge's text. */
+  captions: string
+  /** The connection badge's text. */
+  connection: string
+  /** The chip on the speaker's tile; `{name}` is filled in. */
+  speaking: string
+  /** Names a pin button; `{name}` is filled in. */
+  pinLabel: string
+  /** Names a thumbnail's button; `{name}` is filled in. */
+  thumbLabel: string
+  /** The people on the call. The first is the speaker; the rest fill the strip, and a phone shows three of them. */
+  participants: VideoCallParticipant[]
+  /** The dock's controls, and Leave's three lines. */
+  dock: StageDockCopy
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<VideoCallLocale, VideoCallSpeakerFilmstripCopy> = {
+  en: {
+    title: "Client review — Q3 launch",
+    shortTitle: "Client review",
+    time: "41:07",
+    view: "Grid",
+    captions: "Captions on",
+    connection: "Excellent",
+    speaking: "{name} — speaking",
+    pinLabel: "Pin {name}",
+    thumbLabel: "Make {name} the speaker",
+    participants: [
+      { id: "adam", name: "Adam Farouk" },
+      { id: "nabil", name: "Nabil Khalil" },
+      { id: "bilal", name: "Bilal Sultan", muted: true },
+      { id: "hani", name: "Hani Mansour", initials: "HM" },
+      { id: "yassin", name: "Yassin (you)" },
+    ],
+    dock: { ...STAGE_DOCK_COPY.en, leave: "Leave call" },
+  },
+  ar: {
+    title: "مراجعة العميل لإطلاق الربع الثالث",
+    shortTitle: "مراجعة العميل",
+    time: "41:07",
+    view: "شبكة",
+    captions: "التسميات مفعّلة",
+    connection: "ممتاز",
+    speaking: "{name}، يتحدث",
+    pinLabel: "تثبيت {name}",
+    thumbLabel: "اجعل {name} المتحدث",
+    participants: [
+      { id: "adam", name: "آدم فاروق" },
+      { id: "nabil", name: "نبيل خليل" },
+      { id: "bilal", name: "بلال سلطان", muted: true },
+      { id: "hani", name: "هاني منصور", initials: "ه م" },
+      { id: "yassin", name: "ياسين (أنت)" },
+    ],
+    dock: { ...STAGE_DOCK_COPY.ar, leave: "إنهاء المكالمة" },
+  },
+}
+
+export interface VideoCallSpeakerFilmstripProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<VideoCallSpeakerFilmstripCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: VideoCallLocale
+  /** The people's photos, by participant `id`. A person without one shows their initials. */
+  photos?: VideoCallPhotos
+  /** Who is speaking. A change swaps the big tile, unless someone is pinned. Defaults to the first person. */
+  speakerId?: string
+  /** Who starts pinned. A pin keeps that person on the big tile until it is released. */
+  defaultPinnedId?: string | null
+  /** Called when a thumbnail is pressed, with that person's `id`. */
+  onSpeakerChange?: (id: string) => void
+  /** Called with a person's `id` when they are pinned, or `null` when the pin is released. */
+  onPinnedChange?: (id: string | null) => void
+  /** Called when the view button is pressed. */
+  onViewChange?: () => void
+  /** Called when a dock control is pressed. Toggles also say whether they are now pressed. */
+  onControl?: (id: string, pressed: boolean) => void
+  /** Called with the id of the chosen More-menu item. */
+  onMenuAction?: (id: string) => void
+  /** Called once Leave is held for 400ms, or confirmed with a second press from the keyboard. */
+  onLeave?: () => void
+}
+
+export function VideoCallSpeakerFilmstrip({
+  locale = "en",
+  title,
+  shortTitle,
+  time,
+  view,
+  captions,
+  connection,
+  speaking,
+  pinLabel,
+  thumbLabel,
+  participants,
+  dock,
+  photos,
+  speakerId,
+  defaultPinnedId = null,
+  onSpeakerChange,
+  onPinnedChange,
+  onViewChange,
+  onControl,
+  onMenuAction,
+  onLeave,
+  className,
+  ...props
+}: VideoCallSpeakerFilmstripProps) {
+  const copy = COPY[locale]
+  const list = participants ?? copy.participants
+  const d = dock ?? copy.dock
+  const name = title ?? copy.title
+  const [pinned, setPinned] = React.useState<string | null>(defaultPinnedId)
+  const [picked, setPicked] = React.useState<string | null>(null)
+  const incoming = speakerId ?? list[0]?.id
+  // A new speaker from outside clears a pick made by hand, and a pin overrides both.
+  React.useEffect(() => setPicked(null), [incoming])
+  const currentId = pinned ?? picked ?? incoming
+  const current = list.find((person) => person.id === currentId) ?? list[0]
+  const strip = list.filter((person) => person.id !== current?.id)
+  const stage = React.useRef<HTMLDivElement>(null)
+  const filmstrip = React.useRef<HTMLDivElement>(null)
+  const previous = React.useRef<string | undefined>(current?.id)
+
+  // The big tile cross-dissolves over 200ms, the outgoing thumbnail scales 0.96 to 1 back into the strip, and the strip scrolls the new speaker's neighbour into view.
+  React.useEffect(() => {
+    const before = previous.current
+    previous.current = current?.id
+    if (before === undefined || before === current?.id) return
+    const reduced = prefersReducedMotion()
+    const big = stage.current
+    if (big && typeof big.animate === "function") big.animate([{ opacity: 0 }, { opacity: 1 }], { duration: reduced ? FAST_MS : 200, easing: STANDARD })
+    const out = filmstrip.current?.querySelector<HTMLElement>(`[data-thumb="${before}"]`)
+    if (out && typeof out.animate === "function" && !reduced) out.animate([{ transform: "scale(0.96)" }, { transform: "none" }], { duration: 200, easing: STANDARD })
+    out?.scrollIntoView?.({ behavior: reduced ? "auto" : "smooth", block: "nearest", inline: "nearest" })
+  }, [current?.id])
+
+  const togglePin = (id: string) => {
+    const next = pinned === id ? null : id
+    setPinned(next)
+    onPinnedChange?.(next)
+  }
+  if (!current) return null
+
+  return (
+    <VideoCallSection aria-label={name} gap="sm" className={className} {...props}>
+      <CallStage>
+        <StageBar
+          className="px-2 py-1"
+          title={
+            <>
+              <span className="[@container(min-width:40rem)]:hidden">
+                <Figures>{shortTitle ?? copy.shortTitle}</Figures>
+              </span>
+              <span className="hidden [@container(min-width:40rem)]:inline">
+                <Figures>{name}</Figures>
+              </span>
+            </>
+          }
+          time={time ?? copy.time}
+          actions={
+            <>
+              <Button type="button" size="xs" radius="rounded" className="hidden [@container(min-width:40rem)]:inline-flex" onClick={onViewChange}>
+                <LayoutGrid aria-hidden />
+                {view ?? copy.view}
+              </Button>
+              <Badge variant="solid" tone="primary" size="lg" radius="rounded" icon={<Captions />} className="hidden [@container(min-width:40rem)]:inline-flex">
+                {captions ?? copy.captions}
+              </Badge>
+              <Badge variant="solid" tone="primary" size="lg" radius="rounded" icon={<SignalHigh />}>
+                {connection ?? copy.connection}
+              </Badge>
+            </>
+          }
+        />
+
+        <div className="flex flex-col gap-2 [@container(min-width:40rem)]:gap-3 [@container(min-width:64rem)]:flex-row">
+          <div ref={stage} className="min-w-0 flex-1">
+            <ParticipantTile
+              name={fillTemplate(speaking ?? copy.speaking, { name: current.name })}
+              photo={photos?.[current.id]}
+              initials={photos?.[current.id] ? undefined : current.initials}
+              muted={current.muted}
+              speaking
+              pinned={pinned === current.id}
+              pinLabel={fillTemplate(pinLabel ?? copy.pinLabel, { name: current.name })}
+              onPinnedChange={() => togglePin(current.id)}
+              className="aspect-[288/149] w-full rounded-[0.625rem] [@container(min-width:40rem)]:aspect-video [@container(min-width:64rem)]:aspect-auto [@container(min-width:64rem)]:h-[468px]"
+            />
+          </div>
+          <div
+            ref={filmstrip}
+            className="grid shrink-0 grid-cols-3 gap-2 [@container(min-width:40rem)]:grid-cols-4 [@container(min-width:40rem)]:gap-3 [@container(min-width:64rem)]:max-h-[468px] [@container(min-width:64rem)]:w-[232px] [@container(min-width:64rem)]:grid-cols-1 [@container(min-width:64rem)]:overflow-y-auto"
+          >
+            {strip.map((person, index) => (
+              <button
+                key={person.id}
+                type="button"
+                data-thumb={person.id}
+                aria-label={fillTemplate(thumbLabel ?? copy.thumbLabel, { name: person.name })}
+                onClick={() => {
+                  setPicked(person.id)
+                  onSpeakerChange?.(person.id)
+                }}
+                className={cn("block rounded-[0.625rem] text-start outline-none focus-visible:ring-2 focus-visible:ring-ring", index >= 3 && "hidden [@container(min-width:40rem)]:block")}
+              >
+                <ParticipantTile
+                  name={locale === "ar" ? person.name : (person.shortName ?? person.name)}
+                  photo={photos?.[person.id]}
+                  initials={photos?.[person.id] ? undefined : person.initials}
+                  muted={person.muted}
+                  chipClassName="max-w-[calc(100%-1.5rem)] [&>span]:truncate"
+                  className="h-[72px] w-full rounded-[0.625rem] [@container(min-width:40rem)]:h-[100px] [@container(min-width:64rem)]:h-[108px]"
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <ControlsDock
+          className="pt-2 pb-1"
+          label={d.label}
+          size="lg"
+          controls={stageDockControls(d)}
+          leaveLabel={d.leave}
+          leaveConfirmLabel={d.leaveConfirm}
+          leaveHint={d.leaveHint}
+          onControl={onControl}
+          onMenuAction={onMenuAction}
+          onLeave={onLeave}
+        />
+      </CallStage>
+    </VideoCallSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const videoCallSpeakerFilmstripCopy = COPY

package/registry/blocks/video-call-speaker-filmstrip/index.ts

@@ -0,0 +1,6 @@
+export {
+  VideoCallSpeakerFilmstrip,
+  videoCallSpeakerFilmstripCopy,
+  type VideoCallSpeakerFilmstripCopy,
+  type VideoCallSpeakerFilmstripProps,
+} from "./VideoCallSpeakerFilmstrip"

package/registry/blocks/video-call-upcoming-meetings/VideoCallUpcomingMeetings.tsx

@@ -0,0 +1,349 @@
+"use client"
+
+import * as React from "react"
+import { CircleDot, Ellipsis } from "lucide-react"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { Button } from "../../ui/button/button"
+import { cn } from "../../../src/lib/utils"
+import {
+  FAST_MS,
+  Figures,
+  Latin,
+  STANDARD,
+  VideoCallSection,
+  fillTemplate,
+  passedCopy,
+  prefersReducedMotion,
+  restOf,
+  type VideoCallLocale,
+  type VideoCallPhotos,
+} from "../video-call/video-call"
+
+/*
+ * Figma: `Video Call` (42869:1033), Type=Upcoming Meetings.
+ *
+ * A header (the day, a line on how much is booked, New meeting and Open
+ * calendar) over a list of meetings. A meeting is a time and its length, a
+ * 3px accent bar, the title with its meta line, the people on it, and Join with
+ * a More button. The meeting happening now is drawn on `muted` with a 2px
+ * `primary` ring, a Happening now badge and a solid Join now.
+ *
+ * Desktop sets each meeting in one row with its people as a stack of avatars;
+ * Tablet drops the stacks and stacks the header's title above its actions; a
+ * phone makes each meeting a card, with Join full width under the title.
+ *
+ * The rows fade and rise 12px on a 50ms stagger the first time the list
+ * renders. The live row's ring pulses between 0.6 and 1 opacity on a 2s loop
+ * and its dot on a 1.6s one; hovering any row lifts it 2px with a shadow step
+ * over 120ms. Joining collapses the row over 200ms; the block hands its bounds
+ * to `onJoin`, so a page can expand a call stage out of them. Reduced motion
+ * stops the loops and the lift and turns the rest into a 120ms fade. The motion
+ * has no reading direction; the rows mirror, with the time and the accent bar
+ * at the start and the actions at the end, and times stay in 24-hour numerals.
+ *
+ * Stills only. Every real action (New meeting, Open calendar, Join, More) is a
+ * callback; which row is collapsing is state the block keeps itself, or takes
+ * from `joiningId`.
+ *
+ * Content limits: a title up to 40 characters and a meta line up to 48. The
+ * other limits are in the block's documentation page, which the default copy
+ * stays inside.
+ */
+
+export interface VideoCallMeeting {
+  id: string
+  /** The start, 24-hour: `10:00`. */
+  time: string
+  /** The length: `45 min`. */
+  duration: string
+  title: string
+  /** The line under the title: `Recurring · Recording on`. */
+  meta: string
+  /** The meeting happening now. */
+  live?: boolean
+  /** Who is on it, by `id` in `photos`. Shown on Desktop only. */
+  people?: string[]
+  /** How many more are on it past `people`. */
+  more?: number
+}
+
+export interface VideoCallUpcomingMeetingsCopy {
+  /** The day, an `h2`, and the line under it. */
+  heading: string
+  summary: string
+  newMeeting: string
+  openCalendar: string
+  /** The meetings, in order. */
+  meetings: VideoCallMeeting[]
+  /** The live row's button, the others' button, and the live badge. */
+  joinNow: string
+  join: string
+  liveLabel: string
+  /** Names a row's More button: `More options for {title}`. */
+  moreLabel: string
+  /** Names the list. */
+  listLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<VideoCallLocale, VideoCallUpcomingMeetingsCopy> = {
+  en: {
+    heading: "Today · Thursday 12 March",
+    summary: "4 meetings · 3h 15m booked · next in 12 minutes",
+    newMeeting: "New meeting",
+    openCalendar: "Open calendar",
+    meetings: [
+      { id: "design-sync", time: "10:00", duration: "45 min", title: "Design sync — weekly", meta: "Recurring · Recording on", live: true, people: ["mazen", "karim", "laith", "yassin"], more: 2 },
+      { id: "client-review", time: "11:30", duration: "30 min", title: "Client review — Q3 launch", meta: "External guests · Waiting room on", people: ["adam", "nabil"] },
+      { id: "onboarding", time: "14:00", duration: "60 min", title: "Onboarding walkthrough", meta: "Guest link · No recording", people: ["bilal", "omar", "tariq"] },
+      { id: "one-to-one", time: "16:15", duration: "20 min", title: "1:1 with Mazen", meta: "Private · Notes shared after", people: ["mazen"] },
+    ],
+    joinNow: "Join now",
+    join: "Join",
+    liveLabel: "Happening now",
+    moreLabel: "More options for {title}",
+    listLabel: "Today's meetings",
+  },
+  ar: {
+    heading: "اليوم، الخميس 12 مارس",
+    summary: "4 اجتماعات، 195 دقيقة محجوزة، التالي بعد 12 دقيقة",
+    newMeeting: "اجتماع جديد",
+    openCalendar: "فتح التقويم",
+    meetings: [
+      { id: "design-sync", time: "10:00", duration: "45 دقيقة", title: "مزامنة التصميم الأسبوعية", meta: "متكرر، التسجيل مفعّل", live: true, people: ["mazen", "karim", "laith", "yassin"], more: 2 },
+      { id: "client-review", time: "11:30", duration: "30 دقيقة", title: "مراجعة العميل لإطلاق الربع الثالث", meta: "ضيوف خارجيون، غرفة الانتظار مفعّلة", people: ["adam", "nabil"] },
+      { id: "onboarding", time: "14:00", duration: "60 دقيقة", title: "جولة التهيئة", meta: "رابط ضيف، بدون تسجيل", people: ["bilal", "omar", "tariq"] },
+      { id: "one-to-one", time: "16:15", duration: "20 دقيقة", title: "اجتماع فردي مع مازن", meta: "خاص، تُشارك الملاحظات لاحقًا", people: ["mazen"] },
+    ],
+    joinNow: "انضم الآن",
+    join: "انضمام",
+    liveLabel: "جارٍ الآن",
+    moreLabel: "خيارات أخرى لاجتماع {title}",
+    listLabel: "اجتماعات اليوم",
+  },
+}
+
+const COPY_KEYS = Object.keys(COPY.en)
+
+/** Names for the people on a meeting, for the avatars' accessible names. */
+const PERSON_NAMES: Record<VideoCallLocale, Record<string, string>> = {
+  en: { mazen: "Mazen Darwish", karim: "Karim Nasser", laith: "Laith Hassan", yassin: "Yassin Haddad", adam: "Adam Farouk", nabil: "Nabil Khalil", bilal: "Bilal Sultan", omar: "Omar Youssef", tariq: "Tariq Aziz" },
+  ar: { mazen: "مازن درويش", karim: "كريم ناصر", laith: "ليث حسن", yassin: "ياسين حداد", adam: "آدم فاروق", nabil: "نبيل خليل", bilal: "بلال سلطان", omar: "عمر يوسف", tariq: "طارق عزيز" },
+}
+
+export interface VideoCallUpcomingMeetingsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<VideoCallUpcomingMeetingsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: VideoCallLocale
+  /** The photos of the people on the meetings, by `id`. A person without one shows their initials. */
+  photos?: VideoCallPhotos
+  /** The row that is collapsing into the call when the block opens. Joining sets it too. */
+  joiningId?: string | null
+  /** Called with the meeting's id and the row's bounds when Join or Join now is pressed. */
+  onJoin?: (id: string, bounds: DOMRect) => void
+  /** Called with the meeting's id when its More button is pressed. */
+  onMore?: (id: string) => void
+  /** Called when New meeting is pressed. */
+  onNewMeeting?: () => void
+  /** Called when Open calendar is pressed. */
+  onOpenCalendar?: () => void
+}
+
+export function VideoCallUpcomingMeetings({
+  locale = "en",
+  photos,
+  joiningId: joiningProp,
+  onJoin,
+  onMore,
+  onNewMeeting,
+  onOpenCalendar,
+  className,
+  ...props
+}: VideoCallUpcomingMeetingsProps) {
+  const copy = { ...COPY[locale], ...passedCopy(COPY_KEYS, props) } as VideoCallUpcomingMeetingsCopy
+  const rest = restOf(COPY_KEYS, props) as React.HTMLAttributes<HTMLElement>
+  const headingId = React.useId()
+  const [joining, setJoining] = React.useState<string | null>(joiningProp ?? null)
+  const list = React.useRef<HTMLUListElement>(null)
+  const rows = React.useRef(new Map<string, HTMLLIElement>())
+
+  React.useEffect(() => {
+    if (joiningProp !== undefined) setJoining(joiningProp)
+  }, [joiningProp])
+
+  // The rows fade and rise 12px, 50ms apart, the first time the list scrolls into view.
+  React.useLayoutEffect(() => {
+    const node = list.current
+    if (!node || typeof IntersectionObserver === "undefined") return
+    const items = Array.from(node.querySelectorAll<HTMLElement>("[data-meeting]"))
+    let animations: Animation[] = []
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return
+        observer.disconnect()
+        const reduced = prefersReducedMotion()
+        animations = items
+          .filter((item) => typeof item.animate === "function")
+          .map((item, index) =>
+            item.animate(reduced ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "none" }], {
+              duration: reduced ? FAST_MS : 180,
+              delay: reduced ? 0 : index * 50,
+              easing: STANDARD,
+              fill: "backwards",
+            })
+          )
+      },
+      { threshold: 0.1 }
+    )
+    observer.observe(node)
+    return () => {
+      observer.disconnect()
+      animations.forEach((animation) => animation.cancel())
+    }
+  }, [])
+
+  // The live row's ring and dot pulse; reduced motion holds them still.
+  React.useLayoutEffect(() => {
+    const node = list.current
+    if (!node || prefersReducedMotion()) return
+    const animations: Animation[] = []
+    node.querySelectorAll<HTMLElement>("[data-ring]").forEach((ring) => {
+      if (typeof ring.animate === "function") animations.push(ring.animate([{ opacity: 0.6 }, { opacity: 1 }, { opacity: 0.6 }], { duration: 2000, iterations: Infinity, easing: "ease-in-out" }))
+    })
+    node.querySelectorAll<HTMLElement>("[data-dot]").forEach((dot) => {
+      if (typeof dot.animate === "function") animations.push(dot.animate([{ opacity: 1 }, { opacity: 0.4 }, { opacity: 1 }], { duration: 1600, iterations: Infinity, easing: "ease-in-out" }))
+    })
+    return () => animations.forEach((animation) => animation.cancel())
+  }, [])
+
+  const join = (meeting: VideoCallMeeting) => {
+    const row = rows.current.get(meeting.id)
+    onJoin?.(meeting.id, row?.getBoundingClientRect() ?? new DOMRect())
+    setJoining(meeting.id)
+  }
+
+  // A joining row collapses to nothing over 200ms.
+  React.useLayoutEffect(() => {
+    if (!joining) return
+    const row = rows.current.get(joining)
+    if (!row || typeof row.animate !== "function") return
+    const reduced = prefersReducedMotion()
+    const height = row.offsetHeight
+    const animation = row.animate(
+      reduced ? [{ opacity: 1 }, { opacity: 0 }] : [{ height: `${height}px`, opacity: 1, marginBottom: "0px" }, { height: "0px", opacity: 0, marginBottom: "-12px" }],
+      { duration: reduced ? FAST_MS : 200, easing: STANDARD, fill: "forwards" }
+    )
+    return () => animation.cancel()
+  }, [joining])
+
+  const names = PERSON_NAMES[locale]
+
+  return (
+    <VideoCallSection labelledBy={headingId} className={className} gap="sm" contentClassName="gap-6" {...rest}>
+      <div className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between">
+        <div className="flex min-w-0 flex-col gap-1">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+            <Figures>{copy.heading}</Figures>
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            <Figures>{copy.summary}</Figures>
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button type="button" onClick={onNewMeeting}>
+            {copy.newMeeting}
+          </Button>
+          <Button type="button" variant="outline" tone="secondary" onClick={onOpenCalendar}>
+            {copy.openCalendar}
+          </Button>
+        </div>
+      </div>
+
+      <ul ref={list} aria-label={copy.listLabel} className="flex flex-col gap-3">
+        {copy.meetings.map((meeting) => (
+          <li
+            key={meeting.id}
+            ref={(node) => {
+              if (node) rows.current.set(meeting.id, node)
+              else rows.current.delete(meeting.id)
+            }}
+            data-meeting=""
+            data-live={meeting.live ? "" : undefined}
+            aria-busy={joining === meeting.id || undefined}
+            className={cn(
+              "relative flex flex-col gap-3 overflow-hidden rounded-[0.875rem] p-5 transition-[transform,box-shadow] duration-[120ms] hover:motion-safe:-translate-y-0.5 hover:shadow-sm motion-reduce:transition-none [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-5",
+              meeting.live ? "bg-muted" : "border border-border bg-card"
+            )}
+          >
+            {meeting.live ? <span data-ring="" aria-hidden className="pointer-events-none absolute inset-0 rounded-[inherit] ring-2 ring-inset ring-primary" /> : null}
+            <div className="flex items-center gap-2 [@container(min-width:40rem)]:w-[84px] [@container(min-width:40rem)]:shrink-0 [@container(min-width:40rem)]:flex-col [@container(min-width:40rem)]:items-start [@container(min-width:40rem)]:gap-0">
+              <span className="text-lg font-semibold text-foreground">
+                <Latin>{meeting.time}</Latin>
+              </span>
+              <span className="text-xs text-muted-foreground">
+                <Figures>{meeting.duration}</Figures>
+              </span>
+            </div>
+            <span aria-hidden className={cn("hidden h-11 w-[3px] shrink-0 rounded-full [@container(min-width:40rem)]:block", meeting.live ? "bg-primary" : "bg-border")} />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <div className="flex flex-wrap items-center gap-2">
+                <p className="text-base font-semibold text-foreground">
+                  <Figures>{meeting.title}</Figures>
+                </p>
+                {meeting.live ? (
+                  <Badge variant="solid" tone="destructive" size="lg" radius="rounded" icon={<span data-dot="" className="inline-flex size-3 items-center justify-center [&>svg]:size-3"><CircleDot /></span>}>
+                    {copy.liveLabel}
+                  </Badge>
+                ) : null}
+              </div>
+              <p className="text-sm text-muted-foreground">
+                <Figures>{meeting.meta}</Figures>
+              </p>
+            </div>
+            {meeting.people && meeting.people.length > 0 ? (
+              <div className="hidden items-center gap-2 [@container(min-width:64rem)]:flex">
+                {meeting.people.map((id) => (
+                  <Avatar key={id} size="32" radius="standard" variant={photos?.[id] ? "image" : "initials"} src={photos?.[id]?.src} name={names[id] ?? id} />
+                ))}
+                {meeting.more ? (
+                  <span className="text-xs text-muted-foreground">
+                    <Figures>{`+${meeting.more}`}</Figures>
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant={meeting.live ? "default" : "outline"}
+                tone={meeting.live ? "primary" : "secondary"}
+                onClick={() => join(meeting)}
+                className="flex-1 [@container(min-width:40rem)]:flex-none"
+              >
+                {meeting.live ? copy.joinNow : copy.join}
+              </Button>
+              <Button
+                type="button"
+                size="icon-md"
+                variant="outline"
+                tone="secondary"
+                aria-label={fillTemplate(copy.moreLabel, { title: meeting.title })}
+                onClick={() => onMore?.(meeting.id)}
+              >
+                <Ellipsis aria-hidden />
+              </Button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </VideoCallSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const videoCallUpcomingMeetingsCopy = COPY

package/registry/blocks/video-call-upcoming-meetings/index.ts

@@ -0,0 +1,7 @@
+export {
+  VideoCallUpcomingMeetings,
+  videoCallUpcomingMeetingsCopy,
+  type VideoCallMeeting,
+  type VideoCallUpcomingMeetingsCopy,
+  type VideoCallUpcomingMeetingsProps,
+} from "./VideoCallUpcomingMeetings"