@devaccel-labs/app-comments-toolbar 0.0.0-stage → 1.1.0

package/dist/types/runtime/client.d.ts

@@ -0,0 +1,220 @@
+import type { Anchor } from "../core/index.js";
+import { type Session } from "./session.js";
+export type Mentioned = {
+    id: string;
+    name: string;
+};
+/** Where a page screenshot was taken. */
+export type Capture = {
+    url: string;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    browser?: string;
+};
+export type Attachment = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    url: string;
+    capture?: Capture;
+};
+/** An earlier version of a message. `createdAt` is when that version was written. */
+export type Revision = {
+    body: string;
+    mentions?: Mentioned[];
+    createdAt: string;
+};
+export type CommentMessage = {
+    id: string;
+    body: string;
+    author: string;
+    /** Missing on messages written before author ids were stored. */
+    authorId?: string | null;
+    createdAt: string;
+    editedAt?: string | null;
+    mentions?: Mentioned[];
+    attachments?: Attachment[];
+    /** Earlier versions, oldest first. The current body is the version after the last one. */
+    revisions?: Revision[];
+};
+export type Member = {
+    id: string;
+    name: string;
+    email: string;
+};
+export type Delivery = {
+    emailed: Mentioned[];
+    skipped: Array<Mentioned & {
+        reason: "rate_limited" | "muted" | "disabled" | string;
+    }>;
+};
+export type Profile = {
+    name: string;
+    email: string | null;
+    mentionEmails: boolean;
+};
+export type PostExtras = {
+    mentions?: string[];
+    screenshot?: string | null;
+    attachments?: string[];
+};
+export type FieldDef = {
+    id: string;
+    label: string;
+};
+export type FieldValue = FieldDef & {
+    value: string;
+};
+export type Settings = {
+    roles: {
+        enabled: boolean;
+        options: string[];
+    };
+    fields: {
+        enabled: boolean;
+        items: FieldDef[];
+    };
+};
+/** Role and custom field values for a new or edited comment, keyed by field id. */
+export type Details = {
+    role: string | null;
+    fields: Record<string, string>;
+};
+export type Thread = {
+    id: string;
+    /** The environment the comment was left in. Differs from the session's for comments from a linked environment. */
+    environment?: string;
+    route: string;
+    /** The page the comment was left on, including query and hash. */
+    url: string;
+    role: string | null;
+    fields: FieldValue[];
+    anchor: Anchor;
+    status: "open" | "resolved";
+    createdBy: string;
+    createdAt: string;
+    updatedAt: string;
+    messages: CommentMessage[];
+    /** Set when the team turned this comment into a support ticket in MyStatusFlow. */
+    ticket?: TicketBadge;
+};
+/** A comment's support ticket, as the commenter sees it: number and status only. */
+export type TicketBadge = {
+    number: string;
+    status: string;
+    label: string;
+};
+export declare class ApiError extends Error {
+    readonly status: number;
+    readonly code: string;
+    constructor(status: number, code: string, message: string);
+}
+export declare function storageKey(session: Pick<Session, "apiUrl" | "project" | "environment">): string;
+/** The team passphrase, kept on this device after unlocking with it so it can be shared from the dashboard. */
+export declare function passphraseKey(session: Pick<Session, "apiUrl" | "project" | "environment">): string;
+/**
+ * When the comment service moves to a new URL, the saved sign-in is under the old URL's key. Copy the newest current
+ * one for this project and environment to the new key, and leave the old key in place so going back also works.
+ */
+export declare function adoptStoredMember(session: Pick<Session, "apiUrl" | "project" | "environment">, storage?: Storage): void;
+export declare function memberIsCurrent(token: string): boolean;
+/** Sign in with the team passphrase, or with an invite link token instead. */
+export declare function unlock(session: Session, displayName: string, email: string, secret: {
+    passphrase: string;
+} | {
+    invite: string;
+}): Promise<string>;
+/** How people can sign in here. Services that predate MyStatusFlow sign-in answer 404: passphrase only. */
+export type SignInOptions = {
+    passphrase: boolean;
+    msf: {
+        authorizeUrl: string;
+        label: string;
+    } | null;
+};
+export declare function signInOptions(session: Session): Promise<SignInOptions>;
+/**
+ * An OAuth 2.0 authorization request with PKCE (S256). The verifier never leaves this page. The sign-in window
+ * comes back to `returnTo` (this page, on this origin) with the code, so a code only ever reaches the app it
+ * was issued for.
+ */
+export declare function msfAuthorization(authorizeUrl: string, returnTo: string): Promise<{
+    url: string;
+    state: string;
+    verifier: string;
+}>;
+/** Trades the authorization code for a member token. */
+export declare function finishMsfSignIn(session: Session, input: {
+    state: string;
+    verifier: string;
+    code: string;
+}): Promise<string>;
+/** What the sign-in window hands back to the app (a code, or an error such as access_denied). */
+export type MsfHandoff = {
+    state: string;
+    code?: string;
+    error?: string;
+    at: number;
+};
+/**
+ * The sign-in window ends on this app's page with the result in the address hash (when it couldn't message the
+ * page that opened it). Pass it to that page through same-origin storage and a broadcast, and clean the address.
+ */
+export declare function relayMsfHandoff(): boolean;
+/** Calls `onHandoff` when a sign-in window hands a result back, by message, broadcast or storage. */
+export declare function listenForMsfHandoff(apiOrigin: string, onHandoff: (handoff: MsfHandoff) => void): () => void;
+export declare function createInvite(session: Session, memberToken: string): Promise<{
+    invite: string;
+    invitedBy: string;
+    expiresAt: string;
+}>;
+export declare function getProfile(session: Session, memberToken: string): Promise<Profile>;
+export declare function updateProfile(session: Session, memberToken: string, patch: {
+    displayName?: string;
+    email?: string;
+    mentionEmails?: boolean;
+}): Promise<Profile & {
+    token: string;
+}>;
+export declare function uploadAttachment(session: Session, memberToken: string, file: Blob, name: string, environment?: string, capture?: Capture): Promise<Attachment>;
+export declare function listMembers(session: Session, memberToken: string, environment?: string): Promise<Member[]>;
+/** "view": this person may read but not comment. Older services don't send it, which means "edit". */
+export type Access = "edit" | "view";
+export declare function listThreads(session: Session, memberToken: string): Promise<{
+    threads: Thread[];
+    settings: Settings;
+    environment?: string | null;
+    linked?: string[];
+    access?: Access;
+}>;
+/** A socket that says "changed" whenever comments change in this environment or one it links to. */
+export declare function openLive(session: Session, memberToken: string): WebSocket;
+export declare function saveSettings(session: Session, memberToken: string, settings: Settings): Promise<Settings>;
+export declare function createThread(session: Session, memberToken: string, anchor: Anchor, body: string, extras?: PostExtras & Partial<Details> & {
+    url?: string;
+}): Promise<{
+    thread: Thread;
+    delivery?: Delivery;
+}>;
+export declare function replyToThread(session: Session, memberToken: string, threadId: string, body: string, extras?: PostExtras): Promise<{
+    message: CommentMessage;
+    delivery?: Delivery;
+}>;
+export declare function updateThread(session: Session, memberToken: string, threadId: string, patch: {
+    status?: "open" | "resolved";
+    anchor?: Anchor;
+    url?: string;
+} & Partial<Details>): Promise<{
+    id: string;
+}>;
+export declare function editMessage(session: Session, memberToken: string, threadId: string, messageId: string, body: string, mentions: string[]): Promise<{
+    message: {
+        id: string;
+        body: string;
+        editedAt: string | null;
+    };
+    delivery: Delivery | null;
+}>;

package/dist/types/runtime/dashboard.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import type { Member, Thread } from "./client.js";
+import { type PlacedStatus } from "./format.js";
+import type { Session } from "./session.js";
+type TableRow = {
+    thread: Thread;
+    status: PlacedStatus;
+};
+export declare function Dashboard({ rows, route, environment, memberName, memberId, roles, members, session, memberToken, envFilter, profile, settingsPane, onClose, onOpen, onRefresh, readOnly, }: {
+    rows: TableRow[];
+    route: string;
+    environment: string;
+    memberName: string;
+    memberId?: string;
+    roles: string[];
+    members: Member[];
+    session: Session;
+    memberToken: string;
+    envFilter: ReactNode;
+    profile: ReactNode;
+    settingsPane: ReactNode;
+    onClose: () => void;
+    onOpen: (row: TableRow) => void;
+    onRefresh: () => Promise<unknown> | unknown;
+    /** View-only access: no replies and no status changes. */
+    readOnly?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/runtime/details.d.ts

@@ -0,0 +1,43 @@
+import { type KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { Details, FieldValue, Settings, Thread } from "./client.js";
+export declare const noDetails: Details;
+export declare function detailsEnabled(settings: Settings | null): boolean;
+export declare function hasFieldValues(details: Details): boolean;
+/** Only sends what is turned on, so a disabled feature never rejects a post. */
+export declare function detailsPayload(settings: Settings | null, details: Details): Partial<Details>;
+export declare function DetailsInput({ settings, value, onChange, onKeyDown, }: {
+    settings: Settings | null;
+    value: Details;
+    onChange: (next: Details) => void;
+    onKeyDown?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function RoleBadge({ role }: {
+    role: string | null;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** "Ticket I00012 · In progress": the team turned this comment into a support ticket. */
+export declare function TicketBadge({ ticket, }: {
+    ticket?: {
+        number: string;
+        status: string;
+        label: string;
+    };
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function FieldValues({ fields, clamp }: {
+    fields: FieldValue[];
+    clamp?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Inline editor for a posted comment's role and fields. Values for fields that were since removed are kept by the server. */
+export declare function DetailsEditor({ settings, thread, onSave, onClose, }: {
+    settings: Settings;
+    thread: Thread;
+    onSave: (patch: Partial<Details>) => Promise<void>;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Shared per environment: anyone signed in can change it, and existing comments keep their values. */
+export declare function SettingsPanel({ settings, onChange, onBack, error, }: {
+    settings: Settings | null;
+    onChange: (next: Settings) => void;
+    /** Without a back button the panel renders inline, e.g. inside the dashboard. */
+    onBack?: () => void;
+    error: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/runtime/dock.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Where the comment toolbar sits after someone drags it.
+ *
+ * Same gesture as React Grab's toolbar: a press that moves less than `dockSlop` is still a click,
+ * a longer press follows the pointer, and release snaps to the nearest screen edge. A flick is
+ * projected `dockFlickMs` ahead so the bar lands on the edge it was heading toward. An equal
+ * distance prefers top, then left, then right, then bottom.
+ */
+export type DockEdge = "top" | "right" | "bottom" | "left";
+export type Dock = {
+    edge: DockEdge;
+    ratio: number;
+};
+export type DockPoint = {
+    x: number;
+    y: number;
+};
+export type DockSize = {
+    width: number;
+    height: number;
+};
+export type DockBounds = {
+    width: number;
+    height: number;
+};
+/** Inset from the screen edge once the bar has snapped, in px. */
+export declare const dockMargin = 12;
+/** Movement below this, in px, stays a click on a tool. */
+export declare const dockSlop = 4;
+/** How far ahead a flick is projected, in ms. */
+export declare const dockFlickMs = 150;
+export declare function readDock(value: unknown): Dock | undefined;
+/** `ratio` is 0 at the start of the edge and 1 at the end. */
+export declare function placeDock(dock: Dock, bounds: DockBounds, size: DockSize, margin?: number): DockPoint;
+/** Keep the whole bar on screen while it follows the pointer. */
+export declare function clampBar(point: DockPoint, bounds: DockBounds, size: DockSize): DockPoint;
+/** `velocity` is px/ms. The returned point is the snapped top-left. */
+export declare function snapDock(origin: DockPoint, velocity: DockPoint, bounds: DockBounds, size: DockSize, margin?: number): Dock & DockPoint;

package/dist/types/runtime/edits.d.ts

@@ -0,0 +1,20 @@
+import type { CommentMessage, Member } from "./client.js";
+export declare function isMine(message: CommentMessage, memberId: string | undefined, memberName: string): boolean;
+export declare function MessageTools({ message, mine, historyOpen, onHistory, onEdit, }: {
+    message: CommentMessage;
+    mine: boolean;
+    historyOpen: boolean;
+    onHistory: () => void;
+    onEdit: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function MessageHistory({ message }: {
+    message: CommentMessage;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MessageEditor({ message, members, selfEmail, allowEmpty, onSave, onCancel, }: {
+    message: CommentMessage;
+    members: Member[];
+    selfEmail?: string;
+    allowEmpty: boolean;
+    onSave: (body: string, mentions: string[]) => Promise<unknown>;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/runtime/format.d.ts

@@ -0,0 +1,15 @@
+import type { Anchor } from "../core/index.js";
+import type { Delivery } from "./client.js";
+export declare function initials(name: string): string;
+export declare function colorFor(name: string): string;
+export declare function ago(iso: string): string;
+export declare function targetName(anchor: Anchor): string;
+/** "pending": on this page, but not looked up yet. */
+export type PlacedStatus = "pinned" | "drifted" | "hidden" | "ambiguous" | "unavailable" | "resolved" | "pending";
+/** Plain-language reason a thread isn't pinned, or null when there's nothing to explain. */
+export declare function statusNote(status: PlacedStatus, anchor: Anchor): {
+    text: string;
+    tone: string;
+} | null;
+/** One quiet line about who was emailed for a message, or null when nobody was mentioned. */
+export declare function deliveryText(delivery: Delivery | undefined): string | null;

package/dist/types/runtime/freshness.d.ts

@@ -0,0 +1,18 @@
+/** Longest wait between threads refetches while no live socket is open and something on screen needs them. */
+export declare const MAX_POLL_MS = 60000;
+export type PollState = {
+    /** The live socket is open, so changes are pushed. */
+    live: boolean;
+    visible: boolean;
+    /** Something on screen shows threads: the comments panel, a draft, or this page's pins and count. */
+    wanted: boolean;
+    /** Refetches in a row that changed nothing. */
+    quiet: number;
+    pollMs: number;
+};
+/**
+ * Milliseconds until the next threads refetch, or null for none: the live socket pushes changes, the tab is hidden,
+ * or the toolbar is collapsed with nothing on this page to keep current. Each refetch that changed nothing doubles
+ * the wait, up to MAX_POLL_MS (or `pollMs`, if that is longer).
+ */
+export declare function nextPoll({ live, visible, wanted, quiet, pollMs }: PollState): number | null;

package/dist/types/runtime/handoff.d.ts

@@ -0,0 +1,15 @@
+export type Handoff = {
+    invite?: string;
+    thread?: string;
+    at: number;
+};
+export declare function readHandoff(): Handoff | null;
+/**
+ * Saves invite and thread links for this tab before the app's router or sign-in flow rewrites the URL.
+ * Runs when the module loads, which is before hydration, and again when the toolbar mounts.
+ */
+export declare function captureHandoff(): void;
+export declare function dropHandoff(part: "invite" | "thread"): void;
+/** Removes the link params from the address bar once they're saved. */
+export declare function stripHandoffFromUrl(): void;
+export declare function linkWith(href: string, name: "cs-invite" | "cs-thread", value: string): string;

package/dist/types/runtime/icons.d.ts

@@ -0,0 +1,40 @@
+export declare const AddComment: () => import("react/jsx-runtime").JSX.Element;
+export declare const Inbox: () => import("react/jsx-runtime").JSX.Element;
+export declare const Eye: () => import("react/jsx-runtime").JSX.Element;
+export declare const EyeOff: () => import("react/jsx-runtime").JSX.Element;
+export declare const Lock: ({ size }: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Close: () => import("react/jsx-runtime").JSX.Element;
+export declare const Send: () => import("react/jsx-runtime").JSX.Element;
+export declare const Check: () => import("react/jsx-runtime").JSX.Element;
+export declare const Target: () => import("react/jsx-runtime").JSX.Element;
+export declare const Relink: () => import("react/jsx-runtime").JSX.Element;
+export declare const Undo: () => import("react/jsx-runtime").JSX.Element;
+export declare const Pencil: () => import("react/jsx-runtime").JSX.Element;
+export declare const Cursor: () => import("react/jsx-runtime").JSX.Element;
+export declare const Paperclip: () => import("react/jsx-runtime").JSX.Element;
+export declare const Record: () => import("react/jsx-runtime").JSX.Element;
+export declare const Camera: () => import("react/jsx-runtime").JSX.Element;
+export declare const FileIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const Back: () => import("react/jsx-runtime").JSX.Element;
+export declare const Ellipsis: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronLeft: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronRight: () => import("react/jsx-runtime").JSX.Element;
+export declare const Play: () => import("react/jsx-runtime").JSX.Element;
+export declare const Plane: () => import("react/jsx-runtime").JSX.Element;
+export declare const Bubble: () => import("react/jsx-runtime").JSX.Element;
+/** A pin that a slash draws through when `hidden`; the slash also cuts a gap in the pin behind it. */
+export declare function Pins({ hidden }: {
+    hidden: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const User: () => import("react/jsx-runtime").JSX.Element;
+export declare const Gear: () => import("react/jsx-runtime").JSX.Element;
+export declare const Copy: () => import("react/jsx-runtime").JSX.Element;
+export declare const Clock: () => import("react/jsx-runtime").JSX.Element;
+export declare const Board: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDown: () => import("react/jsx-runtime").JSX.Element;
+export declare const Search: () => import("react/jsx-runtime").JSX.Element;
+export declare const ZoomOut: () => import("react/jsx-runtime").JSX.Element;
+export declare const ZoomIn: () => import("react/jsx-runtime").JSX.Element;
+export declare const Reply: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/runtime/idle.d.ts

@@ -0,0 +1,6 @@
+export type IdleDeadline = {
+    didTimeout: boolean;
+    timeRemaining(): number;
+};
+/** Runs `task` when the browser is next idle, or after `timeout` ms at the latest. Returns a cancel function. */
+export declare function whenIdle(task: (deadline: IdleDeadline) => void, timeout: number): () => void;

package/dist/types/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export { CommentToolbar } from "./loader.js";
+export type { ToolbarPosition, ToolbarProps, ToolbarTheme } from "./toolbar.js";

package/dist/types/runtime/loader.d.ts

@@ -0,0 +1,6 @@
+import type { ToolbarProps } from "./toolbar.js";
+/**
+ * Renders nothing and does nothing during render. Once the page is idle it asks the session route, once per page
+ * load, whether comments are on, and only then loads and mounts the toolbar.
+ */
+export declare function CommentToolbar({ sessionPath, pollMs, position, theme, navigate, }: ToolbarProps): null;

package/dist/types/runtime/members.d.ts

@@ -0,0 +1,11 @@
+import { type Member } from "./client.js";
+import type { Session } from "./session.js";
+type LoadMembers = (session: Session, memberToken: string, environment?: string) => Promise<Member[]>;
+/** One request per environment, shared by every caller and kept for MEMBERS_TTL_MS. A failed request isn't kept. */
+export declare function membersCache(load: LoadMembers, now?: () => number): LoadMembers;
+/**
+ * People who can be @mentioned in `environment` (this one when omitted), fetched only while `wanted`, which the
+ * toolbar sets when a composer or reply box can be typed in.
+ */
+export declare function useMembers(session: Session | null, memberToken: string | null, environment: string | undefined, wanted: boolean): Member[];
+export {};

package/dist/types/runtime/mentions.d.ts

@@ -0,0 +1,17 @@
+import { type TextareaHTMLAttributes } from "react";
+import type { Member, Mentioned } from "./client.js";
+type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+    value: string;
+    onValueChange: (next: string) => void;
+    members: Member[];
+    selfEmail?: string;
+    onMention: (member: Member) => void;
+};
+/** Members picked while writing whose `@Name` is still in the text. */
+export declare function mentionsIn(text: string, picked: Map<string, Member>): Member[];
+export declare function MessageText({ body, mentions }: {
+    body: string;
+    mentions?: Mentioned[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MentionTextarea({ value, onValueChange, members, selfEmail, onMention, onKeyDown, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/runtime/page-image.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Draws the visible page onto a canvas without reading a computed style per element.
+ *
+ * The page is cloned natively (`cloneNode(true)`, a few milliseconds for thousands of nodes), the page's own
+ * stylesheets are inlined once (cached per page, with fonts and `url()` assets embedded as data URLs), and the
+ * result is rasterized through an SVG `<foreignObject>`. The previous renderer (modern-screenshot) copied the
+ * diff of ~400 computed properties for every element and its pseudo-elements, which cost about a second of
+ * main-thread time per capture on an ordinary page and grew with the page. This one spends the main thread on
+ * the clone walk and on the browser's own SVG layout, and nothing on the network once warmed.
+ *
+ * What is not carried over: cross-origin iframes (drawn blank), `<video>` frames (blank), styles that depend on
+ * `:hover`/`:focus` (dropped, which is what a screenshot should show anyway).
+ */
+export type PageImageOptions = {
+    /** Device pixels per CSS pixel in the output. */
+    scale: number;
+    /** Upper bound on the whole capture. */
+    timeout?: number;
+    /** Subtrees to leave out (the toolbar). */
+    exclude?: (element: Element) => boolean;
+    /** Painted behind the page. */
+    backgroundColor?: string;
+    /** CSS width/height of the captured area; defaults to the viewport. */
+    width?: number;
+    height?: number;
+    /** Window scroll offsets the page is shifted by. */
+    scrollX?: number;
+    scrollY?: number;
+};
+type Viewport = {
+    width: number;
+    height: number;
+};
+/** A data URL for `url`, or null when it can't be fetched in time. Never rejects. */
+export declare function assetDataUrl(url: string, timeout?: number): Promise<string | null>;
+/** Replaces every `url()` in `cssText` with a data URL. Unfetchable ones are left as they are. */
+export declare function inlineCssUrls(cssText: string, baseHref: string): Promise<string>;
+type StyleSource = {
+    key: string;
+    ownHref: string;
+    text: string | null;
+    href: string | null;
+};
+/** The sheets that style the page, read in document order. */
+export declare function collectStyleSources(doc: Document): StyleSource[];
+/** Every page style as one block of CSS with assets embedded. Cached; refreshed when a sheet is added or grows. */
+export declare function pageStyleText(doc?: Document): Promise<string>;
+/** Fetches fonts and CSS assets now, so the first capture pays nothing on the network. */
+export declare function prewarmPageImage(doc?: Document): void;
+/**
+ * The elements that paint inside the viewport, plus every ancestor of one (so the tree above them survives).
+ * Elements without a box (`display: none`, `<option>`, SVG `<defs>`, `display: contents` wrappers) are not
+ * listed: they neither show nor hide anything by themselves, so the clone keeps them under a kept parent.
+ */
+export declare function visibleSet(root: Element, viewport: Viewport): Set<Element>;
+export type ClonedPage = {
+    root: Element;
+    waits: Promise<unknown>[];
+    elements: number;
+};
+/**
+ * A copy of `root` ready to serialize: offscreen and non-painting subtrees removed, live form values, scroll
+ * offsets, canvases and images carried over. `waits` resolve when every image has its pixels.
+ */
+export declare function clonePage(root: Element, viewport: Viewport, exclude: (element: Element) => boolean, view?: Window): ClonedPage;
+/** The SVG document that draws `clone` with `css` applied, `width`×`height` CSS pixels. */
+export declare function pageSvg(clone: Element, css: string, width: number, height: number): string;
+/** The visible page as a canvas. Throws when the page can't be drawn in time. */
+export declare function drawPage(options: PageImageOptions): Promise<HTMLCanvasElement>;
+export {};

package/dist/types/runtime/placement.d.ts

@@ -0,0 +1,43 @@
+import type { Thread } from "./client.js";
+import type { PlacedStatus } from "./format.js";
+export type Box = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type Placed = {
+    thread: Thread;
+    status: PlacedStatus;
+    top?: number;
+    left?: number;
+};
+export declare function overlayBounds(host: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function placeAgainst(element: Element, host: HTMLElement): Box | null;
+/**
+ * The open <dialog> the toolbar renders inside, since a modal's top layer covers everything else, or <body>.
+ * Instead of a MutationObserver on the whole page: showModal() moves focus into the dialog synchronously, so
+ * focusin moves the toolbar before the click that opened it returns; toggle/close cover the rest, and clicks and
+ * keys re-check once their handlers have run.
+ */
+export declare function useOverlayHost(enabled: boolean): HTMLElement | null;
+/**
+ * Where each thread's anchor is on this page. Anchors are resolved only while `active` (the panel is open or this
+ * page's pins are shown) and the tab is visible, only for open threads on this route, in idle-time slices. The page
+ * is watched with a MutationObserver only while the panel is open or the page is small; otherwise clicks, keys,
+ * focus and a slow re-check trigger re-resolves. Scrolling and resizing only re-measure elements already found.
+ */
+export declare function usePlacement({ threads, route, host, active, panelOpen, visible, }: {
+    threads: Thread[];
+    route: string;
+    host: HTMLElement;
+    active: boolean;
+    panelOpen: boolean;
+    visible: boolean;
+}): {
+    placed: Placed[];
+    elementFor: (threadId: string) => Element | null;
+};

package/dist/types/runtime/record.d.ts

@@ -0,0 +1,33 @@
+export declare const FRAME_WIDTH = 1920;
+export declare const FRAME_HEIGHT = 1080;
+export declare function recordingMime(): string | null;
+export declare function formatClock(ms: number): string;
+type FeaturePolicy = {
+    allowsFeature(feature: string): boolean;
+};
+/** The document's capture policy. Chrome still exposes this as `featurePolicy`. */
+export declare function pageCapturePolicy(doc: {
+    permissionsPolicy?: FeaturePolicy | null;
+    featurePolicy?: FeaturePolicy | null;
+} | null | undefined): FeaturePolicy | null;
+/** True when this document may call getDisplayMedia. A missing policy counts as allowed. */
+export declare function displayCaptureAllowed(policy: FeaturePolicy | null | undefined): boolean;
+/** Fit a source rectangle inside a 1920×1080 frame, scaling by at most 2. */
+export declare function fitFrame(sourceWidth: number, sourceHeight: number): {
+    scale: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type TabTake = {
+    stop: () => void;
+    cancel: () => void;
+    finished: Promise<Blob | null>;
+};
+/**
+ * Films this tab. When the page allows screen capture, the browser asks first.
+ * When the page forbids it, the visible page is filmed instead, so the record button still works.
+ */
+export declare function startTabRecording(onReady?: (take: TabTake) => void): Promise<TabTake>;
+export {};

package/dist/types/runtime/redact.d.ts

@@ -0,0 +1,10 @@
+/** Strips tokens and control characters from text that may be stored with a comment. */
+export declare function redactText(value: string): string;
+/** True for password fields and controls whose name, id, label, or autocomplete looks like a credential. */
+export declare function fieldIsSensitive(field: {
+    type?: string;
+    name?: string;
+    id?: string;
+    autocomplete?: string;
+    label?: string;
+}): boolean;