fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/tickets.js

@@ -0,0 +1,966 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import gsap from "gsap";
+import { Fauna } from "fauna-api";
+import { Crown } from "./brands.js";
+import { Chat } from "./chat.js";
+import { authorColorSeed, colorFromSeed, PinMark } from "./cursor.js";
+import { parseRichText } from "./tokenized.js";
+import { sendInformaticToast } from "./toast.js";
+import { create, list, TicketRoom, ticketChatAutoEnabled } from "../tickets.js";
+function ticketChatEmails(room) {
+    return room.getPresences().map((p) => p.profile.email ?? "");
+}
+function applyTicketChat(room, reporter, inst) {
+    const enabled = ticketChatAutoEnabled(ticketChatEmails(room), reporter ?? "");
+    inst?.setMode(enabled ? "assistant" : "thread");
+    inst?.setModels(enabled ? undefined : Fauna.Parrot.Generative.Text.AUTO);
+}
+const MIN_W = 320;
+const MIN_H = 360;
+const MARGIN = 8;
+const EDGE_GOLD = "rgba(247, 239, 138, 0.28)";
+const EDGE_CLEAR = "rgba(247, 239, 138, 0)";
+const BAR_GOLD = "rgba(247, 239, 138, 0.12)";
+const BAR_LINE = "rgba(247, 239, 138, 0.7)";
+function lightChrome(el, on) {
+    gsap.killTweensOf(el);
+    if (el.classList.contains("tickets-panel-bar")) {
+        gsap.to(el, {
+            backgroundColor: on ? BAR_GOLD : EDGE_CLEAR,
+            borderBottomColor: on ? BAR_LINE : EDGE_CLEAR,
+            duration: 0.28,
+            ease: "power2.out",
+        });
+        return;
+    }
+    gsap.to(el, {
+        backgroundColor: on ? EDGE_GOLD : EDGE_CLEAR,
+        duration: 0.28,
+        ease: "power2.out",
+    });
+}
+const EDGES = [
+    { edge: "n", className: "tickets-resize-n" },
+    { edge: "s", className: "tickets-resize-s" },
+    { edge: "e", className: "tickets-resize-e" },
+    { edge: "w", className: "tickets-resize-w" },
+    { edge: "ne", className: "tickets-resize-ne" },
+    { edge: "nw", className: "tickets-resize-nw" },
+    { edge: "se", className: "tickets-resize-se" },
+    { edge: "sw", className: "tickets-resize-sw" },
+];
+function defaultFrame() {
+    const w = Math.min(420, window.innerWidth - 32);
+    const h = Math.min(window.innerHeight * 0.7, window.innerHeight - 32);
+    return clampFrame({
+        x: window.innerWidth - w - 16,
+        y: (window.innerHeight - h) / 2,
+        w,
+        h,
+    });
+}
+function clampFrame(f) {
+    const w = Math.max(MIN_W, Math.min(f.w, window.innerWidth - MARGIN * 2));
+    const h = Math.max(MIN_H, Math.min(f.h, window.innerHeight - MARGIN * 2));
+    return {
+        w,
+        h,
+        x: Math.max(MARGIN, Math.min(f.x, window.innerWidth - w - MARGIN)),
+        y: Math.max(MARGIN, Math.min(f.y, window.innerHeight - h - MARGIN)),
+    };
+}
+function applyEdge(origin, edge, dx, dy) {
+    let { x, y, w, h } = origin;
+    if (edge.includes("e"))
+        w = origin.w + dx;
+    if (edge.includes("s"))
+        h = origin.h + dy;
+    if (edge.includes("w")) {
+        w = origin.w - dx;
+        x = origin.x + dx;
+    }
+    if (edge.includes("n")) {
+        h = origin.h - dy;
+        y = origin.y + dy;
+    }
+    if (w < MIN_W) {
+        if (edge.includes("w"))
+            x = origin.x + origin.w - MIN_W;
+        w = MIN_W;
+    }
+    if (h < MIN_H) {
+        if (edge.includes("n"))
+            y = origin.y + origin.h - MIN_H;
+        h = MIN_H;
+    }
+    return clampFrame({ x, y, w, h });
+}
+function relativeTime(ms) {
+    const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
+    if (s < 45)
+        return "Just now";
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    const d = Math.round(h / 24);
+    if (d < 7)
+        return `${d}d ago`;
+    return new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+function lastPreview(ticket) {
+    const last = ticket.last;
+    if (!last)
+        return "No messages yet";
+    const texts = [];
+    for (const part of last.parts ?? []) {
+        if (!part || typeof part !== "object")
+            continue;
+        const row = part;
+        if (row.type === "TEXT" && typeof row.text === "string")
+            texts.push(row.text);
+    }
+    const raw = texts.join(" ").trim();
+    if (!raw)
+        return "No messages yet";
+    const plain = parseRichText(raw)
+        .filter((part) => part.kind === "text")
+        .map((part) => part.text)
+        .join(" ")
+        .replace(/\s+/g, " ")
+        .trim();
+    return plain || "No messages yet";
+}
+function sourceMatches(ticketSource, page) {
+    if (!ticketSource || !page)
+        return false;
+    try {
+        const a = new URL(ticketSource);
+        const b = new URL(page);
+        return a.origin === b.origin && a.pathname === b.pathname;
+    }
+    catch {
+        return ticketSource === page;
+    }
+}
+function pinFromToken(value, label) {
+    try {
+        const data = JSON.parse(value);
+        if (typeof data.x === "number" && typeof data.y === "number") {
+            return { x: data.x, y: data.y, note: data.note ?? label ?? "" };
+        }
+    }
+    catch { /* skip */ }
+    return null;
+}
+function pinsFromParts(parts) {
+    const found = [];
+    for (const part of parts) {
+        if (part.kind !== "token" || part.token.type !== "pin")
+            continue;
+        const pin = pinFromToken(part.token.value, part.token.label);
+        if (pin)
+            found.push(pin);
+    }
+    return found;
+}
+function pinsFromHistory(chat) {
+    if (!chat)
+        return [];
+    const found = [];
+    for (const message of chat.getHistory()) {
+        const author = authorColorSeed(message.author);
+        for (const pin of pinsFromParts(parseRichText(message.text ?? ""))) {
+            found.push({ ...pin, author });
+        }
+    }
+    return found;
+}
+function pinSnapshot(pins) {
+    return pins.map((pin) => JSON.stringify({ x: pin.x, y: pin.y, note: pin.note })).join("\0");
+}
+const CREATE_REST = {
+    backgroundColor: "#f7ef8a",
+    borderColor: "#f7ef8a",
+    color: "#111416",
+    y: 0,
+    boxShadow: "0 0 0 0 rgba(247, 239, 138, 0)",
+};
+const CREATE_HOVER = {
+    backgroundColor: "#fff8b8",
+    borderColor: "#fff8b8",
+    color: "#111416",
+    y: -1,
+    boxShadow: "0 8px 28px rgba(247, 239, 138, 0.11)",
+};
+function bindCreateHover(root) {
+    const enter = (e) => {
+        const btn = e.target.closest("button");
+        if (!btn || !root.contains(btn) || !btn.classList.contains("tickets-create"))
+            return;
+        gsap.killTweensOf(btn);
+        gsap.to(btn, { ...CREATE_HOVER, duration: 0.22, ease: "power2.out" });
+    };
+    const leave = (e) => {
+        const btn = e.target.closest("button");
+        if (!btn || !root.contains(btn) || !btn.classList.contains("tickets-create"))
+            return;
+        const next = e.relatedTarget;
+        if (next && btn.contains(next))
+            return;
+        gsap.killTweensOf(btn);
+        gsap.to(btn, { ...CREATE_REST, duration: 0.22, ease: "power2.out" });
+    };
+    root.addEventListener("mouseover", enter);
+    root.addEventListener("mouseout", leave);
+    return () => {
+        root.removeEventListener("mouseover", enter);
+        root.removeEventListener("mouseout", leave);
+    };
+}
+function PinDraft(props) {
+    const root = useRef(null);
+    const timeline = useRef(null);
+    const left = useRef(false);
+    const finish = () => {
+        if (left.current)
+            return;
+        left.current = true;
+        props.onLeft();
+    };
+    useLayoutEffect(() => {
+        const el = root.current;
+        if (!el)
+            return;
+        const clone = props.readOnly ? null : el.querySelector(".tickets-pin-clone");
+        const field = el.querySelector(".tickets-pin-field");
+        const actions = el.querySelector(".tickets-pin-actions");
+        const tl = gsap.timeline();
+        if (clone)
+            tl.fromTo(clone, { autoAlpha: 0, scale: 0.7 }, { autoAlpha: 1, scale: 1, duration: 0.22, ease: "power2.out" }, 0);
+        if (field) {
+            tl.fromTo(field, { autoAlpha: 0, scaleX: 0.28 }, { autoAlpha: 1, scaleX: 1, duration: 0.36, ease: "power3.out", transformOrigin: "0% 100%" }, 0);
+        }
+        if (actions) {
+            tl.fromTo(actions, { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: 0.28, ease: "power2.out" }, 0.12);
+        }
+        timeline.current = tl;
+        const undo = props.readOnly ? () => { } : bindCreateHover(el);
+        return () => {
+            undo();
+            tl.kill();
+            timeline.current = null;
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const tl = timeline.current;
+        if (props.leaving) {
+            if (!tl) {
+                finish();
+                return;
+            }
+            tl.eventCallback("onReverseComplete", finish);
+            tl.reverse();
+            return;
+        }
+        if (!tl || !tl.reversed())
+            return;
+        tl.eventCallback("onReverseComplete", null);
+        left.current = false;
+        tl.play();
+    }, [props.leaving]);
+    return (_jsxs("div", { ref: root, className: `tickets-pin-draft${props.nested ? " is-nested" : ""}`, style: {
+            ...(props.nested ? undefined : { left: `${props.x * 100}%`, top: `${props.y * 100}%` }),
+            color: props.color,
+        }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: [!props.readOnly && (_jsx(PinMark, { className: "tickets-pin-clone" })), _jsx("div", { className: "tickets-pin-draft-inner", children: _jsxs("div", { className: "tickets-pin-stack", children: [_jsxs("div", { className: `tickets-pin-field${props.readOnly ? " is-readonly" : ""}`, children: [_jsx("span", { children: `${props.note || "Pin note"}\u200b` }), !props.readOnly && (_jsx("textarea", { autoFocus: true, rows: 1, value: props.note, placeholder: "Pin note", disabled: props.busy, onChange: (e) => props.onNote(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter" && !e.shiftKey) {
+                                            e.preventDefault();
+                                            props.onCommit();
+                                        }
+                                        if (e.key === "Escape")
+                                            props.onCancel();
+                                    } }))] }), !props.readOnly && (_jsxs("div", { className: "tickets-pin-actions", children: [_jsx("button", { type: "button", className: "tickets-cancel", disabled: props.busy, onClick: props.onCancel, children: _jsx("span", { children: "Cancel" }) }), _jsxs("button", { type: "button", className: "tickets-create", disabled: props.busy, onClick: props.onCommit, children: [_jsx("span", { className: "material-symbols-outlined", children: "push_pin" }), _jsx("span", { children: "Pin" })] })] }))] }) })] }));
+}
+function pinToken(pin) {
+    return {
+        type: "pin",
+        value: JSON.stringify({ x: pin.x, y: pin.y, note: pin.note }),
+        label: pin.note.trim() || "Pin",
+        icon: "push_pin",
+    };
+}
+function Pins(props) {
+    const [pins, setPins] = useState([]);
+    const [draft, setDraft] = useState(null);
+    const [leaving, setLeaving] = useState(false);
+    const [peek, setPeek] = useState(null);
+    const [peekLeaving, setPeekLeaving] = useState(false);
+    const [note, setNote] = useState("");
+    const [cursor, setCursor] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const nextDraft = useRef(null);
+    const draftSeq = useRef(0);
+    const peekRef = useRef(null);
+    const snapshot = useRef("");
+    const match = !props.ticket || sourceMatches(props.ticket.source, props.page);
+    useEffect(() => {
+        if (!match) {
+            if (snapshot.current === "")
+                return;
+            snapshot.current = "";
+            setPins([]);
+            return;
+        }
+        if (!props.chat)
+            return;
+        const apply = (parts) => {
+            const next = [
+                ...pinsFromHistory(props.chat),
+                ...pinsFromParts(parts ?? props.chat.getParts()).map((pin) => ({
+                    ...pin,
+                    author: pin.author || props.author,
+                })),
+            ];
+            const key = pinSnapshot(next);
+            if (key === snapshot.current)
+                return;
+            snapshot.current = key;
+            setPins(next);
+        };
+        apply();
+        return props.chat.watchInput((parts) => apply(parts));
+    }, [props.chat, props.revision, match, props.ticket?.id]);
+    if (!match)
+        return null;
+    const pointOf = (e) => ({
+        x: e.clientX / window.innerWidth,
+        y: e.clientY / window.innerHeight,
+    });
+    const overChrome = (e) => {
+        const target = e.target;
+        return Boolean(target.closest(".tickets-panel")
+            || target.closest(".tickets-pin-draft")
+            || target.closest(".tickets-pin-wrap"));
+    };
+    const closeDraft = (next) => {
+        nextDraft.current = next ?? null;
+        if (draft && !leaving)
+            setLeaving(true);
+        if (!draft) {
+            if (next) {
+                setDraft({ id: ++draftSeq.current, ...next });
+                setNote("");
+            }
+        }
+    };
+    const onDraftLeft = () => {
+        const next = nextDraft.current;
+        nextDraft.current = null;
+        setLeaving(false);
+        if (next) {
+            setDraft({ id: ++draftSeq.current, ...next });
+            setNote("");
+            return;
+        }
+        setDraft(null);
+        setNote("");
+    };
+    const onVignetteClick = (e) => {
+        if (overChrome(e) || busy)
+            return;
+        const point = pointOf(e);
+        setCursor(null);
+        if (draft) {
+            closeDraft(point);
+            return;
+        }
+        setDraft({ id: ++draftSeq.current, ...point });
+        setNote("");
+    };
+    const commit = async () => {
+        if (!draft || busy || leaving)
+            return;
+        const pin = { x: draft.x, y: draft.y, note: note.trim(), author: props.author };
+        if (props.chat) {
+            props.chat.insertToken(pinToken(pin));
+            closeDraft();
+            props.chat.focusInput();
+            return;
+        }
+        if (!props.onCreate)
+            return;
+        setBusy(true);
+        try {
+            await props.onCreate(pin);
+            setPins((prev) => [...prev, pin]);
+            closeDraft();
+        }
+        catch {
+            closeDraft();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("div", { className: `tickets-pin-layer${cursor ? " is-aiming" : ""}`, onClick: onVignetteClick, onMouseMove: (e) => {
+            if (overChrome(e)) {
+                setCursor(null);
+                return;
+            }
+            setCursor(pointOf(e));
+        }, onMouseLeave: () => setCursor(null), children: [cursor && (_jsx("div", { className: "tickets-pin tickets-pin-cursor", style: { left: `${cursor.x * 100}%`, top: `${cursor.y * 100}%` }, children: _jsx(PinMark, {}) })), pins.map((pin, i) => (_jsxs("div", { className: `tickets-pin-wrap${peek === i ? " is-peeking" : ""}`, ref: (el) => {
+                    const key = `${pin.x}:${pin.y}:${pin.note}`;
+                    const target = el?.querySelector(".tickets-pin-wiggle") ?? el;
+                    if (target)
+                        props.pinRefs.current.set(key, target);
+                    else
+                        props.pinRefs.current.delete(key);
+                }, style: {
+                    left: `${pin.x * 100}%`,
+                    top: `${pin.y * 100}%`,
+                    color: pin.author ? colorFromSeed(pin.author) : undefined,
+                }, onMouseEnter: () => {
+                    peekRef.current = i;
+                    setPeek(i);
+                    setPeekLeaving(false);
+                }, onMouseLeave: () => {
+                    if (peekRef.current === i)
+                        setPeekLeaving(true);
+                }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: [_jsx("span", { className: "tickets-pin-wiggle", children: _jsx(PinMark, {}) }), peek === i && (_jsx(PinDraft, { readOnly: true, nested: true, color: pin.author ? colorFromSeed(pin.author) : undefined, x: pin.x, y: pin.y, note: pin.note, busy: false, leaving: peekLeaving, onNote: () => { }, onCommit: () => { }, onCancel: () => { }, onLeft: () => {
+                            if (peekRef.current !== i)
+                                return;
+                            peekRef.current = null;
+                            setPeek(null);
+                            setPeekLeaving(false);
+                        } }))] }, `${pin.x}:${pin.y}:${i}`))), draft && (_jsx(PinDraft, { x: draft.x, y: draft.y, color: props.author ? colorFromSeed(props.author) : undefined, note: note, busy: busy, leaving: leaving, onNote: setNote, onCommit: () => void commit(), onCancel: () => closeDraft(), onLeft: onDraftLeft }, draft.id))] }));
+}
+function Compose(props) {
+    return (_jsxs("div", { className: "tickets-compose", children: [_jsx("input", { value: props.title, placeholder: "What do you need help with", onChange: (e) => props.onTitle(e.target.value), onKeyDown: (e) => { if (e.key === "Enter")
+                    props.onCreate(); } }), _jsxs("button", { type: "button", className: "tickets-create", disabled: props.busy, onClick: props.onCreate, children: [_jsx("span", { className: "material-symbols-outlined", children: "add" }), _jsx("span", { children: "New ticket" })] })] }));
+}
+function EmptyHero(props) {
+    const root = useRef(null);
+    useLayoutEffect(() => {
+        const el = root.current;
+        if (!el)
+            return;
+        const copy = el.querySelectorAll(".tickets-empty-copy > *");
+        const ghost = el.querySelector(".tickets-empty-ghost");
+        gsap.fromTo(copy, { y: 12, opacity: 0 }, { y: 0, opacity: 1, duration: 0.55, stagger: 0.055, ease: "power3.out" });
+        if (ghost)
+            gsap.fromTo(ghost, { y: 16, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: "power3.out" });
+        return () => {
+            gsap.killTweensOf([copy, ghost]);
+            gsap.set(copy, { clearProps: "transform,opacity" });
+            if (ghost)
+                gsap.set(ghost, { clearProps: "transform,opacity" });
+        };
+    }, []);
+    return (_jsxs("div", { className: "tickets-empty-hero", ref: root, children: [_jsxs("div", { className: "tickets-empty-body", children: [_jsxs("div", { className: "tickets-empty-copy", children: [_jsx("div", { className: "tickets-empty-ornament", children: _jsx("span", { className: "tickets-empty-rule" }) }), _jsx("div", { className: "tickets-empty-kicker", children: "Need a hand" }), _jsx("div", { className: "tickets-empty-title", children: "Create a ticket" }), _jsx("div", { className: "tickets-empty-hint", children: "Tell us what is going on and we will pick it up." }), _jsxs("div", { className: "tickets-empty-features", children: [_jsx("span", { children: "Pin the page" }), _jsx("span", { children: "Chat with us" }), _jsx("span", { children: "Get an answer" })] })] }), _jsx("div", { className: "tickets-empty-visual", children: _jsxs("div", { className: "tickets-empty-ghost", children: [_jsxs("div", { className: "tickets-empty-ghost-head", children: [_jsx("span", { className: "tickets-empty-ghost-dot" }), _jsx("span", { className: "tickets-empty-ghost-id" }), _jsx("span", { className: "tickets-empty-ghost-title" }), _jsx("span", { className: "tickets-empty-ghost-status" })] }), _jsx("div", { className: "tickets-empty-ghost-line" }), _jsx("div", { className: "tickets-empty-ghost-line short" }), _jsxs("div", { className: "tickets-empty-ghost-foot", children: [_jsx("i", {}), _jsx("i", {})] })] }) })] }), _jsx(Compose, { title: props.title, busy: props.busy, onTitle: props.onTitle, onCreate: props.onCreate })] }));
+}
+export function Tickets(props) {
+    const page = props.source ?? (typeof location !== "undefined" ? location.href : "");
+    const [tickets, setTickets] = useState([]);
+    const pageTickets = tickets.filter((ticket) => sourceMatches(ticket.source, page));
+    const [loaded, setLoaded] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [title, setTitle] = useState("");
+    const [ticketRoom, setTicketRoom] = useState(null);
+    const [chatReady, setChatReady] = useState(null);
+    const [chat, setChat] = useState(null);
+    const chatInstRef = useRef(null);
+    const [pinRevision, setPinRevision] = useState(0);
+    const pinRefs = useRef(new Map());
+    const chatOptions = useRef(null);
+    const chatRoomRef = useRef(null);
+    const chatSelfRef = useRef(null);
+    const ticketRoomRef = useRef(null);
+    const [frame, setFrame] = useState(() => defaultFrame());
+    const vignetteRef = useRef(null);
+    const panelRef = useRef(null);
+    const boardRef = useRef(null);
+    const chatPaneRef = useRef(null);
+    const leavingRef = useRef(false);
+    const pagingRef = useRef(false);
+    const pendingPin = useRef(null);
+    const attachChat = useCallback((inst) => {
+        chatInstRef.current = inst;
+        setChat((prev) => (prev === inst ? prev : inst));
+        if (inst && chatRoomRef.current) {
+            applyTicketChat(chatRoomRef.current, ticketRoomRef.current?.ticket.reporter, inst);
+        }
+    }, []);
+    const dragRef = useRef(null);
+    const startDrag = (kind, e) => {
+        e.preventDefault();
+        window.getSelection()?.removeAllRanges();
+        const handle = e.currentTarget;
+        handle.setPointerCapture?.(e.pointerId);
+        document.body.style.userSelect = "none";
+        document.body.style.setProperty("-webkit-user-select", "none");
+        handle.closest(".tickets-overlay")?.classList.add("is-dragging");
+        dragRef.current = {
+            pointerId: e.pointerId,
+            kind,
+            origin: frame,
+            startX: e.clientX,
+            startY: e.clientY,
+            handle,
+        };
+        const onMove = (ev) => {
+            const drag = dragRef.current;
+            if (!drag || drag.pointerId !== ev.pointerId)
+                return;
+            ev.preventDefault();
+            const dx = ev.clientX - drag.startX;
+            const dy = ev.clientY - drag.startY;
+            if (drag.kind === "move") {
+                setFrame(clampFrame({ ...drag.origin, x: drag.origin.x + dx, y: drag.origin.y + dy }));
+                return;
+            }
+            setFrame(applyEdge(drag.origin, drag.kind, dx, dy));
+        };
+        const onUp = (ev) => {
+            if (dragRef.current?.pointerId !== ev.pointerId)
+                return;
+            const edge = dragRef.current.handle;
+            dragRef.current = null;
+            document.body.style.userSelect = "";
+            document.body.style.removeProperty("-webkit-user-select");
+            handle.closest(".tickets-overlay")?.classList.remove("is-dragging");
+            try {
+                handle.releasePointerCapture(ev.pointerId);
+            }
+            catch { /* noop */ }
+            if (edge && !edge.matches(":hover"))
+                lightChrome(edge, false);
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onUp);
+    };
+    const startMove = (e) => {
+        if (e.target.closest("button"))
+            return;
+        startDrag("move", e);
+    };
+    const startResize = (edge, e) => {
+        e.stopPropagation();
+        startDrag(edge, e);
+    };
+    useEffect(() => {
+        const onResize = () => setFrame((prev) => clampFrame(prev));
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    useLayoutEffect(() => {
+        const vignette = vignetteRef.current;
+        const panel = panelRef.current;
+        if (!vignette || !panel)
+            return;
+        gsap.set(vignette, { opacity: 0 });
+        gsap.set(panel, { x: 80, autoAlpha: 0 });
+        gsap.to(vignette, { opacity: 1, duration: 0.48, ease: "power2.out" });
+        gsap.to(panel, {
+            x: 0,
+            autoAlpha: 1,
+            duration: 0.52,
+            delay: 0.05,
+            ease: "power3.out",
+            boxShadow: "0 0 0 4px rgba(247, 239, 138, 0.16), 0 22px 48px -16px rgba(247, 239, 138, 0.28)",
+        });
+        return () => {
+            gsap.killTweensOf([vignette, panel]);
+        };
+    }, []);
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const restBorder = "rgba(247, 239, 138, 0.35)";
+        const hoverBorder = "rgba(247, 239, 138, 0.9)";
+        const restBg = "rgba(0, 0, 0, 0)";
+        const hoverBg = "rgba(247, 239, 138, 0.12)";
+        const stillInside = (btn, node) => Boolean(node && btn.contains(node));
+        const enter = (e) => {
+            const btn = e.target.closest("button");
+            if (!btn || !panel.contains(btn))
+                return;
+            if (stillInside(btn, e.relatedTarget))
+                return;
+            if (btn.classList.contains("tickets-row")) {
+                const line = btn.querySelector(".tickets-row-line");
+                if (!line)
+                    return;
+                gsap.killTweensOf(line);
+                gsap.to(line, { scaleX: 1, duration: 0.34, ease: "power2.inOut" });
+                return;
+            }
+            gsap.killTweensOf(btn);
+            if (btn.classList.contains("tickets-create")) {
+                gsap.to(btn, { ...CREATE_HOVER, duration: 0.22, ease: "power2.out" });
+                return;
+            }
+            gsap.to(btn, { borderColor: hoverBorder, backgroundColor: hoverBg, duration: 0.28, ease: "power2.out" });
+        };
+        const leave = (e) => {
+            const btn = e.target.closest("button");
+            if (!btn || !panel.contains(btn))
+                return;
+            if (stillInside(btn, e.relatedTarget))
+                return;
+            if (btn.classList.contains("tickets-row")) {
+                const line = btn.querySelector(".tickets-row-line");
+                if (!line)
+                    return;
+                gsap.killTweensOf(line);
+                gsap.to(line, { scaleX: 0, duration: 0.28, ease: "power2.inOut" });
+                return;
+            }
+            gsap.killTweensOf(btn);
+            if (btn.classList.contains("tickets-create")) {
+                gsap.to(btn, { ...CREATE_REST, duration: 0.22, ease: "power2.out" });
+                return;
+            }
+            gsap.to(btn, { borderColor: restBorder, backgroundColor: restBg, duration: 0.28, ease: "power2.out" });
+        };
+        panel.addEventListener("mouseover", enter);
+        panel.addEventListener("mouseout", leave);
+        const handles = Array.from(panel.querySelectorAll(".tickets-resize, .tickets-panel-bar"));
+        const drop = [];
+        for (const edge of handles) {
+            gsap.set(edge, edge.classList.contains("tickets-panel-bar")
+                ? { backgroundColor: EDGE_CLEAR, borderBottomColor: EDGE_CLEAR }
+                : { backgroundColor: EDGE_CLEAR });
+            const onEnter = () => lightChrome(edge, true);
+            const onLeave = () => {
+                if (dragRef.current?.handle === edge)
+                    return;
+                lightChrome(edge, false);
+            };
+            edge.addEventListener("pointerenter", onEnter);
+            edge.addEventListener("pointerleave", onLeave);
+            drop.push(() => {
+                edge.removeEventListener("pointerenter", onEnter);
+                edge.removeEventListener("pointerleave", onLeave);
+                gsap.killTweensOf(edge);
+            });
+        }
+        return () => {
+            panel.removeEventListener("mouseover", enter);
+            panel.removeEventListener("mouseout", leave);
+            for (const undo of drop)
+                undo();
+        };
+    }, []);
+    const load = async () => {
+        try {
+            setTickets(await list(props.credentials));
+        }
+        catch (err) {
+            void sendInformaticToast(err?.message ?? "Could not load tickets.", "error");
+        }
+        finally {
+            setLoaded(true);
+        }
+    };
+    useEffect(() => { void load(); }, [props.credentials.token]);
+    useEffect(() => {
+        if (props.ticketId)
+            void openTicket(props.ticketId);
+    }, [props.ticketId]);
+    useEffect(() => {
+        return () => {
+            try {
+                chatRoomRef.current?.disconnect();
+            }
+            catch { /* noop */ }
+            try {
+                ticketRoomRef.current?.disconnect();
+            }
+            catch { /* noop */ }
+        };
+    }, []);
+    const wiggleTokenPin = (token) => {
+        if (token.type !== "pin")
+            return;
+        const parsed = pinFromToken(token.value, token.label);
+        if (!parsed)
+            return;
+        const el = pinRefs.current.get(`${parsed.x}:${parsed.y}:${parsed.note}`);
+        if (!el)
+            return;
+        gsap.killTweensOf(el);
+        gsap.timeline()
+            .to(el, { scale: 1.25, rotation: 12, duration: 0.12, ease: "power2.inOut" })
+            .to(el, { rotation: -10, duration: 0.1, ease: "power2.inOut" })
+            .to(el, { rotation: 8, duration: 0.1, ease: "power2.inOut" })
+            .to(el, { scale: 1, rotation: 0, duration: 0.18, ease: "power2.inOut" });
+    };
+    const refreshTicket = (next) => {
+        setChatReady((prev) => prev ? { ...prev, ticket: next.ticket } : prev);
+    };
+    const openTicket = async (id) => {
+        setBusy(true);
+        try {
+            let next;
+            try {
+                ;
+                ({ room: next } = await TicketRoom.connect(props.credentials, { id }, {
+                    onPresence: (r) => {
+                        refreshTicket(r);
+                    },
+                    onEvent: (r) => {
+                        refreshTicket(r);
+                        return true;
+                    },
+                }));
+            }
+            catch (err) {
+                void sendInformaticToast(err?.message ?? "Could not open the ticket room.", "error");
+                return;
+            }
+            ticketRoomRef.current = next;
+            setTicketRoom(next);
+            let chatRoom;
+            let self;
+            try {
+                ;
+                ({ room: chatRoom, self } = await next.getChat({
+                    onPresence: () => {
+                        refreshTicket(next);
+                        const room = chatRoomRef.current;
+                        if (room)
+                            applyTicketChat(room, next.ticket.reporter, chatInstRef.current);
+                    },
+                    onMessage: () => setPinRevision((n) => n + 1),
+                }));
+            }
+            catch (err) {
+                void sendInformaticToast(err?.message ?? "Could not open the chat room.", "error");
+                return;
+            }
+            chatRoomRef.current = chatRoom;
+            chatSelfRef.current = self;
+            applyTicketChat(chatRoom, next.ticket.reporter, chatInstRef.current);
+            const ready = {
+                room: chatRoom,
+                self,
+                ticket: next.ticket,
+            };
+            const enabled = ticketChatAutoEnabled(ticketChatEmails(chatRoom), next.ticket.reporter ?? "");
+            chatOptions.current = {
+                ...(enabled ? {} : { models: Fauna.Parrot.Generative.Text.AUTO }),
+                placeholder: "Write a message",
+                mode: enabled ? "assistant" : "thread",
+                onTokenClick: wiggleTokenPin,
+                room: {
+                    room: chatRoom,
+                    self,
+                    onRoomMessage: () => setPinRevision((n) => n + 1),
+                    onOlderLoaded: () => setPinRevision((n) => n + 1),
+                },
+            };
+            setChatReady(ready);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const createTicket = async (seed) => {
+        setBusy(true);
+        try {
+            const created = await create(props.credentials, {
+                title: (seed?.title ?? title).trim() || undefined,
+                source: page,
+            });
+            setTitle("");
+            setTickets((prev) => prev.some((row) => row.id === created.id) ? prev : [created, ...prev]);
+            if (seed?.pin)
+                pendingPin.current = seed.pin;
+            await openTicket(created.id);
+        }
+        catch (err) {
+            pendingPin.current = null;
+            void sendInformaticToast(err?.message ?? "Could not create ticket.", "error");
+            setBusy(false);
+            return false;
+        }
+        return true;
+    };
+    const teardownRoom = () => {
+        try {
+            chatReady?.room.disconnect();
+        }
+        catch { /* noop */ }
+        try {
+            ticketRoom?.disconnect();
+        }
+        catch { /* noop */ }
+        chatOptions.current = null;
+        chatRoomRef.current = null;
+        chatSelfRef.current = null;
+        ticketRoomRef.current = null;
+        setChat(null);
+        setChatReady(null);
+        setTicketRoom(null);
+        pendingPin.current = null;
+        void load();
+    };
+    const closeRoom = () => {
+        if (pagingRef.current)
+            return;
+        const board = boardRef.current;
+        const chatPane = chatPaneRef.current;
+        if (!chatReady || !chatPane) {
+            teardownRoom();
+            return;
+        }
+        pagingRef.current = true;
+        gsap.killTweensOf([board, chatPane].filter(Boolean));
+        const tl = gsap.timeline({
+            onComplete: () => {
+                pagingRef.current = false;
+                teardownRoom();
+                if (board)
+                    gsap.set(board, { autoAlpha: 1, y: 0 });
+            },
+        });
+        tl.to(chatPane, { autoAlpha: 0, y: 16, duration: 0.28, ease: "power2.in" });
+        if (board)
+            tl.to(board, { autoAlpha: 1, y: 0, duration: 0.4, ease: "power3.out" }, "-=0.1");
+    };
+    const dismiss = () => {
+        if (leavingRef.current)
+            return;
+        leavingRef.current = true;
+        const vignette = vignetteRef.current;
+        const panel = panelRef.current;
+        const finish = () => {
+            teardownRoom();
+            props.onClose?.();
+        };
+        if (!vignette || !panel) {
+            finish();
+            return;
+        }
+        gsap.killTweensOf([vignette, panel]);
+        gsap.to(vignette, { opacity: 0, duration: 0.32, ease: "power2.in" });
+        gsap.to(panel, {
+            x: 80,
+            autoAlpha: 0,
+            duration: 0.32,
+            ease: "power2.in",
+            boxShadow: "0 0 0 0 rgba(247, 239, 138, 0), 0 18px 48px -24px rgba(0, 0, 0, 0.55)",
+            onComplete: finish,
+        });
+    };
+    const chatOpen = Boolean(chatReady);
+    useLayoutEffect(() => {
+        const board = boardRef.current;
+        const chatPane = chatPaneRef.current;
+        if (!chatOpen || !chatPane)
+            return;
+        pagingRef.current = true;
+        gsap.killTweensOf([board, chatPane].filter(Boolean));
+        gsap.set(chatPane, { autoAlpha: 0, y: 20 });
+        const tl = gsap.timeline({
+            onComplete: () => { pagingRef.current = false; },
+        });
+        if (board)
+            tl.to(board, { autoAlpha: 0, y: -14, duration: 0.28, ease: "power2.in" }, 0);
+        tl.to(chatPane, { autoAlpha: 1, y: 0, duration: 0.44, ease: "power3.out" }, 0.08);
+        return () => {
+            gsap.killTweensOf([board, chatPane].filter(Boolean));
+            pagingRef.current = false;
+        };
+    }, [chatOpen]);
+    useEffect(() => {
+        if (!chat)
+            return;
+        setPinRevision((n) => n + 1);
+        const pin = pendingPin.current;
+        if (!pin)
+            return;
+        pendingPin.current = null;
+        chat.insertToken(pinToken(pin));
+        chat.focusInput();
+    }, [chat]);
+    return (_jsxs("div", { className: "tickets-overlay", children: [_jsx("div", { className: "tickets-vignette", ref: vignetteRef }), _jsx(Pins, { chat: chat, ticket: chatReady?.ticket, page: page, revision: pinRevision, author: props.credentials.email, pinRefs: pinRefs, onCreate: async (pin) => {
+                    if (!await createTicket({ title: pin.note || undefined, pin })) {
+                        throw new Error("Could not create ticket.");
+                    }
+                } }), _jsxs("div", { ref: panelRef, className: "tickets-panel", style: { left: frame.x, top: frame.y, width: frame.w, height: frame.h }, children: [EDGES.map((handle) => (_jsx("div", { className: `tickets-resize ${handle.className}`, onPointerDown: (e) => startResize(handle.edge, e) }, handle.edge))), _jsxs("div", { className: "tickets-panel-bar", onPointerDown: startMove, children: [_jsxs("span", { className: "tickets-panel-brand", children: [_jsx(Crown, {}), _jsx("span", { children: chatReady ? (chatReady.ticket.title || "Ticket") : "Support" })] }), _jsxs("div", { className: "tickets-panel-actions", children: [chatReady && !props.ticketId && (_jsxs("button", { type: "button", className: "tickets-create", onClick: closeRoom, children: [_jsx("span", { className: "material-symbols-outlined", children: "list" }), _jsx("span", { children: "Tickets" })] })), (!chatReady || props.ticketId) && (_jsxs("button", { type: "button", className: "tickets-create", onClick: dismiss, children: [_jsx("span", { className: "material-symbols-outlined", children: "close" }), _jsx("span", { children: "Close" })] }))] })] }), _jsxs("div", { className: "tickets-stage", children: [_jsxs("div", { ref: boardRef, className: "tickets-stage-pane", "aria-hidden": chatOpen, children: [loaded && pageTickets.length === 0 && (_jsx(EmptyHero, { title: title, busy: busy, onTitle: setTitle, onCreate: () => void createTicket() })), pageTickets.length > 0 && (_jsxs("div", { className: "tickets-board", children: [_jsx("div", { className: "tickets-board-head", children: "Open tickets" }), _jsx("div", { className: "tickets-board-rule" }), _jsx("div", { className: "tickets-list", children: pageTickets.map((ticket) => (_jsxs("button", { type: "button", className: `tickets-row${ticket.unread ? " is-unread" : ""}`, disabled: busy, onClick: () => void openTicket(ticket.id), children: [_jsxs("span", { className: "tickets-row-top", children: [_jsx("strong", { children: ticket.title || "Untitled" }), _jsx("time", { children: relativeTime(ticket.last?.createdAt.getTime() ?? ticket.updatedAt.getTime()) })] }), _jsx("span", { className: "tickets-row-preview", children: lastPreview(ticket) }), _jsx("i", { className: "tickets-row-line", "aria-hidden": true })] }, ticket.id))) }), _jsx("div", { className: "tickets-board-rule" }), _jsx(Compose, { title: title, busy: busy, onTitle: setTitle, onCreate: () => void createTicket() })] }))] }), chatReady && chatOptions.current && (_jsx("div", { ref: chatPaneRef, className: "tickets-stage-pane tickets-chat", children: _jsx(Chat, { ref: attachChat, options: chatOptions.current }) }))] })] })] }));
+}
+export function Support(props) {
+    const [open, setOpen] = useState(false);
+    const [ready, setReady] = useState(false);
+    const [unread, setUnread] = useState(false);
+    const btn = useRef(null);
+    const busy = useRef(false);
+    const seen = useRef(false);
+    useEffect(() => {
+        if (open)
+            return;
+        let live = true;
+        void list(props.credentials)
+            .then((rows) => {
+            if (live)
+                setUnread(rows.some((ticket) => ticket.unread));
+        })
+            .catch(() => { })
+            .finally(() => { if (live)
+            setReady(true); });
+        return () => { live = false; };
+    }, [props.credentials.token, open]);
+    const openSupport = () => {
+        if (busy.current || open)
+            return;
+        const el = btn.current;
+        if (!el) {
+            setOpen(true);
+            return;
+        }
+        busy.current = true;
+        gsap.killTweensOf(el);
+        gsap.timeline({
+            onComplete: () => {
+                setOpen(true);
+                busy.current = false;
+            },
+        })
+            .to(el, { y: -18, duration: 0.16, ease: "power2.out" })
+            .to(el, { y: 96, autoAlpha: 0, duration: 0.28, ease: "power2.in" });
+    };
+    useLayoutEffect(() => {
+        const el = btn.current;
+        if (!el || open)
+            return;
+        gsap.killTweensOf(el);
+        if (!seen.current) {
+            seen.current = true;
+            gsap.set(el, { y: 0, autoAlpha: 1 });
+            return;
+        }
+        gsap.fromTo(el, { y: 96, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.42, ease: "back.out(1.7)" });
+    }, [open]);
+    return (_jsxs(_Fragment, { children: [ready && (_jsxs("button", { ref: btn, type: "button", className: `tickets-support${unread ? " is-unread" : ""}`, onClick: openSupport, style: { pointerEvents: open ? "none" : "auto" }, tabIndex: open ? -1 : 0, "aria-hidden": open, children: [_jsx(Crown, {}), _jsx("span", { children: "Support" }), unread && _jsx("i", { className: "tickets-support-dot" })] })), open && (_jsx(Tickets, { ...props, onClose: () => {
+                    setOpen(false);
+                    props.onClose?.();
+                } }))] }));
+}
+export function createTickets(container, options) {
+    const root = createRoot(container);
+    flushSync(() => root.render(_jsx(Tickets, { ...options })));
+    return {
+        destroy: () => root.unmount(),
+    };
+}