Invites

# Brok UI: Invites (`invites`)

An Apple-invites-style vertical list of event cards: each card layers a status badge, an overlapping attendee avatar group, and the event title, date, and location over a background photo with a token gradient scrim. Drag a card by its handle to reorder, or focus the handle and use Arrow Up / Arrow Down — every reorder is announced through a live region.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add invites
```

## Usage

```blade
<div class="flex min-h-40 w-full items-center justify-center rounded-lg border border-border bg-card p-8">
    <x-ui.invites class="w-full max-w-sm" />
</div>
```

## Props

- `invites` (array, default `[…]`)

## Use when

- Use when self-contained content objects benefit from a recognizable card-like presentation with local actions or metadata.
- Listing upcoming events as rich photo cards with attendees and status.
- Letting someone reorder those events by drag or keyboard.

## Avoid when

- Do not use card widgets where a simpler list, table, or plain text block would make comparison faster.
- Reordering arbitrary items; sortable is the general primitive.
- Showing one event; calendar-event-card is the single card.

## Anti-patterns

- Using cards for dense cross-item comparison

## Rules

- Use the `<brok:invites>` tag (or `<x-ui.invites>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/invites
- Registry JSON (files, props, contract): https://brokui.dev/r/open/invites.json

@props([
    'invites' => [
        [
            'title' => 'Rooftop Summer Mixer',
            'date' => 'Fri, Jun 27, 7:00 PM',
            'location' => 'The Highline, New York',
            'image' => 'https://picsum.photos/seed/invite-rooftop/800/480',
            'status' => 'Hosting',
            'attendees' => [
                'https://picsum.photos/seed/ava/80/80',
                'https://picsum.photos/seed/noah/80/80',
                'https://picsum.photos/seed/mia/80/80',
            ],
        ],
        [
            'title' => 'Design Systems Meetup',
            'date' => 'Tue, Jul 1, 6:30 PM',
            'location' => 'Loft Studio, Brooklyn',
            'image' => 'https://picsum.photos/seed/invite-design/800/480',
            'status' => 'Going',
            'attendees' => [
                'https://picsum.photos/seed/liam/80/80',
                'https://picsum.photos/seed/zoe/80/80',
            ],
        ],
        [
            'title' => 'Weekend Trail Run',
            'date' => 'Sat, Jul 5, 8:00 AM',
            'location' => 'Riverside Park',
            'image' => 'https://picsum.photos/seed/invite-trail/800/480',
            'status' => 'Going',
            'attendees' => [
                'https://picsum.photos/seed/kai/80/80',
                'https://picsum.photos/seed/ada/80/80',
                'https://picsum.photos/seed/leo/80/80',
                'https://picsum.photos/seed/eva/80/80',
            ],
        ],
    ],
])

@php
    $items = array_values(array_map(function ($invite) {
        $invite['attendees'] = array_values($invite['attendees'] ?? []);

        return $invite;
    }, $invites));
@endphp

<div
    x-data="uiInvites()"
    data-slot="invites"
    {{ $attributes->merge(['class' => 'w-full']) }}
>
    {{-- Cards render server-side (so composed primitives resolve their props);
         Alpine reorders the real DOM nodes for both pointer drag and keyboard. --}}
    <ul role="list" class="flex flex-col gap-4" x-ref="list">
        @foreach ($items as $i => $invite)
            <li
                data-slot="invites-item"
                role="listitem"
                data-index="{{ $i }}"
                class="group relative isolate overflow-hidden rounded-lg border border-border bg-card shadow-sm data-[dragging=true]:border-dashed data-[dragging=true]:border-input data-[dragging=true]:bg-muted/60 data-[dragging=true]:shadow-none data-[dragging=true]:[&>*]:invisible"
            >
                {{-- Background photo. --}}
                <img
                    src="{{ $invite['image'] }}"
                    alt="{{ $invite['title'] }}"
                    class="absolute inset-0 -z-10 size-full object-cover"
                    loading="lazy"
                />

                {{-- Token gradient scrim for legible text over any photo. --}}
                <div
                    aria-hidden="true"
                    class="absolute inset-0 -z-10 bg-gradient-to-t from-background/90 via-background/40 to-background/10"
                ></div>

                <div class="flex min-h-44 flex-col justify-between gap-6 p-4">
                    {{-- Top row: status badge + drag handle. --}}
                    <div class="flex items-start justify-between gap-3">
                        @if ($invite['status'] === 'Hosting')
                            <x-ui.badge class="backdrop-blur-sm">{{ __($invite['status']) }}</x-ui.badge>
                        @else
                            <x-ui.badge class="border-transparent bg-background/70 text-foreground backdrop-blur-sm">{{ __($invite['status']) }}</x-ui.badge>
                        @endif

                        <button
                            type="button"
                            data-slot="invites-handle"
                            data-index="{{ $i }}"
                            @pointerdown="startDrag($event, $el)"
                            @keydown="onKey($event, $el)"
                            aria-label="{{ __('Reorder :title', ['title' => $invite['title']]) }}"
                            class="inline-flex shrink-0 cursor-grab touch-none items-center justify-center rounded-md bg-background/60 p-2 text-foreground/90 outline-none backdrop-blur-sm transition-colors hover:bg-background/80 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:cursor-grabbing motion-reduce:transition-none"
                        >
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="size-4"
                                aria-hidden="true"
                            >
                                <circle cx="9" cy="6" r="1" />
                                <circle cx="9" cy="12" r="1" />
                                <circle cx="9" cy="18" r="1" />
                                <circle cx="15" cy="6" r="1" />
                                <circle cx="15" cy="12" r="1" />
                                <circle cx="15" cy="18" r="1" />
                            </svg>
                        </button>
                    </div>

                    {{-- Bottom: title, meta, attendee group. --}}
                    <div class="flex flex-col gap-3">
                        <div class="min-w-0 space-y-1">
                            <h3 class="truncate text-lg font-semibold leading-tight text-foreground">
                                {{ $invite['title'] }}
                            </h3>

                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-foreground/80">
                                <span class="inline-flex items-center gap-2">
                                    <svg
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="size-4 shrink-0"
                                        aria-hidden="true"
                                    >
                                        <rect x="3" y="4" width="18" height="18" rx="2" />
                                        <path d="M16 2v4M8 2v4M3 10h18" />
                                    </svg>
                                    <span>{{ $invite['date'] }}</span>
                                </span>
                                <span class="inline-flex items-center gap-2">
                                    <svg
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="size-4 shrink-0"
                                        aria-hidden="true"
                                    >
                                        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                                        <circle cx="12" cy="10" r="3" />
                                    </svg>
                                    <span>{{ $invite['location'] }}</span>
                                </span>
                            </div>
                        </div>

                        {{-- Overlapping attendee avatar group. --}}
                        @php $faces = array_slice($invite['attendees'], 0, 4); $extra = count($invite['attendees']) - count($faces); @endphp
                        <div
                            class="flex items-center -space-x-2"
                            role="group"
                            aria-label="{{ trans_choice(':count attendee|:count attendees', count($invite['attendees']), ['count' => count($invite['attendees'])]) }}"
                        >
                            @foreach ($faces as $face)
                                <x-ui.avatar size="sm" :src="$face" alt="" class="ring-2 ring-background" aria-hidden="true" />
                            @endforeach
                            @if ($extra > 0)
                                <x-ui.avatar size="sm" class="ring-2 ring-background" aria-hidden="true">+{{ $extra }}</x-ui.avatar>
                            @endif
                        </div>
                    </div>
                </div>
            </li>
        @endforeach
    </ul>

    {{-- Polite status region announces reorders to assistive tech. --}}
    <div class="sr-only" role="status" aria-live="polite" x-text="status"></div>
</div>

/**
 * Invites behavior — an Apple-invites-style drag-to-reorder list of event cards.
 *
 * The cards are rendered server-side so each composed primitive (avatar, badge)
 * resolves its props normally; this controller reorders the real <li> DOM nodes
 * rather than re-rendering from a data array. Reordering works two ways:
 *   - Pointer drag: pressing a card's grip handle lifts a clone of the card as
 *     a floating ghost under the pointer, the way the kanban board and the
 *     sortable list do; the card itself becomes a hollow placeholder that moves
 *     live to the slot the drop would land in, and the other cards glide around
 *     it (FLIP). Release settles the ghost onto the placeholder. The document
 *     listeners exist only for the duration of a drag and are always removed on
 *     pointerup AND in `destroy()`, so unmounting mid-drag can't leak.
 *   - Keyboard: focus a handle and press Arrow Up / Arrow Down to move that card
 *     one slot; focus follows the card so repeated presses keep moving it.
 *
 * Every reorder is announced through an `aria-live="polite"` status region as
 * "<title>, position N of M". The drag flourish (scale/shadow/dim) is cosmetic
 * CSS that respects `prefers-reduced-motion`; reordering itself is unaffected.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this
 * file once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiInvites', () => ({
        dragItem: null, // the <li> currently being dragged, or null
        status: '',

        // Bound listener refs so we can remove exactly what we added.
        _move: null,
        _up: null,
        _ghost: null,
        _ghostEl: null,
        _origin: null,
        _reduced: false,

        init() {
            this._reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            this._move = (e) => this.onMove(e);
            this._up = () => this.endDrag();
        },

        destroy() {
            // Remove any listeners (and a stray ghost) if unmounted mid-drag.
            document.removeEventListener('pointermove', this._move);
            document.removeEventListener('pointerup', this._up);
            document.removeEventListener('pointercancel', this._up);
            this._ghostEl?.remove();
        },

        // ---- Helpers --------------------------------------------------------

        rows() {
            return Array.from(
                this.$refs.list.querySelectorAll('[data-slot="invites-item"]')
            );
        },

        cardOf(el) {
            return el.closest('[data-slot="invites-item"]');
        },

        announce(card) {
            if (!card) return;
            const rows = this.rows();
            const pos = rows.indexOf(card) + 1;
            const title =
                card.querySelector('h3')?.textContent.trim() ?? 'Card';
            this.status = `${title}, position ${pos} of ${rows.length}`;
        },

        // ---- Keyboard reordering -------------------------------------------

        onKey(e, handle) {
            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
            e.preventDefault();
            const card = this.cardOf(handle);
            if (!card) return;

            if (e.key === 'ArrowUp' && card.previousElementSibling) {
                card.parentNode.insertBefore(card, card.previousElementSibling);
            } else if (e.key === 'ArrowDown' && card.nextElementSibling) {
                card.parentNode.insertBefore(card.nextElementSibling, card);
            } else {
                return;
            }

            this.announce(card);
            // Focus follows the moved card's handle.
            this.$nextTick(() =>
                card.querySelector('[data-slot="invites-handle"]')?.focus()
            );
        },

        // ---- Pointer drag: ghost + placeholder + gliding rows ---------------
        //
        // Pressing the handle lifts a clone of the card as a floating ghost
        // under the pointer and turns the card itself into a hollow
        // placeholder that moves live to the slot the drop would land in; the
        // other cards glide around it (FLIP). Release settles the ghost onto
        // the placeholder. Reduced motion skips the glides and the settle.

        rowRects() {
            const rects = new Map();
            for (const el of this.rows()) rects.set(el, el.getBoundingClientRect());
            return rects;
        },

        glide(before) {
            if (this._reduced) return;
            for (const el of this.rows()) {
                const prev = before.get(el);
                if (!prev || el === this.dragItem) continue;
                const now = el.getBoundingClientRect();
                const dy = prev.top - now.top;
                if (!dy) continue;
                el.getAnimations().forEach((a) => a.cancel());
                el.animate([{ transform: `translateY(${dy}px)` }, { transform: 'none' }], { duration: 200, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
            }
        },

        startDrag(e, handle) {
            // Only react to a primary press; let other buttons through.
            if (e.button !== undefined && e.button !== 0) return;
            e.preventDefault();
            const card = this.cardOf(handle);
            if (!card) return;
            this.dragItem = card;
            this._origin = this.rows().indexOf(card);
            const r = card.getBoundingClientRect();
            this._ghost = { dx: e.clientX - r.left, dy: e.clientY - r.top, x: r.left, y: r.top };

            // The ghost is a visual copy that follows the pointer.
            const ghost = card.cloneNode(true);
            ghost.removeAttribute('data-index');
            ghost.setAttribute('data-slot', 'invites-ghost');
            ghost.setAttribute('aria-hidden', 'true');
            ghost.querySelectorAll('[data-slot="invites-handle"]').forEach((h) => h.removeAttribute('data-slot'));
            ghost.style.cssText = `position: fixed; left: ${r.left}px; top: ${r.top}px; width: ${r.width}px; height: ${r.height}px; margin: 0; pointer-events: none; z-index: var(--z-overlay, 1400); transform: scale(1.02); box-shadow: var(--shadow-xl);`;
            document.body.appendChild(ghost);
            this._ghostEl = ghost;

            card.setAttribute('data-dragging', 'true');
            document.addEventListener('pointermove', this._move);
            document.addEventListener('pointerup', this._up);
            document.addEventListener('pointercancel', this._up);
        },

        onMove(e) {
            if (!this.dragItem || !this._ghostEl) return;
            this._ghost.x = e.clientX - this._ghost.dx;
            this._ghost.y = e.clientY - this._ghost.dy;
            this._ghostEl.style.left = `${this._ghost.x}px`;
            this._ghostEl.style.top = `${this._ghost.y}px`;

            const over = this.cardAtClientY(e.clientY);
            if (!over || over === this.dragItem) return;

            // Move the placeholder before or after the hovered card based on
            // their current relative order; the others glide into place.
            const before = this.rowRects();
            const rows = this.rows();
            if (rows.indexOf(over) < rows.indexOf(this.dragItem)) {
                over.parentNode.insertBefore(this.dragItem, over);
            } else {
                over.parentNode.insertBefore(this.dragItem, over.nextElementSibling);
            }
            this.glide(before);
        },

        // Which card sits under the given viewport Y, by row midpoint.
        cardAtClientY(clientY) {
            const rows = this.rows();
            for (const row of rows) {
                if (row === this.dragItem) continue;
                const r = row.getBoundingClientRect();
                if (clientY < r.top + r.height / 2) return row;
            }
            return rows[rows.length - 1] ?? null;
        },

        endDrag() {
            document.removeEventListener('pointermove', this._move);
            document.removeEventListener('pointerup', this._up);
            document.removeEventListener('pointercancel', this._up);
            const card = this.dragItem;
            const ghost = this._ghostEl;
            if (!card) return;
            const moved = this.rows().indexOf(card) !== this._origin;
            const finish = () => {
                ghost?.remove();
                card.removeAttribute('data-dragging');
                this.dragItem = null;
                this._ghostEl = null;
                if (moved) {
                    this.announce(card);
                    this.$dispatch('invites:change', { order: this.rows().map((row) => row.querySelector('h3')?.textContent.trim() ?? '') });
                }
            };
            if (ghost && !this._reduced) {
                const to = card.getBoundingClientRect();
                const anim = ghost.animate(
                    [{ left: `${this._ghost.x}px`, top: `${this._ghost.y}px`, transform: 'scale(1.02)' }, { left: `${to.left}px`, top: `${to.top}px`, transform: 'none' }],
                    { duration: 180, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'forwards' },
                );
                anim.onfinish = finish;
                anim.oncancel = finish;
            } else {
                finish();
            }
        },
    }));
});