@zixcel/dom-renderer 0.10.4 → 0.10.6

package/src/world-api.d.mts

@@ -0,0 +1,56 @@
+import type { Camera } from '@zixcel/projection-client';
+import type { Pose, WorldObject, WorldRelation } from './world-types.mjs';
+import type { SpatialState } from './spatial-patterns.mjs';
+export interface RolePresentation {
+    state: string;
+    label: string;
+}
+export interface ActivityView {
+    panel: HTMLElement;
+    update(value: unknown): void;
+    close?(): void;
+}
+export interface ActivityPresentation {
+    describeRole?: (activity: unknown, id: string) => RolePresentation | null;
+    createView?: (document: Document, host: HTMLElement) => ActivityView;
+}
+export interface WorldSnapshot extends Pose {
+    target: string | null;
+    presentation: SpatialState;
+    navigation: string;
+    populated: boolean;
+}
+export interface WorldOptions {
+    objects?: WorldObject[];
+    relations?: WorldRelation[];
+    pose?: WorldSnapshot | null;
+    onActivate?: (id: string) => void;
+    conversation?: ((item: WorldObject, activate: () => void) => HTMLElement | null) | null;
+    activity?: unknown;
+    target?: string | null;
+    pattern?: string;
+    context?: string | null;
+    activityPresentation?: ActivityPresentation;
+}
+export interface World {
+    update(objects: WorldObject[], relations?: WorldRelation[]): void;
+    close(): void;
+    park(): void;
+    mount(host: HTMLElement, options: WorldOptions): void;
+    snapshot(): WorldSnapshot;
+    activity(value: unknown): void;
+    apply(value: Camera): void;
+    change(action: string): void;
+    pause(value: boolean): void;
+}
+export interface WorldLease {
+    world: World;
+    release(): void;
+}
+export interface WorldSurface {
+    attach(host: HTMLElement, options: WorldOptions): WorldLease;
+    close(): void;
+}
+export declare function record(value: unknown): Record<string, unknown>;
+export declare function eventDetail(event: Event): Record<string, unknown>;
+export declare function copyPose(value: Pose): Pose;

package/src/world-api.mjs

@@ -0,0 +1,8 @@
+export function record(value) { return value !== null && typeof value === 'object' ? value : {}; }
+export function eventDetail(event) { return record('detail' in event ? event.detail : null); }
+export function copyPose(value) {
+    const coordinates = [value.x, value.y, value.z, value.yaw, value.pitch, ...(value.focus ? [value.focus.x, value.focus.y, value.focus.z] : [])];
+    if (!coordinates.every(Number.isFinite) || value.cameraMode !== undefined && !['overview', 'third-person'].includes(value.cameraMode))
+        throw Error('WorldPoseInvalid');
+    return { x: value.x, y: value.y, z: value.z, yaw: value.yaw, pitch: value.pitch, ...(value.focus ? { focus: { x: value.focus.x, y: value.focus.y, z: value.focus.z } } : {}), ...(value.cameraMode ? { cameraMode: value.cameraMode } : {}) };
+}

package/src/world-camera.d.mts

@@ -0,0 +1,14 @@
+import type { WorldContext } from './world-context.mjs';
+export declare function objectRectWorld(ctx: WorldContext, id: string): {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+} | null;
+export declare function publishAnchorWorld(ctx: WorldContext): void;
+export declare function syncOrbitWorld(ctx: WorldContext): void;
+export declare function overviewWorld(ctx: WorldContext): void;
+export declare function fitViewportWorld(ctx: WorldContext): void;
+export declare function focusObjectWorld(ctx: WorldContext, id: string): void;
+export declare function renderMapWorld(ctx: WorldContext): void;
+export declare function positionBubbleWorld(ctx: WorldContext): void;

package/src/world-camera.mjs

@@ -0,0 +1,74 @@
+import { initialPose, cameraMatrix, screenPoint, fitPose, viewCamera } from './world-model.mjs';
+import { objectBounds } from './object-presentation.mjs';
+import { frameLayout } from './frame-layout.mjs';
+import { mapProjection } from './open-world-projection.mjs';
+export function objectRectWorld(ctx, id) {
+    const item = ctx.model.items.find(item => item.id === id), width = ctx.host.clientWidth, height = ctx.host.clientHeight;
+    if (!item || !width || !height)
+        return null;
+    const [w, h, d] = objectBounds[item.form], matrix = cameraMatrix(ctx.pose, width / height, ctx.zoom), points = [];
+    for (const x of [-w / 2, w / 2])
+        for (const y of [0, h])
+            for (const z of [-d / 2, d / 2]) {
+                const point = screenPoint(matrix, item.x + x, item.y + y, item.z + z, width, height);
+                if (point?.visible)
+                    points.push(point);
+            }
+    if (!points.length)
+        return null;
+    return { left: Math.min(...points.map(p => p.x)), right: Math.max(...points.map(p => p.x)), top: Math.min(...points.map(p => p.y)), bottom: Math.max(...points.map(p => p.y)) };
+}
+export function publishAnchorWorld(ctx) { if (ctx.anchorId)
+    ctx.shell?.dispatchEvent(new ctx.window.CustomEvent('world-anchor', { detail: { id: ctx.anchorId, bounds: ctx.objectRect(ctx.anchorId) } })); }
+export function syncOrbitWorld(ctx) { ctx.syncing = true; viewCamera(ctx.pose, Math.max(.1, ctx.host.clientWidth / Math.max(1, ctx.host.clientHeight)), ctx.zoom, ctx.orbitCamera); const focus = ctx.pose.focus ?? { x: ctx.pose.x, y: ctx.pose.y, z: ctx.pose.z - 8 }; ctx.orbit.target.set(focus.x, focus.y, focus.z); ctx.orbit.update(); ctx.syncing = false; }
+export function overviewWorld(ctx) { ctx.navigation = 'overview'; ctx.navigationSelect.value = ctx.navigation; ctx.walk.hidden = true; ctx.lastWidth = ctx.host.clientWidth; ctx.lastHeight = ctx.host.clientHeight; ctx.pose = fitPose(ctx.model.items, ctx.lastWidth / Math.max(1, ctx.lastHeight)); ctx.needsFit = false; ctx.stopInput(); ctx.syncOrbit(); ctx.invalidate(); }
+export function fitViewportWorld(ctx) { const width = ctx.host.clientWidth, height = ctx.host.clientHeight; if (!width || !height || (ctx.lastWidth === width && ctx.lastHeight === height))
+    return; ctx.lastWidth = width; ctx.lastHeight = height; if (ctx.navigation === 'overview') {
+    ctx.pose = fitPose(ctx.model.items, width / height);
+    ctx.syncOrbit();
+} ctx.invalidate(); }
+export function focusObjectWorld(ctx, id) {
+    const item = ctx.model.items.find(i => i.id === id);
+    if (!item)
+        return;
+    ctx.selectedId = id;
+    ctx.wrap.dataset.selectedId = id;
+    for (const [ref, node] of ctx.labelNodes)
+        node.dataset.selected = String(ref === id);
+    ctx.renderMap();
+    ctx.pose = ctx.navigation === 'overview' ? fitPose([item], ctx.host.clientWidth / Math.max(1, ctx.host.clientHeight)) : { ...initialPose(), cameraMode: 'third-person', x: item.x, y: item.y + 1.85, z: item.z + 6, pitch: 0 };
+    ctx.syncOrbit();
+    ctx.invalidate();
+}
+export function renderMapWorld(ctx) {
+    const projected = mapProjection(ctx.model.items, { selected: ctx.selectedId, marked: ctx.markedId }), items = projected.items;
+    ctx.mapNote.textContent = projected.omitted ? `${items.length} of ${projected.total} objects shown. Narrow this view to see the rest.` : `${items.length} objects in this view`;
+    ctx.mapButton.disabled = !ctx.selectedId || !ctx.model.items.some(item => item.id === ctx.selectedId);
+    ctx.mapButton.textContent = ctx.selectedId === ctx.markedId ? 'Clear marker' : 'Mark selected';
+    ctx.mapList.replaceChildren();
+    if (!items.length)
+        return;
+    const xs = items.map(item => item.x), zs = items.map(item => item.z), minX = Math.min(...xs), maxX = Math.max(...xs), minZ = Math.min(...zs), maxZ = Math.max(...zs);
+    for (const item of items) {
+        const node = ctx.make('button', 'world-map-point', (item.title ?? item.id).slice(0, 1).toUpperCase());
+        node.type = 'button';
+        node.title = item.title ?? item.id;
+        node.dataset.mapId = item.id;
+        node.dataset.selected = String(item.selected);
+        node.dataset.marked = String(item.marked);
+        node.setAttribute('aria-label', 'Find ' + item.title + ' on map');
+        node.style.left = (10 + 80 * (item.x - minX) / Math.max(1, maxX - minX)) + '%';
+        node.style.top = (10 + 80 * (item.z - minZ) / Math.max(1, maxZ - minZ)) + '%';
+        ctx.mapList.append(node);
+    }
+}
+export function positionBubbleWorld(ctx) {
+    if (!ctx.conversationId)
+        return;
+    if (!ctx.model.items.some(item => item.id === ctx.conversationId)) {
+        ctx.closeConversation();
+        return;
+    }
+    const { panel } = frameLayout(ctx.host.clientWidth, ctx.host.clientHeight, 'actions', ctx.objectRect(ctx.conversationId));
+    Object.assign(ctx.bubble.style, { left: panel.x + 'px', top: panel.y + 'px', width: panel.width + 'px', height: panel.height + 'px', maxHeight: panel.height + 'px' });
+}

package/src/world-clock.d.mts

@@ -0,0 +1,19 @@
+import type { Pose } from './world-types.mjs';
+export interface FrameContext {
+    frame: number | null;
+    closed: boolean;
+    attached: boolean;
+    paused: boolean;
+    lost: boolean;
+    dirty: boolean;
+    last: number;
+    pose: Pose;
+    keys: Set<unknown>;
+    document: Pick<Document, 'hidden'>;
+    window: Pick<Window, 'requestAnimationFrame'>;
+    inputBlocked(): boolean;
+    tick(now: number): void;
+    draw(): void;
+    fail(error: unknown): void;
+}
+export declare function tickFrame(ctx: FrameContext, now: number): void;

package/src/world-clock.mjs

@@ -0,0 +1,30 @@
+import { worldLimits, movePose } from './world-model.mjs';
+export function tickFrame(ctx, now) {
+    try {
+        ctx.frame = null;
+        if (ctx.closed || !ctx.attached || ctx.paused || ctx.lost || ctx.document.hidden)
+            return;
+        if (ctx.inputBlocked())
+            ctx.keys.clear();
+        const moving = ctx.keys.size > 0;
+        if (now - ctx.last < 1000 / worldLimits.fps) {
+            if (ctx.dirty || moving)
+                ctx.frame = ctx.window.requestAnimationFrame(ctx.tick);
+            return;
+        }
+        if (moving) {
+            ctx.pose = movePose(ctx.pose, Number(ctx.keys.has('forward')) - Number(ctx.keys.has('back')), Number(ctx.keys.has('right')) - Number(ctx.keys.has('left')), ctx.last ? (now - ctx.last) / 1000 : 1 / 30, Number(ctx.keys.has('rise')) - Number(ctx.keys.has('descend')));
+            ctx.dirty = true;
+        }
+        ctx.last = now;
+        if (ctx.dirty) {
+            ctx.dirty = false;
+            ctx.draw();
+        }
+        if (moving)
+            ctx.frame = ctx.window.requestAnimationFrame(ctx.tick);
+    }
+    catch (error) {
+        ctx.fail(error);
+    }
+}

package/src/world-commands.d.mts

@@ -0,0 +1,39 @@
+import type { WorldOptions, WorldSnapshot } from './world-api.mjs';
+import type { WorldObject, WorldRelation } from './world-types.mjs';
+import type { Camera } from '@zixcel/projection-client';
+export interface WorldCommands {
+    objectRect: (id: string) => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | null;
+    publishAnchor: () => void;
+    filterDirectory: () => void;
+    syncOrbit: () => void;
+    overview: () => void;
+    fitViewport: () => void;
+    focusObject: (id: string) => void;
+    renderMap: () => void;
+    closeConversation: () => void;
+    activate: (id: string | null | undefined) => void;
+    positionBubble: () => void;
+    stopInput: () => void;
+    stopFrame: () => void;
+    invalidate: () => void;
+    tick: (now: number) => void;
+    draw: () => void;
+    fail: (error: unknown) => void;
+    initialize: () => void;
+    renderUpdates: () => void;
+    update: (objects: WorldObject[], relations?: WorldRelation[]) => void;
+    onKey: (event: KeyboardEvent) => void;
+    snapshot: () => WorldSnapshot;
+    park: () => void;
+    mount: (nextHost: HTMLElement, options: WorldOptions) => void;
+    close: () => void;
+    activity: (value: unknown) => void;
+    apply: (value: Camera) => void;
+    change: (action: string) => void;
+    pause: (value: boolean) => void;
+}

package/src/world-commands.mjs

@@ -0,0 +1 @@
+export {};

package/src/world-context.d.mts

@@ -0,0 +1,132 @@
+import type { WorldSnapshot, ActivityPresentation, RolePresentation, ActivityView } from './world-api.mjs';
+import type { Pose, WorldObject, WorldRelation, WorldModel, WorldItem, Gpu, ActorRange } from './world-types.mjs';
+import type { SpatialState, SpatialView } from './spatial-patterns.mjs';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import type { PerspectiveCamera } from 'three';
+import type { WorldCommands } from './world-commands.mjs';
+export interface WorldContext extends WorldCommands {
+    host: HTMLElement;
+    objects: WorldObject[];
+    relations: WorldRelation[];
+    restored: WorldSnapshot | null | undefined;
+    onActivate: (id: string) => void;
+    conversation: ((item: WorldObject, activate: () => void) => HTMLElement | null) | null;
+    workActivity: unknown;
+    target: string | null;
+    pattern: string;
+    context: string | null;
+    activityPresentation: ActivityPresentation;
+    document: Document;
+    browser: (Window & typeof globalThis) | null;
+    window: Window & typeof globalThis;
+    controller: AbortController;
+    signal: AbortSignal;
+    make: <K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string) => HTMLElementTagNameMap[K];
+    wrap: HTMLElement;
+    canvas: HTMLCanvasElement;
+    labels: HTMLDivElement;
+    hud: HTMLDivElement;
+    aim: HTMLSpanElement;
+    hint: HTMLButtonElement;
+    status: HTMLParagraphElement;
+    tools: HTMLDivElement;
+    nearby: HTMLDetailsElement;
+    list: HTMLDivElement;
+    summary: HTMLElement;
+    roleStatus: (value: unknown, id: string) => RolePresentation | null;
+    engine: ActivityView;
+    spacing: string;
+    placedSpacing: string | null;
+    pose: Pose;
+    model: WorldModel<WorldObject>;
+    gpu: Gpu | null;
+    geometry: Float32Array<ArrayBufferLike> | null;
+    actorRanges: ActorRange[];
+    closed: boolean;
+    attached: boolean;
+    lost: boolean;
+    dirty: boolean;
+    frame: number | null;
+    motionTimer: number | null;
+    last: number;
+    frames: number;
+    drag: {
+        id: number;
+        x: number;
+        y: number;
+        startX: number;
+        startY: number;
+    } | null;
+    hovered: string | null;
+    paused: boolean;
+    zoom: number;
+    projected: ({
+        x: number;
+        y: number;
+        depth: number;
+        visible: boolean;
+    } & {
+        item: WorldItem;
+    })[];
+    labelNodes: Map<string, HTMLButtonElement>;
+    directoryNodes: Map<string, HTMLDivElement>;
+    geometryKey: string | null;
+    uploads: number;
+    initializations: number;
+    navigation: string;
+    needsFit: boolean;
+    lastWidth: number;
+    lastHeight: number;
+    selectedId: string | null;
+    markedId: string | null;
+    recent: Map<string, {
+        title: string;
+        kind: string;
+    }>;
+    poses: Map<string | null, WorldSnapshot>;
+    fittedPopulation: boolean;
+    sourceObjects: WorldObject[];
+    sourceRelations: WorldRelation[];
+    view: SpatialState;
+    projection: SpatialView | null;
+    bubble: HTMLElement;
+    conversationId: string | null;
+    returnFocus: HTMLElement | null;
+    anchorId: string | null;
+    shell: Element | null;
+    map: HTMLDetailsElement;
+    mapList: HTMLDivElement;
+    mapNote: HTMLElement;
+    mapButton: HTMLButtonElement;
+    keys: Set<unknown>;
+    inputBlocked: () => boolean;
+    button: (text: string, label: string, action: () => void, parent?: HTMLElement) => HTMLButtonElement;
+    inspect: HTMLButtonElement;
+    reset: HTMLButtonElement;
+    settings: HTMLDivElement;
+    breadcrumb: HTMLDivElement;
+    location: HTMLOutputElement;
+    pagination: HTMLDivElement;
+    selector: (label: string, entries: readonly (readonly string[])[], change: (value: string) => void) => HTMLSelectElement;
+    navigationSelect: HTMLSelectElement;
+    patternSelect: HTMLSelectElement;
+    groupSelect: HTMLSelectElement;
+    legend: HTMLParagraphElement;
+    back: HTMLButtonElement;
+    previous: HTMLButtonElement;
+    pageCount: HTMLOutputElement;
+    nextPage: HTMLButtonElement;
+    updates: HTMLDetailsElement;
+    updatesTitle: HTMLElement;
+    updateList: HTMLDivElement;
+    updateHelp: HTMLParagraphElement;
+    query: HTMLInputElement;
+    noMatches: HTMLParagraphElement;
+    orbitCamera: PerspectiveCamera;
+    orbit: OrbitControls<PerspectiveCamera>;
+    syncing: boolean;
+    enableOrbit: () => void;
+    setText: (node: Element, value: string | undefined) => void;
+    walk: HTMLDivElement;
+    resize: ResizeObserver;
+}

package/src/world-context.mjs

@@ -0,0 +1 @@
+export {};

package/src/world-controller.d.mts

@@ -0,0 +1,43 @@
+import type { Camera } from '@zixcel/projection-client';
+import type { WorldOptions, WorldSnapshot } from './world-api.mjs';
+import type { WorldObject, WorldRelation } from './world-types.mjs';
+import type { WorldContext } from './world-context.mjs';
+export interface WorldController extends WorldContext {
+}
+export declare class WorldController {
+    constructor(host: HTMLElement, { objects, relations, pose: restored, onActivate, conversation, activity, target, pattern, context, activityPresentation }?: WorldOptions);
+    objectRect: (id: string) => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | null;
+    publishAnchor: () => void;
+    filterDirectory: () => void;
+    syncOrbit: () => void;
+    overview: () => void;
+    fitViewport: () => void;
+    focusObject: (id: string) => void;
+    renderMap: () => void;
+    closeConversation: () => void;
+    activate: (id: string | null | undefined) => void;
+    positionBubble: () => void;
+    stopInput: () => void;
+    stopFrame: () => void;
+    invalidate: () => void;
+    tick: (now: number) => void;
+    draw: () => void;
+    fail: (error: unknown) => void;
+    initialize: () => void;
+    renderUpdates: () => void;
+    update: (objects: WorldObject[], relations?: WorldRelation[]) => void;
+    onKey: (event: KeyboardEvent) => void;
+    snapshot: () => WorldSnapshot;
+    park: () => void;
+    mount: (nextHost: HTMLElement, options: WorldOptions) => void;
+    close: () => void;
+    activity: (value: unknown) => void;
+    apply: (value: Camera) => void;
+    change: (action: string) => void;
+    pause: (value: boolean) => void;
+}

package/src/world-controller.mjs

@@ -0,0 +1,62 @@
+import { setupWorldView } from './world-setup.mjs';
+import { objectRectWorld, publishAnchorWorld, syncOrbitWorld, overviewWorld, fitViewportWorld, focusObjectWorld, renderMapWorld, positionBubbleWorld } from './world-camera.mjs';
+import { filterDirectoryWorld, renderUpdatesWorld, updateWorld } from './world-projection.mjs';
+import { closeConversationWorld, activateWorld } from './world-conversation.mjs';
+import { stopInputWorld, stopFrameWorld, invalidateWorld, tickWorld, drawWorld, failWorld, initializeWorld } from './world-render-loop.mjs';
+import { onKeyWorld, snapshotWorld, parkWorld, mountWorld, closeWorld, activityWorld, applyWorld, changeWorld, pauseWorld } from './world-lifecycle.mjs';
+export class WorldController {
+    constructor(host, { objects = [], relations = [], pose: restored, onActivate = () => { }, conversation = null, activity = null, target = null, pattern = 'ground', context = null, activityPresentation = {} } = {}) {
+        this.host = host;
+        this.objects = objects;
+        this.relations = relations;
+        this.restored = restored;
+        this.onActivate = onActivate;
+        this.conversation = conversation;
+        this.workActivity = activity;
+        this.target = target;
+        this.pattern = pattern;
+        this.context = context;
+        this.activityPresentation = activityPresentation;
+        try {
+            setupWorldView(this);
+        }
+        catch (error) {
+            try {
+                this.close();
+            }
+            catch (cleanup) {
+                throw new AggregateError([error, cleanup], 'World setup and cleanup failed');
+            }
+            throw error;
+        }
+    }
+    objectRect = (id) => objectRectWorld(this, id);
+    publishAnchor = () => publishAnchorWorld(this);
+    filterDirectory = () => filterDirectoryWorld(this);
+    syncOrbit = () => syncOrbitWorld(this);
+    overview = () => overviewWorld(this);
+    fitViewport = () => fitViewportWorld(this);
+    focusObject = (id) => focusObjectWorld(this, id);
+    renderMap = () => renderMapWorld(this);
+    closeConversation = () => closeConversationWorld(this);
+    activate = (id) => activateWorld(this, id);
+    positionBubble = () => positionBubbleWorld(this);
+    stopInput = () => stopInputWorld(this);
+    stopFrame = () => stopFrameWorld(this);
+    invalidate = () => invalidateWorld(this);
+    tick = (now) => tickWorld(this, now);
+    draw = () => drawWorld(this);
+    fail = (error) => failWorld(this, error);
+    initialize = () => initializeWorld(this);
+    renderUpdates = () => renderUpdatesWorld(this);
+    update = (objects, relations = []) => updateWorld(this, objects, relations);
+    onKey = (event) => onKeyWorld(this, event);
+    snapshot = () => snapshotWorld(this);
+    park = () => parkWorld(this);
+    mount = (nextHost, options) => mountWorld(this, nextHost, options);
+    close = () => closeWorld(this);
+    activity = (value) => activityWorld(this, value);
+    apply = (value) => applyWorld(this, value);
+    change = (action) => changeWorld(this, action);
+    pause = (value) => pauseWorld(this, value);
+}

package/src/world-conversation.d.mts

@@ -0,0 +1,3 @@
+import type { WorldContext } from './world-context.mjs';
+export declare function closeConversationWorld(ctx: WorldContext): void;
+export declare function activateWorld(ctx: WorldContext, id: string | null | undefined): void;

package/src/world-conversation.mjs

@@ -0,0 +1,46 @@
+export function closeConversationWorld(ctx) { ctx.conversationId = null; ctx.bubble.hidden = true; ctx.bubble.replaceChildren(); if (ctx.returnFocus?.isConnected)
+    ctx.returnFocus.focus({ preventScroll: true }); ctx.returnFocus = null; ctx.invalidate(); }
+export function activateWorld(ctx, id) {
+    if (!id)
+        return;
+    const item = ctx.model.items.find(item => item.id === id);
+    if (!item || item.disabled)
+        return;
+    ctx.selectedId = id;
+    ctx.wrap.dataset.selectedId = id;
+    for (const [ref, node] of ctx.labelNodes)
+        node.dataset.selected = String(ref === id);
+    ctx.renderMap();
+    ctx.stopInput();
+    ctx.nearby.open = false;
+    ctx.map.open = false;
+    if (item.kind === 'group') {
+        ctx.view = { ...ctx.view, group: ctx.view.pattern === 'garden' && ctx.view.group === item.id ? null : item.id, page: 0 };
+        ctx.needsFit = ctx.view.pattern !== 'garden';
+        ctx.update(ctx.sourceObjects, ctx.sourceRelations);
+        if (ctx.view.pattern === 'garden')
+            ctx.focusObject(item.id);
+        return;
+    }
+    ctx.recent.delete(id);
+    ctx.renderUpdates();
+    const body = ctx.conversation?.(item, () => { ctx.closeConversation(); ctx.onActivate(id); });
+    if (!body) {
+        ctx.onActivate(id);
+        return;
+    }
+    ctx.returnFocus = ctx.document.activeElement instanceof ctx.window.HTMLElement ? ctx.document.activeElement : null;
+    ctx.conversationId = id;
+    ctx.bubble.setAttribute('aria-label', 'Conversation with ' + item.title);
+    const title = ctx.make('strong', '', item.title), dismiss = ctx.make('button', '', '×');
+    dismiss.type = 'button';
+    dismiss.setAttribute('aria-label', 'Close conversation');
+    dismiss.addEventListener('click', ctx.closeConversation, { once: true });
+    const head = ctx.make('header', '');
+    head.append(title, dismiss);
+    ctx.bubble.replaceChildren(head, body);
+    ctx.bubble.hidden = false;
+    ctx.bubble.focus({ preventScroll: true });
+    ctx.positionBubble();
+    ctx.invalidate();
+}

package/src/world-events.d.mts

@@ -0,0 +1,2 @@
+import type { WorldContext } from './world-context.mjs';
+export declare function bindWorldEvents(ctx: WorldContext): void;