visual-comments 0.0.0-stage → 0.2.0

package/dist/visual-comments.svelte.js

@@ -0,0 +1,693 @@
+import { mount, unmount, untrack } from 'svelte';
+import { aimAt } from './core/aim.js';
+import { Api } from './core/api.js';
+import { discover, inside, surfaceAt, toClient } from './core/surfaces.js';
+import { reveal, scrollerFrom } from './core/target.js';
+import { Threads } from './core/threads.svelte.js';
+import App from './ui/App.svelte';
+import Account from './ui/Account.svelte';
+import { properties, styles } from './ui/generated/styles.js';
+/** Pointer moves under this many pixels between press and release still count as a click. */
+const DRAG = 4;
+/**
+ * Comments on a page: pins, the comment mode, the list of threads and the
+ * sign-in, drawn in a shadow root over the page. One per page.
+ */
+export class VisualComments {
+    api;
+    store;
+    options = $state.raw();
+    /** Comment mode: clicking a surface starts a thread. Pins always show. */
+    active = $state(false);
+    /** Hide the list while keeping comment mode active. */
+    panelCollapsed = $state(false);
+    /** The thread whose conversation is open. */
+    openId = $state();
+    draft = $state();
+    filters = $state({ query: '', sort: 'date', showResolved: false, onlyMine: false, allPages: false });
+    /** Measured on every change of the page. */
+    surfaces = $state.raw([]);
+    /** Bumped whenever anything on the page may have moved. */
+    layout = $state(0);
+    page = $state('');
+    /** Where the host asked for the list to go. */
+    panelRect = $state.raw();
+    hostToggles = $state(false);
+    /** Where a click would start a thread, while it would. */
+    aim = $state.raw();
+    /** The pointer while it is over a surface in comment mode: the comment cursor is drawn there. */
+    cursor = $state.raw();
+    /** Opening a thread scrolls its element into view once it is found. */
+    revealing = $state();
+    /** An agent's request to join, from `#vc-connect=<id>`, while the dialog to approve it is shown. */
+    connecting = $state();
+    /** The reply field of the open thread is being written in. */
+    typing = $state(false);
+    /** Where the host says the viewer is, for others to see. */
+    whereabouts = $state.raw({});
+    doc;
+    host;
+    app;
+    slots = new Map();
+    frames = new Map();
+    cleanup = [];
+    pointer;
+    pressed;
+    measuring = 0;
+    aiming = 0;
+    animating = 0;
+    cursorSheet = new CSSStyleSheet();
+    focusDraftHandler;
+    linked;
+    typingTimer;
+    presenceTimer;
+    constructor(options, doc = document) {
+        this.options = options;
+        this.doc = doc;
+        this.api = new Api(options.endpoint ?? '/_comments');
+        this.store = new Threads(this.api, options.viewer);
+        this.host = doc.createElement('visual-comments');
+        this.host.setAttribute('data-vc-ignore', '');
+        this.host.style.cssText = 'position:fixed;inset:0;z-index:2147483600;pointer-events:none;display:block;';
+        this.start();
+    }
+    // State for the UI and hosts.
+    get viewer() { return this.store.viewer; }
+    get threads() { return this.store.threads; }
+    get unreadCount() { return this.store.unreadCount; }
+    get loading() { return this.store.loading; }
+    get open() {
+        return this.store.threads.find((thread) => thread.id === this.openId);
+    }
+    /** Everyone present in the space: people's tabs, this one included, and agents' tasks. Empty when signed out. */
+    get participants() { return this.store.participants; }
+    /** This tab's connection to the server's event stream, as in `Participant.id`, while it is open. */
+    get connection() { return this.store.connection; }
+    /** What this tab tells others: the host's location, the open thread, and whether its reply is being written. */
+    get ownPresence() {
+        return {
+            state: this.typing && this.openId !== undefined ? 'typing' : 'viewing',
+            page: this.whereabouts.page ?? (this.page || undefined),
+            surface: this.whereabouts.surface,
+            thread: this.openId
+        };
+    }
+    /** Threads shown as pins: on this page, unresolved unless resolved ones are shown or it is open. */
+    get pinned() {
+        return this.store.threads.filter((thread) => thread.page === this.page
+            && (!thread.resolvedAt || this.filters.showResolved || thread.id === this.openId));
+    }
+    get showToolbar() {
+        return this.options.toolbar ?? !this.hostToggles;
+    }
+    surface(id) {
+        return this.surfaces.find((surface) => surface.id === id);
+    }
+    /** A surface's title for the list, whether or not it is on screen. */
+    titleOf(thread) {
+        return this.surface(thread.surface)?.title || this.options.describe?.(thread.surface)?.title || thread.title
+            || new URL(thread.url).pathname;
+    }
+    orderOf(thread) {
+        return this.options.describe?.(thread.surface)?.order
+            ?? this.surfaces.findIndex((surface) => surface.id === thread.surface);
+    }
+    linkOf(thread) {
+        return this.options.link?.(thread) ?? `${thread.url}#vc=${thread.id}`;
+    }
+    imageUrl(image) {
+        return this.store.imageUrl(image);
+    }
+    /** Whether an element belongs to the comment UI. */
+    ours = (element) => element === this.host || this.slots.has(element);
+    // Actions.
+    /** Changes options after creation, e.g. when a host's view mounts and can show threads. */
+    configure(options) {
+        // Hosts call this from their own effects, which must not depend on the options.
+        this.options = { ...untrack(() => this.options), ...options };
+        this.schedule();
+    }
+    toggle(on = !this.active) {
+        this.active = on;
+        if (!on)
+            this.panelCollapsed = false;
+        this.cursor = undefined;
+        this.aim = undefined;
+        if (!on) {
+            this.draft = undefined;
+            this.openId = undefined;
+        }
+        this.updateCursorStyle();
+        this.updateAim();
+    }
+    openThread(id) {
+        if (id !== this.openId)
+            this.stopTyping();
+        this.openId = id;
+        const thread = this.open;
+        if (thread?.unread)
+            void this.store.markRead(thread.id, true);
+    }
+    /** Opens a thread from the list or a link, bringing it into view. */
+    focus(thread) {
+        this.draft = undefined;
+        this.active = true;
+        this.openThread(thread.id);
+        this.revealing = thread.id;
+        if (this.options.show?.(thread))
+            return;
+        if (thread.page !== this.page) {
+            const url = this.linkOf(thread);
+            if (this.options.navigate)
+                this.options.navigate(url, thread);
+            else
+                location.assign(url);
+            return;
+        }
+        const surface = this.surface(thread.surface);
+        if (!surface)
+            return;
+        if (surface.element) {
+            const { clip } = surface;
+            if (clip.right - clip.left < 80 || clip.bottom - clip.top < 80)
+                surface.element.scrollIntoView({ block: 'center', inline: 'center' });
+        }
+        else if (!thread.anchor) {
+            const at = toClient(surface, thread.x, thread.y);
+            if (!inside(surface.clip, at.x, at.y))
+                window.scrollTo({ top: thread.y - innerHeight / 3, behavior: 'smooth' });
+        }
+    }
+    /** The thread's element, once found, scrolled into view inside its document. */
+    revealElement(element) {
+        reveal(element);
+        this.revealing = undefined;
+    }
+    /**
+     * Tells others where the viewer is: the page, by default the page key, and
+     * the surface, e.g. the frame on screen. Each call replaces the last.
+     */
+    setPresence(update) {
+        const current = untrack(() => this.whereabouts);
+        if (current.page === update.page && current.surface === update.surface)
+            return;
+        this.whereabouts = { page: update.page, surface: update.surface };
+    }
+    /** Called by the UI as the viewer writes in the open thread; they stop typing 5 seconds after the last key. */
+    noteTyping() {
+        if (this.openId === undefined)
+            return;
+        this.typing = true;
+        clearTimeout(this.typingTimer);
+        this.typingTimer = setTimeout(() => this.stopTyping(), 5000);
+    }
+    stopTyping() {
+        clearTimeout(this.typingTimer);
+        this.typing = false;
+    }
+    /** Closes the dialog for an agent's request and takes it out of the address. */
+    endConnect() {
+        this.connecting = undefined;
+        dropFromHash('vc-connect');
+    }
+    /** Leaves for the site's sign-in, and comes back to this address. */
+    signIn() {
+        const auth = this.options.auth ?? '/auth';
+        if (typeof auth === 'object')
+            return auth.signIn();
+        const returnTo = `${location.pathname}${location.search}${location.hash}`;
+        location.assign(`${auth.replace(/\/$/, '')}/login?${new URLSearchParams({ returnTo })}`);
+    }
+    signOut() {
+        this.toggle(false);
+        const auth = this.options.auth ?? '/auth';
+        if (typeof auth === 'object')
+            return auth.signOut();
+        // A form, so the site's server can send the browser on to the identity provider.
+        const form = this.doc.createElement('form');
+        form.method = 'POST';
+        form.action = `${auth.replace(/\/$/, '')}/logout`;
+        form.hidden = true;
+        this.doc.body.appendChild(form);
+        form.submit();
+    }
+    /** Measures the page again, e.g. after the host moved surfaces in a way it cannot see. */
+    relayout() {
+        this.schedule();
+    }
+    /** For hosts that are not built with Svelte: called after any change of state. */
+    subscribe(listener) {
+        return $effect.root(() => {
+            $effect(() => {
+                void [this.active, this.openId, this.unreadCount, this.viewer, this.store.threads.length, this.loading,
+                    this.store.participants, this.store.connection];
+                listener(this);
+            });
+        });
+    }
+    destroy() {
+        for (const stop of this.cleanup.splice(0))
+            stop();
+        for (const stop of this.frames.values())
+            stop();
+        clearTimeout(this.typingTimer);
+        clearTimeout(this.presenceTimer);
+        this.frames.clear();
+        for (const app of this.slots.values())
+            void unmount(app);
+        this.slots.clear();
+        if (this.app)
+            void unmount(this.app);
+        this.host.remove();
+        this.doc.adoptedStyleSheets = this.doc.adoptedStyleSheets.filter((sheet) => sheet !== this.cursorSheet);
+    }
+    /** Called by the UI so a click elsewhere can bring the unsent comment back to attention. */
+    onFocusDraft(handler) {
+        this.focusDraftHandler = handler;
+    }
+    get draftHasContent() {
+        return Boolean(this.draft?.text.trim() || this.draft?.images);
+    }
+    // Setup.
+    start() {
+        const doc = this.doc;
+        const view = doc.defaultView;
+        const shadow = this.host.attachShadow({ mode: 'open' });
+        addStyles(shadow);
+        addProperties(doc);
+        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, this.cursorSheet];
+        doc.documentElement.appendChild(this.host);
+        this.app = mount(App, { target: shadow, props: { vc: this } });
+        this.cleanup.push(this.store.start());
+        const linked = hashPart('vc');
+        if (linked && /^\d+$/.test(linked)) {
+            this.linked = Number(linked);
+            dropFromHash('vc');
+        }
+        // The hash stays until the request is answered, so it survives signing in first.
+        this.connecting = hashPart('vc-connect') || undefined;
+        this.cleanup.push($effect.root(() => {
+            // Open a linked thread once threads have loaded.
+            $effect(() => {
+                if (this.linked === undefined || this.store.loading)
+                    return;
+                const thread = this.store.threads.find((t) => t.id === this.linked);
+                if (!thread && !this.viewer)
+                    return;
+                this.linked = undefined;
+                if (thread) {
+                    this.filters.showResolved ||= Boolean(thread.resolvedAt);
+                    this.focus(thread);
+                }
+            });
+            // Others see what this tab is doing: where it is, the open thread, and whether its reply is being written.
+            $effect(() => {
+                const presence = this.ownPresence;
+                clearTimeout(this.presenceTimer);
+                this.presenceTimer = setTimeout(() => this.store.setPresence(presence), 150);
+            });
+            // The server lets typing lapse unless it hears it again.
+            $effect(() => {
+                if (!this.typing)
+                    return;
+                const timer = setInterval(() => this.store.setPresence(untrack(() => this.ownPresence), true), 3000);
+                return () => clearInterval(timer);
+            });
+            // Buttons the host marked with data-vc-toggle say whether comment mode is on and if anything is unread.
+            $effect(() => {
+                const unread = this.unreadCount > 0 && !this.active;
+                const pressed = String(this.active);
+                void this.layout;
+                for (const button of doc.querySelectorAll('[data-vc-toggle]')) {
+                    if (button.getAttribute('aria-pressed') !== pressed)
+                        button.setAttribute('aria-pressed', pressed);
+                    if (button.hasAttribute('data-vc-unread') !== unread)
+                        button.toggleAttribute('data-vc-unread', unread);
+                }
+            });
+        }));
+        const on = (target, type, listener, options) => {
+            target.addEventListener(type, listener, options);
+            this.cleanup.push(() => target.removeEventListener(type, listener, options));
+        };
+        const capture = { capture: true };
+        on(view, 'pointermove', (event) => this.onPointerMove(event), { capture: true, passive: true });
+        on(view, 'pointerdown', (event) => this.onPress(event), capture);
+        on(view, 'mousedown', (event) => this.onPress(event), capture);
+        on(view, 'pointerup', (event) => this.onRelease(event), capture);
+        on(view, 'mouseup', (event) => this.onRelease(event), capture);
+        on(view, 'click', (event) => this.onClick(event), capture);
+        for (const type of ['dblclick', 'auxclick', 'contextmenu'])
+            on(view, type, (event) => this.onOtherClick(event), capture);
+        // Escape closes the comments' own things before the page's (an open dialog) sees it; in the
+        // comment UI, after the UI's own handlers.
+        on(view, 'keydown', (event) => { if (!this.fromUs(event))
+            this.onEscape(event); }, capture);
+        on(view, 'keydown', (event) => this.onKey(event));
+        on(view, 'keyup', (event) => this.onKey(event));
+        // What happens in the comment UI is not the page's: a modal's focus trap (bits-ui, focus-trap, …)
+        // would take focus back from it, and a press or key in it would close the modal or work its
+        // shortcuts. Focus is stopped before any trap sees it, the rest where it leaves the UI.
+        on(view, 'focusin', (event) => { if (this.fromUs(event))
+            event.stopImmediatePropagation(); }, capture);
+        for (const type of ['keydown', 'keyup', 'pointerdown', 'pointerup', 'mousedown', 'mouseup', 'click', 'touchstart', 'touchend', 'focusout']) {
+            const keep = (event) => {
+                if (event instanceof KeyboardEvent) {
+                    this.onEscape(event);
+                    this.onKey(event);
+                }
+                event.stopPropagation();
+            };
+            this.host.addEventListener(type, keep);
+            this.cleanup.push(() => this.host.removeEventListener(type, keep));
+        }
+        on(view, 'resize', () => this.schedule());
+        on(view, 'hashchange', () => {
+            const id = hashPart('vc-connect');
+            if (id)
+                this.connecting = id;
+        });
+        on(doc, 'scroll', () => this.schedule(), { capture: true, passive: true });
+        const leave = () => this.move(undefined);
+        doc.documentElement.addEventListener('pointerleave', leave);
+        this.cleanup.push(() => doc.documentElement.removeEventListener('pointerleave', leave));
+        on(view, 'blur', () => this.move(undefined));
+        // An image dropped anywhere but a comment field would make the browser open it.
+        const nodrop = (event) => {
+            if (this.active && event.dataTransfer?.types.includes('Files') && !event.composedPath().includes(this.host))
+                event.preventDefault();
+        };
+        on(view, 'dragover', nodrop);
+        on(view, 'drop', nodrop);
+        // While CSS transitions and animations run, things move without any change to observe.
+        for (const type of ['transitionrun', 'animationstart'])
+            on(doc, type, () => { this.animating++; this.schedule(); }, capture);
+        for (const type of ['transitionend', 'transitioncancel', 'animationend', 'animationcancel']) {
+            on(doc, type, () => { this.animating = Math.max(0, this.animating - 1); this.schedule(); }, capture);
+        }
+        const observer = new MutationObserver(() => this.schedule());
+        observer.observe(doc.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+        this.cleanup.push(() => observer.disconnect());
+        // Catches what nothing announces, such as a navigation that only changed the address.
+        const timer = setInterval(() => { this.animating = 0; this.schedule(); }, 1000);
+        this.cleanup.push(() => clearInterval(timer));
+        this.measure();
+    }
+    /** Watches a frame's own document: its scrolling, its changes and its keys. */
+    watchFrame(frame) {
+        const view = frame.defaultView;
+        if (!view || this.frames.has(frame))
+            return;
+        const schedule = () => this.schedule();
+        const key = (event) => {
+            this.onEscape(event);
+            this.onKey(event);
+        };
+        const observer = new MutationObserver(schedule);
+        observer.observe(frame.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+        frame.addEventListener('scroll', schedule, { capture: true, passive: true });
+        view.addEventListener('resize', schedule);
+        view.addEventListener('keydown', key);
+        view.addEventListener('keyup', key);
+        this.frames.set(frame, () => {
+            observer.disconnect();
+            frame.removeEventListener('scroll', schedule, { capture: true });
+            view.removeEventListener('resize', schedule);
+            view.removeEventListener('keydown', key);
+            view.removeEventListener('keyup', key);
+        });
+    }
+    // Measuring.
+    schedule() {
+        if (this.measuring)
+            return;
+        this.measuring = requestAnimationFrame(() => {
+            this.measuring = 0;
+            this.measure();
+            if (this.animating)
+                this.schedule();
+        });
+    }
+    measure() {
+        const doc = this.doc;
+        this.surfaces = discover(doc, { ours: this.ours, documentOf: this.options.documentOf });
+        this.page = pageOf(this.options.page);
+        // A new comment on a surface that has gone, like a frame the viewer left, goes with it; an
+        // empty one also with its element, like a dialog's that closed.
+        if (this.draft && !this.surface(this.draft.surface))
+            this.draft = undefined;
+        if (this.draft?.target && !this.draft.target.element.isConnected && !this.draftHasContent)
+            this.draft = undefined;
+        const docs = new Set(this.surfaces.map((surface) => surface.doc).filter((d) => Boolean(d) && d !== doc));
+        for (const frame of docs)
+            this.watchFrame(frame);
+        for (const [frame, stop] of this.frames) {
+            if (!docs.has(frame)) {
+                stop();
+                this.frames.delete(frame);
+            }
+        }
+        const panel = doc.querySelector('[data-vc-panel]')?.getBoundingClientRect();
+        const rect = panel && panel.width > 0 && panel.height > 0
+            ? { left: panel.left, top: panel.top, right: panel.right, bottom: panel.bottom }
+            : undefined;
+        if (rect?.left !== this.panelRect?.left || rect?.top !== this.panelRect?.top
+            || rect?.right !== this.panelRect?.right || rect?.bottom !== this.panelRect?.bottom)
+            this.panelRect = rect;
+        this.hostToggles = Boolean(doc.querySelector('[data-vc-toggle]'));
+        this.mountSlots();
+        this.layout++;
+        this.updateAim();
+    }
+    /** Puts the account button in every `[data-vc-account]` element of the host's own toolbar. */
+    mountSlots() {
+        for (const element of this.doc.querySelectorAll('[data-vc-account]')) {
+            if (this.slots.has(element) || element.shadowRoot)
+                continue;
+            const shadow = element.attachShadow({ mode: 'open' });
+            addStyles(shadow);
+            // In the host's toolbar the button takes the toolbar's colour and type, not the comments' ink.
+            const own = this.doc.createElement('style');
+            own.textContent = ':host{color:inherit;font-family:inherit;font-size:inherit}';
+            shadow.appendChild(own);
+            this.slots.set(element, mount(Account, { target: shadow, props: { vc: this, slot: true } }));
+        }
+        for (const [element, app] of this.slots) {
+            if (!element.isConnected) {
+                void unmount(app);
+                this.slots.delete(element);
+            }
+        }
+    }
+    // Pointer.
+    fromUs(event) {
+        return event.composedPath().includes(this.host);
+    }
+    surfaceAt(x, y) {
+        return surfaceAt(this.surfaces, this.doc, x, y, this.ours);
+    }
+    /** The pointer moved, or left (undefined). Also called by the layers over frames. */
+    move(pointer) {
+        this.pointer = pointer;
+        this.updateAim();
+    }
+    onPointerMove(event) {
+        if (!this.active)
+            return;
+        if (this.fromUs(event))
+            return this.move(undefined);
+        this.move({ x: event.clientX, y: event.clientY, alt: event.altKey });
+    }
+    /** Aims again, at most once per frame: the pointer moved, or the page moved under it. */
+    updateAim() {
+        if (this.aiming)
+            return;
+        this.aiming = requestAnimationFrame(() => {
+            this.aiming = 0;
+            const pointer = this.pointer;
+            const surface = this.active && pointer ? this.surfaceAt(pointer.x, pointer.y) : undefined;
+            const cursor = surface && pointer ? { x: pointer.x, y: pointer.y } : undefined;
+            this.cursor = cursor;
+            this.aim = surface && pointer && !this.draft && this.openId === undefined
+                ? aimAt(surface, pointer.x, pointer.y, pointer.alt)
+                : undefined;
+            this.updateCursorStyle();
+        });
+    }
+    /** Over a surface in comment mode the page's cursor is hidden; the comment cursor is drawn instead. */
+    updateCursorStyle() {
+        const rule = this.active && this.cursor ? '*, *::before, *::after { cursor: none !important; }' : '';
+        if (this.cursorSheet.cssRules.length !== (rule ? 1 : 0))
+            this.cursorSheet.replaceSync(rule);
+    }
+    /** Pressing on a surface in comment mode does not reach the page, unless the host keeps its gestures there. */
+    onPress(event) {
+        if (!this.active || this.fromUs(event))
+            return;
+        this.pressed = { x: event.clientX, y: event.clientY };
+        const surface = this.surfaceAt(event.clientX, event.clientY);
+        if (surface && !surface.passGestures)
+            stop(event);
+    }
+    onRelease(event) {
+        if (!this.active || this.fromUs(event))
+            return;
+        const surface = this.surfaceAt(event.clientX, event.clientY);
+        if (surface && !surface.passGestures)
+            stop(event);
+    }
+    onOtherClick(event) {
+        if (!this.active || this.fromUs(event))
+            return;
+        if (this.surfaceAt(event.clientX, event.clientY))
+            stop(event);
+    }
+    onClick(event) {
+        const path = event.composedPath();
+        if (path.some((node) => node instanceof Element && node.matches('[data-vc-toggle]'))) {
+            this.toggle();
+            return;
+        }
+        if (this.fromUs(event))
+            return;
+        if (!this.active) {
+            // Pins show outside comment mode too; a click away closes the thread one opened.
+            if (this.openId !== undefined)
+                this.openThread(undefined);
+            return;
+        }
+        const surface = this.surfaceAt(event.clientX, event.clientY);
+        if (!surface) {
+            // A click away from the comment: keep an unsent one, drop an empty one, close an open thread.
+            if (this.draftHasContent)
+                this.focusDraftHandler?.();
+            else if (this.draft)
+                this.draft = undefined;
+            else if (this.openId !== undefined)
+                this.openThread(undefined);
+            return;
+        }
+        stop(event);
+        const pressed = this.pressed;
+        this.pressed = undefined;
+        if (pressed && Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y) > DRAG)
+            return;
+        this.place(surface, event.clientX, event.clientY, event.altKey);
+    }
+    /** A click on a surface in comment mode starts a thread. A click away from an open thread closes it first. */
+    place(surface, x, y, free) {
+        if (this.draftHasContent) {
+            this.focusDraftHandler?.();
+            return;
+        }
+        if (this.openId !== undefined) {
+            this.openThread(undefined);
+            return;
+        }
+        this.draft = { ...aimAt(surface, x, y, free), text: '' };
+        this.updateAim();
+    }
+    /** A layer over a frame passes wheel turns to whatever scrolls under the pointer. */
+    wheel(surface, event) {
+        const unit = event.deltaMode === 1 ? 16 : 1;
+        const dx = event.deltaX * unit;
+        const dy = event.deltaY * unit;
+        if (surface.doc && surface.doc !== this.doc) {
+            const d = { x: (event.clientX - surface.docOrigin.x) / surface.docScale, y: (event.clientY - surface.docOrigin.y) / surface.docScale };
+            const scroller = scrollerFrom(surface.doc.elementFromPoint(d.x, d.y), dx / surface.docScale, dy / surface.docScale);
+            if (scroller) {
+                event.preventDefault();
+                scroller.scrollBy(dx / surface.docScale, dy / surface.docScale);
+                return;
+            }
+        }
+        const outer = scrollerFrom(surface.element?.parentElement ?? null, dx, dy);
+        if (outer) {
+            event.preventDefault();
+            outer.scrollBy(dx, dy);
+        }
+    }
+    onKey(event) {
+        if (event.key === 'Alt' && this.pointer) {
+            this.pointer = { ...this.pointer, alt: event.type === 'keydown' };
+            this.updateAim();
+            return;
+        }
+        if (event.type !== 'keydown' || event.defaultPrevented || !this.ownsKey(event))
+            return;
+        const shortcut = this.options.shortcut ?? 'c';
+        if (shortcut && event.key.toLowerCase() === shortcut && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    /** Escape drops the new comment, else closes the open thread, else leaves comment mode. */
+    onEscape(event) {
+        if (event.type !== 'keydown' || event.key !== 'Escape' || event.defaultPrevented || !this.ownsKey(event))
+            return;
+        if (this.host.shadowRoot?.querySelector(':popover-open') || this.doc.querySelector(':popover-open'))
+            return;
+        if (this.draft)
+            this.draft = undefined;
+        else if (this.openId !== undefined)
+            this.openThread(undefined);
+        else if (this.active)
+            this.toggle(false);
+        else
+            return;
+        stop(event);
+    }
+    /** Whether a key is the comments' to act on: not typed into a field, nor into the dialog to approve an agent. */
+    ownsKey(event) {
+        return !this.host.shadowRoot?.querySelector('dialog:modal') && !editable(event.composedPath()[0]);
+    }
+}
+/** A `name=value` part of the address's fragment, whose parts are joined by `&`. */
+function hashPart(name) {
+    const part = location.hash.slice(1).split('&').find((p) => p.startsWith(`${name}=`));
+    return part?.slice(name.length + 1);
+}
+function dropFromHash(name) {
+    const parts = location.hash.slice(1).split('&');
+    const rest = parts.filter((part) => part && !part.startsWith(`${name}=`)).join('&');
+    if (rest === parts.join('&'))
+        return;
+    history.replaceState(history.state, '', `${location.pathname}${location.search}${rest ? `#${rest}` : ''}`);
+}
+function stop(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+}
+function editable(target) {
+    const element = target;
+    return Boolean(element && (element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName)));
+}
+/** The page key: the address's origin and path, without a trailing slash. */
+export function pageOf(option) {
+    const url = new URL(location.href);
+    if (typeof option === 'string')
+        return option;
+    if (option)
+        return option(url);
+    const path = url.pathname.length > 1 ? url.pathname.replace(/\/+$/, '') : url.pathname;
+    return `${url.origin}${path}`;
+}
+function addStyles(root) {
+    const style = root.ownerDocument.createElement('style');
+    style.textContent = styles;
+    root.appendChild(style);
+}
+/**
+ * Custom property registrations only work in the document, not in a shadow
+ * root, and the styles' shadows and rings need them. They are the same for
+ * every copy of the styles, so they are added once.
+ */
+const registered = new WeakSet();
+function addProperties(doc) {
+    if (registered.has(doc) || !properties)
+        return;
+    registered.add(doc);
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(properties);
+    doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+}