@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/src/canvas/pending-composer.tsx

@@ -0,0 +1,157 @@
+import { Avatar, isMentionPickerOpen } from '@tldraw/mentions'
+import { useEffect, useRef, useState } from 'react'
+import {
+	createComment,
+	createCommentThread,
+	Editor,
+	EditorPortal,
+	TLRichText,
+	usePassThroughWheelEvents,
+	useTranslation,
+	useValue,
+} from 'tldraw'
+import { CommentComposer } from '../ui/comment-composer'
+import { EMPTY_COMMENT, isCommentEmpty } from '../ui/comment-extensions'
+import { CommentPin } from '../ui/comment-pin'
+import {
+	clearCommentDraft,
+	getCommentDraft,
+	NEW_COMMENT_DRAFT,
+	saveCommentDraft,
+} from './comment-drafts'
+import { commitCommentMutation } from './comment-mutations'
+import { UNKNOWN_COMMENT_AUTHOR } from './comment-render'
+import { PendingComment } from './comment-tool'
+import { type CommentingContext } from './context'
+import { useIsMobileCommenting, useMobilePlacement } from './mobile-placement'
+import { useCanComment, useCommentingOptions } from './options'
+import { pendingComment } from './state'
+
+const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
+
+/**
+ * The composer for a thread that doesn't exist yet: the comment tool has placed a point (or
+ * region) and is waiting on a first comment. Submitting creates the thread and its comment
+ * together; clicking away keeps the draft for the next placement.
+ */
+export function PendingComposer({
+	editor,
+	pending,
+	currentUserId,
+	resolveAuthor,
+	onPostComment,
+	getMentionSuggestions,
+	renderMentionSuggestion,
+}: CommentingContext & { editor: Editor; pending: PendingComment }) {
+	const ComposerFallback = useCommentingOptions().components.ComposerFallback
+	const canComment = useCanComment(currentUserId)
+	const me = currentUserId ? resolveAuthor(currentUserId) : undefined
+	// The leading pin previews the pin this draft becomes: a white pin holding the author's avatar.
+	const draftAvatar = (
+		<CommentPin>
+			<Avatar author={me ?? UNKNOWN_COMMENT_AUTHOR} />
+		</CommentPin>
+	)
+	// Click-away keeps the draft (saved on every change) and the next placement composer
+	// restores it — the flip side of dismissing without a discard warning.
+	const [text, setText] = useState<TLRichText>(
+		() => getCommentDraft(NEW_COMMENT_DRAFT) ?? EMPTY_COMMENT
+	)
+	const ref = useRef<HTMLDivElement>(null)
+	const msg = useTranslation()
+	// Over this floating panel, a scroll reaches the canvas (except where it scrolls itself).
+	usePassThroughWheelEvents(ref)
+
+	const point = useValue('composer point', () => editor.pageToViewport(pending.point), [
+		editor,
+		pending.point,
+	])
+	// On mobile the composer floats free of the pin so it can clear the software keyboard; desktop
+	// keeps it pinned to the point.
+	const isMobile = useIsMobileCommenting()
+	const placed = useMobilePlacement(ref, point, isMobile)
+
+	// Dismiss on a click anywhere outside the composer (capture-phase, ahead of stopPropagation).
+	useEffect(() => {
+		const onPointerDown = (e: PointerEvent) => {
+			const el = ref.current
+			const target = e.target as HTMLElement | null
+			if (!el || !target) return
+			// A click in the composer, or in the mention picker it spawns (portaled elsewhere), is
+			// not "outside" — keep the draft open so the pick can insert.
+			if (el.contains(target) || target.closest('.tlui-cmt-mention-popup')) return
+			pendingComment.set(editor, null)
+		}
+		document.addEventListener('pointerdown', onPointerDown, true)
+		return () => document.removeEventListener('pointerdown', onPointerDown, true)
+	}, [editor])
+
+	const submit = () => {
+		if (isCommentEmpty(text) || !currentUserId) return
+		const comment = commitCommentMutation(editor, ({ put }) => {
+			const pageId = editor.getCurrentPageId()
+			const thread = createCommentThread({
+				pageId,
+				anchor: pending.anchor,
+				createdBy: currentUserId,
+			})
+			const comment = createComment({
+				threadId: thread.id,
+				pageId,
+				authorId: currentUserId,
+				body: text,
+			})
+			put([thread, comment])
+			return comment
+		})
+		setText(EMPTY_COMMENT)
+		clearCommentDraft(NEW_COMMENT_DRAFT)
+		pendingComment.set(editor, null)
+		// The host's callback is its own operation, not part of the post's history scope. It runs
+		// last so a throwing host can't strand the composer holding a draft of a posted comment.
+		onPostComment?.(comment)
+	}
+
+	return (
+		<EditorPortal>
+			<div
+				ref={ref}
+				className={[
+					'tlui-cmt-canvas-composer',
+					pending.anchor.type === 'region' && 'tlui-cmt-canvas-composer--region',
+					!canComment && 'tlui-cmt-canvas-composer--fallback',
+				]
+					.filter(Boolean)
+					.join(' ')}
+				style={{ left: placed.left, top: placed.top }}
+				onPointerDown={stop}
+				onContextMenu={stop}
+				onKeyDown={(e) => {
+					if (e.key === 'Escape' && !isMentionPickerOpen()) pendingComment.set(editor, null)
+				}}
+			>
+				{canComment ? (
+					<CommentComposer
+						author={me ?? UNKNOWN_COMMENT_AUTHOR}
+						placeholder={msg('comments.add-placeholder')}
+						sendLabel={msg('comments.send')}
+						value={text}
+						onChange={(value) => {
+							setText(value)
+							saveCommentDraft(NEW_COMMENT_DRAFT, value)
+						}}
+						onSubmit={submit}
+						// No user, no author for the record — dead send button.
+						disabled={isCommentEmpty(text) || !currentUserId}
+						getMentionSuggestions={getMentionSuggestions}
+						renderMentionSuggestion={renderMentionSuggestion}
+						autoFocus
+						leading={draftAvatar}
+					/>
+				) : (
+					ComposerFallback && <ComposerFallback context="pending" />
+				)}
+			</div>
+		</EditorPortal>
+	)
+}

package/src/canvas/pin-stacking.test.ts

@@ -0,0 +1,224 @@
+import { Box, Mat, type Editor, type TLCommentAnchor, type TLCommentThread } from 'tldraw'
+import { describe, expect, it } from 'vitest'
+import { computePinStacks, isOpenStackKeyLive, pinStackKey, pinStacksEqual } from './pin-stacking'
+import { anchorPagePoint } from './thread-state'
+
+const CURRENT_PAGE = 'page:one'
+const OTHER_PAGE = 'page:two'
+
+function thread(
+	id: string,
+	anchor: TLCommentAnchor,
+	opts: { pageId?: string; createdAt?: number } = {}
+): TLCommentThread {
+	return {
+		id,
+		typeName: 'comment-thread',
+		pageId: opts.pageId ?? CURRENT_PAGE,
+		anchor,
+		createdBy: 'user:1',
+		createdAt: opts.createdAt ?? 0,
+		resolved: null,
+		meta: {},
+	} as unknown as TLCommentThread
+}
+
+/**
+ * Unrotated shapes: local geometry sized by the box, placed by a translate-only page transform.
+ * No comment tool registered, so the commenting options `anchorPagePoint` reads are the defaults.
+ */
+function stubEditor(
+	shapes: Record<string, { minX: number; minY: number; maxX: number; maxY: number }> = {}
+): Editor {
+	const shapeId = (shape: string | { id: string }) => (typeof shape === 'string' ? shape : shape.id)
+	return {
+		getCurrentPageId: () => CURRENT_PAGE,
+		getStateDescendant: () => undefined,
+		getShape: (id: string) => (shapes[id] ? { id } : undefined),
+		getShapeGeometry: (shape: string | { id: string }) => {
+			const bounds = shapes[shapeId(shape)]
+			return { bounds: new Box(0, 0, bounds.maxX - bounds.minX, bounds.maxY - bounds.minY) }
+		},
+		getShapePageTransform: (shape: string | { id: string }) => {
+			const bounds = shapes[shapeId(shape)]
+			return bounds ? Mat.Translate(bounds.minX, bounds.minY) : undefined
+		},
+	} as unknown as Editor
+}
+
+const SHAPE = { 'shape:a': { minX: 0, minY: 0, maxX: 200, maxY: 100 } }
+/** The same shape after someone moved it — same size, different page position. */
+const SHAPE_MOVED = { 'shape:a': { minX: 500, minY: 300, maxX: 700, maxY: 400 } }
+
+function impreciseAnchor(shapeId: string): TLCommentAnchor {
+	return { type: 'shape', shapeId, x: 0.2, y: 0.9, isPrecise: false } as TLCommentAnchor
+}
+
+/** The stack key the pins on `shape:a` coincide at, for the given shape placement. */
+function stackKeyOn(shapes: typeof SHAPE): string {
+	return pinStackKey(anchorPagePoint(stubEditor(shapes), impreciseAnchor('shape:a'))!)
+}
+
+describe('computePinStacks', () => {
+	it('groups coincident imprecise pins on one shape, oldest first', () => {
+		const stacks = computePinStacks(stubEditor(SHAPE), [
+			thread('t2', impreciseAnchor('shape:a'), { createdAt: 20 }),
+			thread('t1', impreciseAnchor('shape:a'), { createdAt: 10 }),
+		])
+		expect(stacks.get('t1')).toEqual(['t1', 't2'])
+		expect(stacks.get('t2')).toEqual(['t1', 't2'])
+	})
+
+	it('leaves separated pins ungrouped', () => {
+		const stacks = computePinStacks(stubEditor(), [
+			thread('t1', { type: 'point', x: 0, y: 0 }),
+			thread('t2', { type: 'point', x: 50, y: 0 }),
+		])
+		expect(stacks.size).toBe(0)
+	})
+
+	it('groups coincident point anchors', () => {
+		const stacks = computePinStacks(stubEditor(), [
+			thread('t1', { type: 'point', x: 5, y: 5 }, { createdAt: 1 }),
+			thread('t2', { type: 'point', x: 5, y: 5 }, { createdAt: 2 }),
+			thread('t3', { type: 'point', x: 5, y: 5 }, { createdAt: 3 }),
+		])
+		expect(stacks.get('t2')).toEqual(['t1', 't2', 't3'])
+	})
+
+	it('breaks creation-time ties by id so ordering is deterministic', () => {
+		const stacks = computePinStacks(stubEditor(), [
+			thread('t2', { type: 'point', x: 5, y: 5 }, { createdAt: 1 }),
+			thread('t1', { type: 'point', x: 5, y: 5 }, { createdAt: 1 }),
+		])
+		expect(stacks.get('t1')).toEqual(['t1', 't2'])
+	})
+
+	it('ignores threads on other pages and unresolvable anchors', () => {
+		const stacks = computePinStacks(stubEditor(SHAPE), [
+			thread('t1', impreciseAnchor('shape:a')),
+			thread('t2', impreciseAnchor('shape:a'), { pageId: OTHER_PAGE }),
+			thread('t3', impreciseAnchor('shape:gone')),
+		])
+		expect(stacks.size).toBe(0)
+	})
+
+	it('does not group a precise pin sitting away from a coincident pair', () => {
+		const precise: TLCommentAnchor = {
+			type: 'shape',
+			shapeId: 'shape:a',
+			x: 0.5,
+			y: 0.5,
+			isPrecise: true,
+		} as TLCommentAnchor
+		const stacks = computePinStacks(stubEditor(SHAPE), [
+			thread('t1', impreciseAnchor('shape:a'), { createdAt: 1 }),
+			thread('t2', impreciseAnchor('shape:a'), { createdAt: 2 }),
+			thread('t3', precise),
+		])
+		expect(stacks.get('t1')).toEqual(['t1', 't2'])
+		expect(stacks.has('t3')).toBe(false)
+	})
+})
+
+describe('pinStacksEqual', () => {
+	const pair = () =>
+		new Map<string, readonly string[]>([
+			['t1', ['t1', 't2']],
+			['t2', ['t1', 't2']],
+		])
+
+	it('accepts equal groupings whatever the map or group identity', () => {
+		const a = pair()
+		expect(pinStacksEqual(a, a)).toBe(true)
+		expect(pinStacksEqual(a, pair())).toBe(true)
+		expect(pinStacksEqual(new Map(), new Map())).toBe(true)
+	})
+
+	it('rejects a changed member set, a changed group, and a changed order', () => {
+		// the stack broke up
+		expect(pinStacksEqual(pair(), new Map())).toBe(false)
+		// a third pin joined
+		expect(
+			pinStacksEqual(
+				pair(),
+				new Map<string, readonly string[]>([
+					['t1', ['t1', 't2', 't3']],
+					['t2', ['t1', 't2', 't3']],
+					['t3', ['t1', 't2', 't3']],
+				])
+			)
+		).toBe(false)
+		// same size, different members
+		expect(
+			pinStacksEqual(
+				pair(),
+				new Map<string, readonly string[]>([
+					['t1', ['t1', 't3']],
+					['t3', ['t1', 't3']],
+				])
+			)
+		).toBe(false)
+		// same members, reordered within the group (the list renders in this order)
+		expect(
+			pinStacksEqual(
+				pair(),
+				new Map<string, readonly string[]>([
+					['t1', ['t2', 't1']],
+					['t2', ['t2', 't1']],
+				])
+			)
+		).toBe(false)
+	})
+
+	it('is blind to position — equal groupings can sit at different page points', () => {
+		// The overlay holds the map's identity while this is true, which is why nothing keyed on a
+		// stack's *point* may key off it. See isOpenStackKeyLive.
+		const threads = [
+			thread('t1', impreciseAnchor('shape:a'), { createdAt: 1 }),
+			thread('t2', impreciseAnchor('shape:a'), { createdAt: 2 }),
+		]
+		const here = computePinStacks(stubEditor(SHAPE), threads)
+		const moved = computePinStacks(stubEditor(SHAPE_MOVED), threads)
+		expect(pinStacksEqual(here, moved)).toBe(true)
+		expect(stackKeyOn(SHAPE)).not.toBe(stackKeyOn(SHAPE_MOVED))
+	})
+})
+
+describe('isOpenStackKeyLive', () => {
+	const threads = [
+		thread('t1', impreciseAnchor('shape:a'), { createdAt: 1 }),
+		thread('t2', impreciseAnchor('shape:a'), { createdAt: 2 }),
+	]
+	const byId = new Map(threads.map((t) => [t.id, t]))
+
+	it('is live while a stack still sits at the key', () => {
+		const editor = stubEditor(SHAPE)
+		expect(
+			isOpenStackKeyLive(editor, stackKeyOn(SHAPE), computePinStacks(editor, threads), byId)
+		).toBe(true)
+	})
+
+	it('goes stale when the stack moves — the case pinStacksEqual cannot see', () => {
+		// The anchor shape moved, so the point key changed while the membership didn't. Staying live
+		// here strands the old key in `openStackId`, killing every hover preview on the layer.
+		const editor = stubEditor(SHAPE_MOVED)
+		expect(
+			isOpenStackKeyLive(editor, stackKeyOn(SHAPE), computePinStacks(editor, threads), byId)
+		).toBe(false)
+		// and the key the stack moved *to* is live, so the caller clears rather than thrashing
+		expect(
+			isOpenStackKeyLive(editor, stackKeyOn(SHAPE_MOVED), computePinStacks(editor, threads), byId)
+		).toBe(true)
+	})
+
+	it('goes stale once nothing stacks there, or the threads are gone', () => {
+		const editor = stubEditor(SHAPE)
+		// the stack collapsed to a single pin: no entries at all
+		expect(isOpenStackKeyLive(editor, stackKeyOn(SHAPE), new Map(), byId)).toBe(false)
+		// entries for threads that have left the input
+		expect(
+			isOpenStackKeyLive(editor, stackKeyOn(SHAPE), computePinStacks(editor, threads), new Map())
+		).toBe(false)
+	})
+})

package/src/canvas/pin-stacking.ts

@@ -0,0 +1,103 @@
+import type { Editor, TLCommentThread } from 'tldraw'
+import { anchorPagePoint } from './thread-state'
+
+/** Two anchors within this page-space distance (per axis) share a stack. Identical imprecise
+ *  anchors on one shape resolve to the same point exactly; the tolerance only absorbs float noise. */
+const PIN_STACK_QUANTUM = 0.1
+
+/**
+ * The key a page point stacks under. Threads sharing a key are coincident. Stable identity for a
+ * stack itself: it survives losing any member (the survivors keep the same key), unlike keying by
+ * a particular thread id, so open-stack state stays put when the stack's oldest thread is deleted.
+ */
+export function pinStackKey(point: { x: number; y: number }): string {
+	return `${Math.round(point.x / PIN_STACK_QUANTUM)}:${Math.round(point.y / PIN_STACK_QUANTUM)}`
+}
+
+/**
+ * Group threads whose pins land on the same page point — coincident pins (typically several
+ * imprecise comments on one shape) that zooming can never separate. The overlay renders each
+ * group as a single count-badge pin that opens the threads as a list. Every member id maps to
+ * its group's ordered member ids (oldest first); threads without an entry pin individually.
+ *
+ * Keyed by page-space anchor point, not screen position, so the result only changes when threads
+ * or their anchors move — never on camera moves.
+ * @internal
+ */
+export function computePinStacks(
+	editor: Editor,
+	threads: readonly TLCommentThread[]
+): Map<string, readonly string[]> {
+	const pageId = editor.getCurrentPageId()
+	const groups = new Map<string, TLCommentThread[]>()
+
+	for (const thread of threads) {
+		if (thread.pageId !== pageId) continue
+		const point = anchorPagePoint(editor, thread.anchor)
+		if (!point) continue
+		const key = pinStackKey(point)
+		const group = groups.get(key)
+		if (group) {
+			group.push(thread)
+		} else {
+			groups.set(key, [thread])
+		}
+	}
+
+	const stacks = new Map<string, readonly string[]>()
+	for (const group of groups.values()) {
+		if (group.length < 2) continue
+		group.sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1))
+		const ids = group.map((thread) => thread.id)
+		for (const id of ids) {
+			stacks.set(id, ids)
+		}
+	}
+	return stacks
+}
+
+/**
+ * Value equality for pin-stack maps, so the overlay can hold the map's identity across a recompute
+ * that changed no grouping. Membership only: two equal maps can describe stacks at different page
+ * points, so anything keyed on a stack's *point* must read the anchors itself, as
+ * {@link isOpenStackKeyLive} does.
+ * @internal
+ */
+export function pinStacksEqual(
+	a: ReadonlyMap<string, readonly string[]>,
+	b: ReadonlyMap<string, readonly string[]>
+): boolean {
+	if (a === b) return true
+	if (a.size !== b.size) return false
+	for (const [id, group] of b) {
+		const prevGroup = a.get(id)
+		if (!prevGroup) return false
+		if (prevGroup === group) continue
+		if (prevGroup.length !== group.length) return false
+		for (let i = 0; i < group.length; i++) {
+			if (prevGroup[i] !== group[i]) return false
+		}
+	}
+	return true
+}
+
+/**
+ * Whether an open-stack key still names a stack on the canvas — false once that stack is emptied,
+ * moved, or off the page, at which point the caller must clear the key. Reads the anchors, so a
+ * reactive caller re-evaluates on a move that {@link pinStacksEqual} can't see.
+ * @internal
+ */
+export function isOpenStackKeyLive(
+	editor: Editor,
+	key: string,
+	stacks: ReadonlyMap<string, readonly string[]>,
+	threadsById: ReadonlyMap<string, TLCommentThread>
+): boolean {
+	for (const id of stacks.keys()) {
+		const thread = threadsById.get(id)
+		if (!thread) continue
+		const point = anchorPagePoint(editor, thread.anchor)
+		if (point && pinStackKey(point) === key) return true
+	}
+	return false
+}

package/src/canvas/region-box.tsx

@@ -0,0 +1,124 @@
+import { type PointerEvent as ReactPointerEvent, useRef } from 'react'
+import { type BoxModel, Editor, useValue, VecLike } from 'tldraw'
+import { regionDraft } from './state'
+
+/** A region's dashed box. Purely visual — a region moves by its pin and resizes from its corner
+ *  handles, so the box itself takes no pointer events. Positioned in viewport space, as a sibling
+ *  of the pins in the canvas layer. */
+export function RegionBox({ editor, box }: { editor: Editor; box: BoxModel }) {
+	const rect = useValue(
+		'region rect',
+		() => {
+			// Position from the page→viewport top-left; screen size scales with zoom, page size doesn't.
+			const topLeft = editor.pageToViewport({ x: box.x, y: box.y })
+			const zoom = editor.getZoomLevel()
+			return { left: topLeft.x, top: topLeft.y, width: box.w * zoom, height: box.h * zoom }
+		},
+		[editor, box.x, box.y, box.w, box.h]
+	)
+	return <div className="tlui-cmt-canvas-region" style={rect} />
+}
+
+/** The live region being dragged out by the comment tool, or nothing when not dragging. */
+export function RegionDraftBox({ editor }: { editor: Editor }) {
+	const box = useValue('region draft', () => regionDraft.get(editor), [editor])
+	if (!box) return null
+	return <RegionBox editor={editor} box={box} />
+}
+
+// A resize handle's normalized 0–1 spot on the box, and its cursor. An axis at 0.5 is *not*
+// controlled by that handle — the resize math reads the spot rather than special-casing corners.
+export interface RegionHandle {
+	x: number
+	y: number
+	cursor: string
+}
+
+// The four corners, each resizing both axes.
+export const REGION_CORNERS: readonly RegionHandle[] = [
+	{ x: 0, y: 0, cursor: 'nwse-resize' },
+	{ x: 1, y: 0, cursor: 'nesw-resize' },
+	{ x: 0, y: 1, cursor: 'nesw-resize' },
+	{ x: 1, y: 1, cursor: 'nwse-resize' },
+]
+
+// Screen-space slack around a region's bounds within which its box and handles stay revealed, so
+// the handles (which sit on the edge) are comfortably reachable.
+export const REGION_HANDLE_MARGIN_PX = 12
+
+/** Resize `box` by dragging `handle` to `cursor` (page coords). Each controlled axis spans from the
+ *  handle's fixed opposite edge to the cursor (normalized, so dragging past it flips); an axis the
+ *  handle doesn't control (a midpoint, at 0.5) keeps its original position and size. */
+function resizeRegion(box: BoxModel, handle: RegionHandle, cursor: VecLike): BoxModel {
+	const controlsX = handle.x !== 0.5
+	const controlsY = handle.y !== 0.5
+	const fixedX = box.x + (1 - handle.x) * box.w
+	const fixedY = box.y + (1 - handle.y) * box.h
+	return {
+		x: controlsX ? Math.min(fixedX, cursor.x) : box.x,
+		y: controlsY ? Math.min(fixedY, cursor.y) : box.y,
+		w: controlsX ? Math.abs(cursor.x - fixedX) : box.w,
+		h: controlsY ? Math.abs(cursor.y - fixedY) : box.h,
+	}
+}
+
+/** Draggable handles that resize a region — corners (both axes) or edges (one axis), per the resize
+ *  option. Previews live, commits on release. */
+export function RegionResizeHandles({
+	editor,
+	box,
+	handles,
+	onPreview,
+	onCommit,
+}: {
+	editor: Editor
+	box: BoxModel
+	handles: readonly RegionHandle[]
+	onPreview(bounds: BoxModel | null): void
+	onCommit(bounds: BoxModel): void
+}) {
+	// The box at pointer-down, captured so the box prop reflowing under the live preview doesn't move
+	// the fixed edges mid-drag.
+	const boxRef = useRef<BoxModel | null>(null)
+	const points = useValue(
+		'region handle points',
+		() =>
+			handles.map((h) => {
+				const p = editor.pageToViewport({ x: box.x + h.x * box.w, y: box.y + h.y * box.h })
+				return { ...h, key: `${h.x}-${h.y}`, left: p.x, top: p.y }
+			}),
+		[editor, box.x, box.y, box.w, box.h, handles]
+	)
+	const startResize = (e: ReactPointerEvent<HTMLDivElement>) => {
+		e.stopPropagation()
+		boxRef.current = box
+		e.currentTarget.setPointerCapture(e.pointerId)
+	}
+	const resizedTo = (h: RegionHandle, e: ReactPointerEvent<HTMLDivElement>): BoxModel =>
+		resizeRegion(boxRef.current!, h, editor.screenToPage({ x: e.clientX, y: e.clientY }))
+	const onResize = (h: RegionHandle) => (e: ReactPointerEvent<HTMLDivElement>) => {
+		if (boxRef.current) onPreview(resizedTo(h, e))
+	}
+	const endResize = (h: RegionHandle) => (e: ReactPointerEvent<HTMLDivElement>) => {
+		if (!boxRef.current) return
+		const bounds = resizedTo(h, e)
+		boxRef.current = null
+		if (e.currentTarget.hasPointerCapture(e.pointerId))
+			e.currentTarget.releasePointerCapture(e.pointerId)
+		onCommit(bounds)
+	}
+	return (
+		<>
+			{points.map((h) => (
+				<div
+					key={h.key}
+					className="tlui-cmt-canvas-region-handle"
+					style={{ left: h.left, top: h.top, cursor: h.cursor }}
+					onPointerDown={startResize}
+					onPointerMove={onResize(h)}
+					onPointerUp={endResize(h)}
+				/>
+			))}
+		</>
+	)
+}

package/src/canvas/sidebar-filters.ts

@@ -16,10 +16,11 @@ export interface SidebarFilters {
 	onlyCurrentPage: boolean
 }
 
-/** @public */
+/** The out-of-the-box view: every page's threads, resolved ones hidden until asked for.
+ * @public */
 export const DEFAULT_SIDEBAR_FILTERS: SidebarFilters = {
-	showResolved: true,
+	showResolved: false,
 	onlyMine: false,
 	onlyUnread: false,
-	onlyCurrentPage: true,
+	onlyCurrentPage: false,
 }