pipeup 0.4.1 → 0.5.1

package/dist/types/anchor/fuzzy.d.ts

@@ -1,4 +1,4 @@
-export declare function levenshtein(a: string, b: string): number;
+export declare const levenshtein: (a: string, b: string) => number;
 /**
  * Best approximate occurrence of `pattern` in `text` (Sellers' algorithm), or null if every
  * occurrence needs more than `maxDistance` edits.

package/dist/types/core.d.ts

@@ -1,4 +1,4 @@
-export declare const VERSION = "0.4.1";
+export declare const VERSION = "0.5.1";
 export { PipeupDocument, UnsavedChangeError, type Listener, type OpenOptions } from "./document";
 export { DEFAULT_PROFILE_NAME, MemoryStore, loadOrCreateProfile, type OpStore, type Profile, } from "./storage/store";
 export { IndexedDbStore } from "./storage/indexeddb";
@@ -9,4 +9,4 @@ export { resolveAnchor, type AnchorState, type Resolved, type ResolveOptions } f
 export { labelOf, locate, type Location } from "./anchor/locate";
 export { copyAll, copyThread, formatAgo, type CopyAs, type ExportItem, type ExportMeta, } from "./export/format";
 export { ANIMALS, COLOURS, animalName, nameOf, type Animal } from "./model/animals";
-export type { Anchor, Comment, Thread } from "./model/types";
+export type { Anchor, Comment, OpBody, SignedOp, Thread } from "./model/types";

package/dist/types/document.d.ts

@@ -1,5 +1,5 @@
-import type { Identity } from "./crypto/identity";
-import type { Anchor, Thread } from "./model/types";
+import { type Identity } from "./crypto/identity";
+import type { Anchor, SignedOp, Thread } from "./model/types";
 import type { OpStore } from "./storage/store";
 export interface OpenOptions {
     doc: string;
@@ -9,7 +9,8 @@ export interface OpenOptions {
     /** The reviewer's name; "" until they add one (they show as their animal). */
     name: string;
 }
-export type Listener = (threads: Thread[]) => void;
+/** `added`: the ops behind the change ([] for a rename). `source`: "local", "file", an add-on's id, or "" (a rename). */
+export type Listener = (threads: Thread[], added: readonly SignedOp[], source: string) => void;
 /** The change is recorded and shown, but the store refused it; it is saved with the next change. */
 export declare class UnsavedChangeError extends Error {
     readonly id: string;
@@ -38,6 +39,8 @@ export declare class PipeupDocument {
     /** Names new comments, and this reviewer's earlier unnamed ones, which listeners hear about. */
     set name(value: string);
     threads(): readonly Thread[];
+    /** Every verified op this browser holds, as {body, sig}. A new array each call; don't change the ops. */
+    ops(): readonly SignedOp[];
     onChange(fn: Listener): () => void;
     comment(anchor: Anchor, text: string): Promise<string>;
     reply(parentId: string, text: string): Promise<string>;
@@ -45,6 +48,11 @@ export declare class PipeupDocument {
     remove(commentId: string): Promise<void>;
     resolve(threadId: string): Promise<void>;
     reopen(threadId: string): Promise<void>;
+    /**
+     * Signs `data` for `purpose` ("<add-on id>/<name>") with this reviewer's identity, as base64url. The signed
+     * text starts "pipeup:", never "{", so it can never verify as an op.
+     */
+    sign(purpose: string, data: string): Promise<string>;
     /** Saves any changes the store has not yet accepted. Rejects while the store still fails. */
     flush(): Promise<void>;
     /** Everything this browser knows about the document, sealed when the page has a key. */
@@ -54,6 +62,11 @@ export declare class PipeupDocument {
      * Throws UnsavedChangeError (id of the first added change) if they were applied but the store refused them.
      */
     importFile(json: string): Promise<number>;
+    /**
+     * Verifies and merges ops from elsewhere, exactly as a feedback file's are; resolves to how many were new.
+     * Listeners hear once per call, only if something was added. More than 5,000 ops rejects with a RangeError.
+     */
+    merge(ops: readonly unknown[], source: string): Promise<number>;
     /** Runs one change at a time, in call order; a failed call does not stop later ones. */
     private enqueue;
     /** Records a change and returns its id. */

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./core";
 export { mount, type MountOptions, type PipeupInstance } from "./ui/mount";
+export { ADDON_API, addons, use, type AddonDocument, type AddonHost, type AddonInfo, type Capability, type ComposerHandle, type ComposerTool, type Dictation, type ItemHandle, type MenuItem, type NetworkUse, type Off, type PanelHandle, type PanelOptions, type PipeupAddon, type Status, type Teardown, type UiSnapshot, } from "./ui/addons";
 export { onReveal, setViewState, type SlideHook, type ViewState } from "./ui/here";

package/dist/types/model/ops.d.ts

@@ -2,6 +2,8 @@ import { type Identity } from "../crypto/identity";
 import type { OpBody, SignedOp } from "./types";
 /** Lengths are UTF-16 code units (JavaScript string length). */
 export declare const MAX_TEXT = 10000;
+/** The longest an op may be, as JSON, so one op can never be a way to fill someone's storage. */
+export declare const MAX_OP: number;
 /** Far beyond any real log, far below where clock arithmetic could overflow. */
 export declare const MAX_CLOCK: number;
 /** Latest valid `at` in ms (about the year 6400); new ops stay at it rather than fail. */

package/dist/types/ui/addons.d.ts

@@ -0,0 +1,229 @@
+import type { Listener, PipeupDocument } from "../document";
+import type { SignedOp, Thread } from "../model/types";
+import { type ComposerTool } from "./composer";
+import type { Ctx } from "./context";
+import type { ViewState } from "./here";
+/** Bumped only for breaking changes to the add-on object, the host, AddonDocument or the data slots. */
+export declare const ADDON_API = 1;
+export type Teardown = () => void;
+export type Off = () => void;
+export type Capability = "sync" | "menu" | "notify" | "note" | "composer" | "panel" | "styles" | "status" | "overlay" | "here" | "sign";
+export interface NetworkUse {
+    when: "never" | "after-consent" | "page-configured";
+    /** Hosts; "page" is an address the page names. */
+    to: readonly string[];
+    /** One plain sentence: what leaves the device, and who sees what. */
+    says: string;
+}
+export interface AddonInfo {
+    id: string;
+    version: string;
+    network: NetworkUse;
+    /** waiting: registered, Pipeup not mounted yet (or unmounted). */
+    state: "waiting" | "on" | "off" | "failed";
+    /** Why it is off or failed, in words. */
+    reason?: string;
+}
+export interface PipeupAddon {
+    /** /^[a-z][a-z0-9-]{1,23}$/; also the source of everything it merges. */
+    readonly id: string;
+    /** The add-on API it was written for; must equal ADDON_API while 0.x. */
+    readonly api: number;
+    readonly version: string;
+    /** Slots it can't work without. A missing one keeps it off, with a reason. */
+    readonly needs: readonly Capability[];
+    /** What it sends where: for people, docs and `pipeup check`. */
+    readonly network: NetworkUse;
+    /** Once per mount. May return a teardown for what the add-on itself opened. */
+    setup(host: AddonHost): void | Teardown | Promise<void | Teardown>;
+}
+export type { Listener };
+/** What add-ons see of the document: read only. Ops from elsewhere go in through `host.merge`. */
+export interface AddonDocument {
+    readonly id: string;
+    /** This reviewer's public key: share sends only ops with author === me. */
+    readonly me: string;
+    /** This reviewer's name; "" until they add one (they show as their animal). */
+    readonly name: string;
+    threads(): readonly Thread[];
+    ops(): readonly SignedOp[];
+    onChange(fn: Listener): Off;
+}
+export interface MenuItem {
+    id: string;
+    /** 24-unit SVG path data, drawn by Pipeup; never markup. */
+    icon: readonly string[];
+    /** Short: the menu is 290 px wide and truncates. */
+    label(): string;
+    /** Tooltip and aria-description. */
+    hint(): string;
+    /** Present: a switch row that keeps the menu open. */
+    checked?(): boolean;
+    /** Short end text, such as "3". */
+    count?(): string;
+    select(): void | Promise<void>;
+}
+export interface ItemHandle {
+    update(): void;
+    remove(): void;
+}
+export interface PanelOptions {
+    label: string;
+    onClose?(): void;
+}
+export interface PanelHandle {
+    close(): void;
+}
+export interface Status {
+    /** Plain words: "Live with 2 others". */
+    text: string;
+    people?: readonly {
+        key: string;
+        name: string;
+        view?: ViewState;
+    }[];
+}
+export interface UiSnapshot {
+    /** Comments are showing. */
+    shown: boolean;
+    commentMode: boolean;
+    /** All comments is open. */
+    allOpen: boolean;
+    dark: boolean;
+    view: ViewState | undefined;
+    /** null: not writing; "": the new-comment box; else that thread's reply line. */
+    writing: string | null;
+}
+export type { ComposerHandle, ComposerTool, Dictation } from "./composer";
+export interface AddonHost {
+    readonly api: number;
+    /** The core's version, for diagnostics only. */
+    readonly version: string;
+    readonly document: AddonDocument;
+    /** The area people comment on. */
+    readonly root: Element;
+    /** This browser can't keep comments (they are held in memory). */
+    readonly ephemeral: boolean;
+    /** Aborted at teardown: pass it to fetch, timers and sockets. */
+    readonly signal: AbortSignal;
+    has(c: Capability): boolean;
+    /** Says the add-on can't work here (no speech engine, nothing configured): it stays off, with this reason. */
+    off(reason: string): void;
+    /** Verifies and merges ops from elsewhere, as a feedback file's are; the source is this add-on's id. */
+    merge(ops: readonly unknown[]): Promise<number>;
+    addMenuItem(item: MenuItem): ItemHandle;
+    notify(text: string): void;
+    announce(text: string): void;
+    setComposerNote(text: string | null): void;
+    addComposerTool(tool: ComposerTool): Off;
+    openPanel(content: Node, options: PanelOptions): PanelHandle;
+    addStyles(css: string): Off;
+    setStatus(status: Status | null): void;
+    overlay(): HTMLElement;
+    onFrame(fn: () => void): Off;
+    /** What a comment on `at` would save. */
+    where(at?: Node): ViewState | undefined;
+    /** The rule threads follow: this view is where the reviewer is. */
+    isHere(view?: ViewState): boolean;
+    /** Goes to `view`; true once there. */
+    go(view: ViewState): Promise<boolean>;
+    /** Called at once, then on every change. */
+    onUi(fn: (ui: UiSnapshot) => void): Off;
+    avatar(key: string, name: string): HTMLElement;
+    sign(name: string, data: string): Promise<string>;
+}
+/**
+ * Everything add-ons put on the page, held by the app (not by the views) so it survives layout rebuilds. Each
+ * thing belongs to one add-on and is removed with it.
+ */
+export declare class Surface {
+    readonly ctx: Ctx;
+    private readonly shadow;
+    private readonly after;
+    /** Bumped when the set of menu rows changes. */
+    rev: number;
+    readonly menuRows: MenuItem[];
+    readonly notes: Map<string, string>;
+    readonly statuses: Map<string, Status>;
+    private readonly toolList;
+    private readonly frames;
+    private readonly uis;
+    private readonly subs;
+    private readonly overlays;
+    private readonly pending;
+    /** How to take away each thing an add-on added, so everything one add-on added goes with it. */
+    private readonly undo;
+    private remote;
+    private last;
+    private timer;
+    private uiKey;
+    constructor(ctx: Ctx, shadow: ShadowRoot, after: Node);
+    subscribe(fn: (structure: boolean) => void): Off;
+    private changed;
+    /** Remembers how to remove something an add-on added; returns the add-on's own `Off` for it. */
+    private own;
+    /** The add-ons' statuses, one line. */
+    statusText(): string;
+    rowFor(id: string, item: MenuItem): ItemHandle;
+    /** Sets (or, with null, removes) one add-on's note or status. */
+    setIn<T>(map: Map<string, T>, id: string, value: T | null): void;
+    addTool(id: string, tool: ComposerTool): Off;
+    /** Comments are closed: only the control shows, so a notice waits for the reviewer to open Pipeup. */
+    private closed;
+    notice(id: string, text: string): void;
+    /** Shows the latest notice kept while comments were closed. Called when the menu or comments open. */
+    flush(): void;
+    /** A reviewer is writing: a Pipeup line has words or focus. */
+    private isWriting;
+    /**
+     * An add-on's own words (state changes such as "Listening") are heard at once, while comments are showing:
+     * they answer something the reviewer just did, so they don't wait for them to stop writing.
+     */
+    addSay(text: string): void;
+    /** Other people's new comments are announced as one coalesced sentence. */
+    heard(added: readonly SignedOp[], source: string): void;
+    private pump;
+    ovFor(id: string): HTMLElement;
+    addSheet(id: string, css: string): Off;
+    /** Adds a callback to one of the sets; the add-on's `Off` takes it away. */
+    addTo<T>(id: string, set: Set<T>, fn: T): Off;
+    onTick(id: string, fn: () => void): Off;
+    onSnap(id: string, fn: (ui: UiSnapshot) => void): Off;
+    uiState(): UiSnapshot;
+    /** Runs once per animation frame, after the views; a callback that throws is removed. */
+    frame(): void;
+    private call;
+    /** A side panel: the rest of Pipeup's UI is inert while it is open; Escape closes it before anything else. */
+    panel(id: string, content: Node, o: PanelOptions): PanelHandle;
+    /** Removes everything one add-on added. */
+    clear(id: string): void;
+    destroy(): void;
+}
+interface Live {
+    surface: Surface;
+    doc: PipeupDocument;
+    root: Element;
+    ephemeral: boolean;
+    version: string;
+    active: boolean;
+}
+/**
+ * A Pipeup already on the page when this copy loaded (the classic build assigns its global only when it ends, so
+ * this is read at load): the first copy owns the registry, the queue and the mount; this one hands over to it.
+ */
+export declare const firstCore: {
+    VERSION: string;
+    use(a: PipeupAddon): void;
+    addons(): readonly AddonInfo[];
+    mount(o?: unknown): Promise<unknown>;
+} | null;
+export declare function addons(): readonly AddonInfo[];
+/** Registers an add-on: it sets up now if Pipeup is mounted, else when it mounts. */
+export declare function use(addon: PipeupAddon): void;
+/**
+ * Takes the add-ons scripts queued before Pipeup loaded, and makes later pushes register at once. Idempotent;
+ * returns false when another core owns the queue.
+ */
+export declare function drainQueue(): boolean;
+/** Sets up every waiting add-on for this mount, in registration order. Returns the function that tears them down. */
+export declare function attachAddons(o: Omit<Live, "active">): () => void;

package/dist/types/ui/comment-mode.d.ts

@@ -1,5 +1,4 @@
 import type { Ctx, View } from "./context";
-import { type Look } from "./pick";
 /** Page controls Enter or Space would activate. */
 export declare const ACTIVATES = "a,button,summary,[role=button],[role=link],[role=switch],[role=tab],[role=checkbox],input[type=checkbox],input[type=radio],input[type=submit],input[type=button],input[type=reset]";
 /** The keyboard's hint: shown as a toast, and read with the block cursor's first landing. */
@@ -25,4 +24,4 @@ export interface CommentMode extends View {
  * Known limits: the page's CSS `:hover` still applies; page listeners on window in the capture phase that were
  * added before comment mode started still hear events; Escape still reaches the page's own handlers.
  */
-export declare function createCommentMode(ctx: Ctx, look?: Look): CommentMode;
+export declare function createCommentMode(ctx: Ctx): CommentMode;

package/dist/types/ui/composer.d.ts

@@ -1,5 +1,8 @@
 export interface ComposerOptions {
     label: string;
+    /** A new comment, or a reply in `thread()`. */
+    kind?: "comment" | "reply";
+    thread?: () => string;
     /** Something to show before the line instead, such as the writer's avatar. */
     before?: Node;
     onSend(text: string): Promise<void> | void;
@@ -9,7 +12,48 @@ export interface Composer {
     element: HTMLElement;
     input: HTMLTextAreaElement;
     focus(): void;
-    clear(): void;
 }
+/** One live insertion at the caret: words in progress, then final words. */
+export interface Dictation {
+    /** Replace the words in progress. */
+    update(text: string): void;
+    /** Make them final; the next update starts after them. */
+    commit(text: string): void;
+    /** Remove the words in progress. */
+    cancel(): void;
+}
+export interface ComposerHandle {
+    readonly kind: "comment" | "reply";
+    readonly thread: string | null;
+    text(): string;
+    focus(): void;
+    /** The box is still on screen. */
+    connected(): boolean;
+    /** aria-pressed and the button's look. */
+    setPressed(on: boolean): void;
+    dictate(): Dictation;
+    /** Send, cancel, clear. Poll `connected()` for a box that is removed. */
+    onEnd(fn: () => void): () => void;
+}
+export interface ComposerTool {
+    id: string;
+    /** 24-unit SVG path data. */
+    icon: readonly string[];
+    /** Tooltip and aria-label. */
+    label: string;
+    /** false: no button at all. */
+    available?(): boolean;
+    press(handle: ComposerHandle): void;
+}
+/** What add-ons put in writing lines; set by the app while add-ons are mounted. */
+export interface ComposerSource {
+    tools(): ComposerTool[];
+    note(): string | null;
+}
+export declare const setComposerSource: (s: ComposerSource | null) => void;
+/** The one quiet line add-ons may show above the new-comment box. */
+export declare const composerNote: () => string | null;
+/** Sent to a writing line or a new-comment box when what add-ons put in it changes. */
+export declare const SOURCE_CHANGED = "pu-source";
 /** A writing line: no placeholder, Enter sends, Shift+Enter breaks, Esc cancels, a paper plane appears with text. */
 export declare function composer(o: ComposerOptions): Composer;

package/dist/types/ui/context.d.ts

@@ -2,6 +2,7 @@ import type { Resolved } from "../anchor/resolve";
 import type { PipeupDocument } from "../document";
 import type { CopyAs, ExportItem } from "../export/format";
 import type { Anchor, Thread } from "../model/types";
+import type { Surface } from "./addons";
 import type { DraftBox } from "./draft-view";
 import type { Here } from "./here";
 import type { ThreadActions } from "./thread-view";
@@ -60,6 +61,8 @@ export interface Ctx {
     readonly menu: MenuActions;
     /** Where the reviewer is: the slide, or the page's own view. */
     readonly here: Here;
+    /** What add-ons put on the page. */
+    readonly addons: Surface;
     /** The thread lives on another slide or view, or the page hides its content: nothing of it shows. */
     elsewhere(t: Thread): boolean;
     /** Sorts threads into here and elsewhere again now, re-rendering if that changed anything. */

package/dist/types/ui/dom.d.ts

@@ -5,6 +5,8 @@ export declare function h<K extends keyof HTMLElementTagNameMap>(tag: K, props?:
 export declare function inert(el: HTMLElement, on: boolean): void;
 /** Puts `els` in this order before `ref` (at the end without one) in `parent`, moving only what is out of place and keeping focus; true when any moved. */
 export declare function reorder(parent: Element, els: readonly Element[], ref?: Node | null): boolean;
+/** The page's selection when it holds words (not collapsed, not only spaces). */
+export declare const selected: () => Selection | null;
 export declare function clip(text: string, n: number): string;
 /** Sizes a fixed overlay (outline, pulse, mark) to a box, with padding around it. */
 export declare function fit(el: HTMLElement, r: {

package/dist/types/ui/layout.d.ts

@@ -28,6 +28,8 @@ export declare function stackColumn(items: StackItem[], activeId: string | null,
  */
 export declare const PANEL = 320;
 export declare const POPOVER = 300;
+/** A popover's width: roomier where the window has the space (All comments keeps its own width). */
+export declare const popover: () => number;
 /** On screens this narrow or less, All comments takes the whole width (it gets .full). */
 export declare const NARROW = 480;
 export declare const narrow: () => boolean;

package/dist/types/ui/pick.d.ts

@@ -34,7 +34,7 @@ export declare function pickBlock(from: Element, root: Element, look: Look): Ele
 /** The next block out from `el` with a different box (wrappers the same size are skipped). */
 export declare function parentBlock(el: Element, root: Element, look: Look): Element | null;
 /** The real page: boxes from layout, "drawn" and "grouped" from computed styles. */
-export declare function pageLook(win?: Window): Look;
+export declare function pageLook(): Look;
 /** A block in the keyboard's tree: the block around it, and its level (0 with no block inside it). */
 export interface Block {
     el: Element;

package/dist/types/ui/shortcut.d.ts

@@ -2,24 +2,10 @@
 export declare const SHORTCUT: {
     /** The physical key (`KeyboardEvent.code`): Option changes the typed character on a Mac. */
     readonly code: "KeyC";
-    /** The modifiers that must be down, and only those (Shift, Alt/Option, Command, Ctrl). */
-    readonly mods: {
-        readonly shift: true;
-        readonly alt: true;
-        readonly meta: false;
-        readonly ctrl: false;
-    };
-    readonly mac: {
-        readonly label: "⇧⌥C";
-        readonly aria: "Shift+Alt+C";
-    };
-    readonly other: {
-        readonly label: "Shift+Alt+C";
-        readonly aria: "Shift+Alt+C";
-    };
 };
+/** The key's label: symbols on Apple platforms, words elsewhere. */
 export declare const SHORTCUT_LABEL: string;
-export declare const SHORTCUT_ARIA: string;
+export declare const SHORTCUT_ARIA = "Shift+Alt+C";
 /**
  * Shift+Option+C (Shift+Alt+C): never a key repeat, Command or Ctrl, or AltGr (which types characters).
  * Callers must not claim it inside text fields: on a Mac it types a character there.

package/dist/types/ui/styles.d.ts

@@ -1,2 +1,2 @@
 /** Pipeup's stylesheet, scoped to its shadow root. Light by default; `.dark` follows a dark page. */
-export declare const STYLES = "\n/* Inherited page styles are reset on .layer below; custom properties pass through all:initial. */\n:host{all:initial}\n*{box-sizing:border-box}\nbutton{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}\nsvg{display:block}\n.layer{all:initial;display:block;position:fixed;inset:0;pointer-events:none;font:13px/1.5 var(--pu-font,system-ui,sans-serif);color:var(--k);\n--k:#2C2C2A;--mu:#5F5E5A;--fa:#888780;--ln:#E5E3DA;--ru:#ECEAE2;--so:#FAFAF7;--su:#FFFFFF;--ho:#F1EFE8;\n--as:color-mix(in srgb,var(--pu-accent,#534AB7) 12%,transparent);\n--sh:0 8px 28px rgba(44,44,42,.10);\n--in:.26s;--mv:.34s;--out:.2s;--pl:1.2s;\n--eo:cubic-bezier(.22,.61,.36,1);--eio:cubic-bezier(.4,0,.2,1);--ei:cubic-bezier(.4,0,1,1)}\n.layer.dark{--k:#ECEBE6;--mu:#B4B2A9;--fa:#8D8B84;--ln:#3A3936;--ru:#34332F;--so:#22221F;--su:#1B1B19;--ho:#2C2C29;--sh:0 8px 28px rgba(0,0,0,.45)}\n.layer.hidden .bub,.layer.hidden .col,.layer.hidden .pop,.layer.hidden .tip,.layer.hidden .mark,.layer.hidden .selbar{opacity:0!important;pointer-events:none!important}\n\n.tx{font-size:14px;line-height:1.5;color:var(--k);white-space:pre-wrap;overflow-wrap:anywhere}\n.tx.del,.who,.rest,.ctx{color:var(--fa)}\n.who,.rest{font-size:12px}\n/* Long names are cut short on one line, never wrapped. */\n.who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.rft>.who{display:block}\n.ctx[hidden]{display:none}\n.ctx{font-size:12px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.tx a{color:var(--pu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}\n\n/* Footers: details take no space until hovered, then ease open beneath the words. */\n.ft,.rft{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--in) var(--eo),opacity var(--in) var(--eo)}\n.ft>*,.rft>*{overflow:hidden;min-height:0;display:flex;align-items:center}\n.root:hover>.ft,.root:focus-within>.ft,.it:hover>.rft,.it:focus-within>.rft{grid-template-rows:1fr;opacity:1}\n.ft.has-rest{grid-template-rows:1fr;opacity:1}\n.ft.has-rest>*{grid-area:1/1}\n.ft .hover{opacity:0;transition:opacity var(--in) var(--eo)}\n.ft .rest{transition:opacity var(--in) var(--eo)}\n.root:hover>.ft .hover,.root:focus-within>.ft .hover,.ft:not(.has-rest) .hover{opacity:1}\n.root:hover>.ft .rest,.root:focus-within>.ft .rest{opacity:0}\n.acts{margin-left:6px;display:flex;flex:none}\n.ib{width:24px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--mu);transition:background-color .2s var(--eo),color .2s var(--eo)}\n.ib:hover,.ib:focus-visible{background:var(--ho);color:var(--k);outline:none}\n\n/* Replies: one level in, oldest first; the reply line ends the thread at the same indent. */\n.rps,.rbox{padding-left:14px}\n.rps .it{padding-top:6px}\n.more{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--mv) var(--eio)}\n.more>div{overflow:hidden;min-height:0}\n.th:not(.on) .more{grid-template-rows:0fr}\n\n.row{display:flex;align-items:center;gap:8px;padding:8px 0 2px;cursor:text}\n.input{flex:1;min-width:0;height:27px;display:block;border:0;border-bottom:1px solid var(--ln);outline:none;resize:none;overflow:hidden;\nfont:inherit;font-size:14px;line-height:1.5;padding:3px 0;color:var(--k);background:transparent;transition:border-color var(--in) var(--eo)}\n.row:hover .input,.input:hover{border-bottom-color:var(--mu)}\n.input:focus{border-bottom-color:var(--pu-accent)}\n.ed{display:flex;gap:10px;align-items:center;min-height:34px;padding:6px 10px}\n.ed .input{font-size:13px;height:22px}\n\n/* Avatars: a squircle with the writer's animal (or initial) on a soft colour. Each comment keeps a fixed area\nat its top right for one, so its words are the same width with or without it. */\n.root,.it{position:relative;padding-right:30px}\n.av{display:grid;place-items:center;width:22px;height:22px;border-radius:32%;\nfont-size:12px;font-weight:600;line-height:1;opacity:0;transform:scale(.85);transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.av.in{opacity:1;transform:none}\n.av svg{width:80%;height:80%}\n.root>.av,.it>.av{position:absolute;top:0;right:0}\n.it>.av{top:6px}\n/* Ten colours (.c0 Red to .c9 Grey, as COLOURS): a soft tint and a dark drawing, swapped round on dark pages. */\n.av{--av-l:92%;--av-d:30%;--s:60%;background:hsl(var(--h) var(--s) var(--av-l));color:hsl(var(--h) var(--s) var(--av-d))}\n.dark .av{--av-l:20%;--av-d:78%}\n.c0{--h:0}.c1{--h:25}.c2{--h:50}.c3{--h:130}.c4{--h:175}.c5{--h:215}.c6{--h:270}.c7{--h:330}.c8{--h:28;--s:35%}.c9{--h:220;--s:8%}\n.me{flex:none;display:grid}\n.me>.av{grid-area:1/1;width:26px;height:26px;font-size:13px}\n/* Who you are, under the comment line; a name field eases open in its place. */\n.you{display:grid;padding:0 34px;min-height:24px;font-size:12px;color:var(--fa)}\n.you>*{grid-area:1/1;display:flex;align-items:center;min-width:0;transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.say{white-space:pre;overflow:hidden}\n.nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.say button{flex:none}\n.say button{color:var(--mu);text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:2px;transition:color .2s var(--eo)}\n.say button:hover,.say button:focus-visible{color:var(--pu-accent);outline:none}\n.nf{opacity:0;transform:translateY(-4px);pointer-events:none}\n.nf .input{font-size:13px;height:24px}\n.you.naming .nf{opacity:1;transform:none;pointer-events:auto}\n.you.naming .say{opacity:0;pointer-events:none}\n.send{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--pu-accent);flex:none;opacity:0;pointer-events:none;\ntransition:opacity var(--in) var(--eo),background-color .2s var(--eo)}\n.send.show{opacity:1;pointer-events:auto}\n.send:hover{background:var(--as)}\n\n/* Bubbles, tips, popovers, marks, pulses. */\n.bub{position:fixed;left:0;top:0;width:20px;height:20px;margin:-20px 0 0 -2px;border-radius:50% 50% 50% 0;background:var(--pu-accent);\nborder:2px solid var(--su);box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:auto;opacity:0;transform:translateY(-6px) scale(.9);transform-origin:2px 20px;\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.bub.in{opacity:1;transform:none;transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.bub.in:hover,.bub.on{transform:scale(1.18)}\n.bub.done{background:var(--fa)}\n.bub.ghost{pointer-events:none}\n.tip,.pop,.menu,.all,.toast,.selbar{background:var(--su);border:1px solid var(--ln);box-shadow:var(--sh)}\n.tip{position:fixed;max-width:260px;border-radius:10px;padding:7px 10px;opacity:0;transform:translateY(3px);\ntransition:opacity .22s var(--eo),transform .26s var(--eo)}\n.tip.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer;\ntransition:opacity .22s var(--eo),transform .26s var(--eo),left var(--mv) var(--eio),top var(--mv) var(--eio)}\n.pop{position:fixed;width:var(--pu-pop);border-radius:12px;padding:10px 12px 8px;pointer-events:none;opacity:0;transform:translateY(6px) scale(.98);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.pop.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo)}\n.pop.show.glide{transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo),left var(--mv) var(--eio),top var(--mv) var(--eio)}\n.mark{position:fixed;border:2px solid color-mix(in srgb,var(--pu-accent) 50%,transparent);background:var(--as);border-radius:8px;opacity:0;\ntransition:opacity .3s var(--eo)}\n.mark.show{opacity:1}\n.pulse{position:fixed;border:2px solid var(--pu-accent);border-radius:8px;background:var(--as);animation:pu-pulse var(--pl) var(--eio) forwards}\n@keyframes pu-pulse{0%{opacity:0;transform:scale(.985)}35%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}\n\n/* Document column. */\n.col{position:fixed;left:0;top:0;pointer-events:none;transition:opacity var(--in) var(--eo)}\n.th{position:absolute;left:0;right:0;top:0;padding:4px 4px 4px 12px;pointer-events:auto;cursor:pointer;box-shadow:inset 2px 0 0 transparent;\ntransition:transform var(--mv) var(--eio),box-shadow var(--in) var(--eo),opacity var(--in) var(--eo)}\n.th.hot{box-shadow:inset 2px 0 0 var(--ln)}\n.th.on{box-shadow:inset 2px 0 0 var(--pu-accent);cursor:default}\n.th.dim{opacity:.45}\n.th.resolved:not(.on):not(.hot){opacity:.6}\n.th.lost .ctx{white-space:normal}\n.th.wait{opacity:0!important;pointer-events:none}\n.th.out{opacity:0!important;pointer-events:none;transition:opacity var(--out) var(--ei)}\n/* A closed thread's button has no box of its own: the thread shows its focus. */\n.th:has(.opn:focus-visible){box-shadow:inset 2px 0 0 var(--ln);outline:2px solid var(--pu-accent);outline-offset:2px;border-radius:4px}\n\n/* Selection bar. */\n.selbar{position:fixed;display:flex;border-radius:10px;padding:2px;opacity:0;transform:translateY(4px);pointer-events:none;\ntransition:opacity var(--in) var(--eo),transform .3s var(--eo)}\n.selbar.show{opacity:1;transform:none;pointer-events:auto}\n.selbar button{width:32px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--pu-accent);transition:background-color .2s var(--eo)}\n.selbar button:hover,.selbar button:focus-visible{background:var(--as);outline:none}\n\n/* Comment mode's outline: glides between blocks; solid accent once chosen. */\n.pick{position:fixed;left:0;top:0;border:2px solid color-mix(in srgb,var(--pu-accent) 70%,transparent);background:color-mix(in srgb,var(--pu-accent) 6%,transparent);\nborder-radius:8px;pointer-events:none;opacity:0;transition:opacity var(--out) var(--ei),border-color var(--out) var(--ei),border-width var(--out) var(--ei),box-shadow var(--out) var(--ei)}\n.pick.show{opacity:1;transition-duration:var(--in);transition-timing-function:var(--eo)}\n.pick.show.glide{transition-property:all;transition-duration:var(--mv);transition-timing-function:var(--eio)}\n.pick.on{border-color:var(--pu-accent)}\n/* The block cursor: its focus is drawn on the outline (3px accent with a surface halo, 3:1 on any page); the\nmarkers that hold focus are invisible. */\n.pick.kf{border:3px solid var(--pu-accent);box-shadow:0 0 0 2px var(--su)}\n.km{position:fixed;left:0;top:0;pointer-events:none;outline:none}\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n.namebar{position:fixed;left:0;top:0;display:flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;border-radius:10px;font-size:12px;color:var(--mu);\nwhite-space:nowrap;background:var(--su);border:1px solid var(--ln);box-shadow:var(--sh);pointer-events:none;opacity:0;transform:translateY(4px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.namebar.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform .3s var(--eo)}\n.namebar.show.glide{transition-property:all;transition-duration:var(--mv);transition-timing-function:var(--eio)}\n.namebar .lbl{margin-right:6px;max-width:260px;overflow:hidden;text-overflow:ellipsis}\n.namebar .nb{padding:4px;display:grid;place-items:center;border-radius:7px;transition:background-color .2s var(--eo),color .2s var(--eo)}\n.namebar .nb:hover,.namebar .nb:focus-visible{background:var(--ho);color:var(--k);outline:none}\n.namebar .nb[hidden]{display:none}\n\n/* The comment control: one round button; the open count sits inside a comment bubble. Nothing about it\ngrows or slides: its layers and numbers cross-fade in place. */\n.launch{position:fixed;right:20px;bottom:20px;pointer-events:auto}\n.launch .mode{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--su);border:1px solid var(--ln);\nbox-shadow:var(--sh);transition:background-color .3s var(--eo),color .3s var(--eo)}\n.mode>*,.cnt>*{grid-area:1/1}\n.mode>*{display:grid;place-items:center;transition:opacity var(--in) var(--eo)}\n.cnt,.has>.plus{opacity:0}\n.has>.cnt{opacity:1}\n.n{font-size:12px;font-weight:500;line-height:1;margin:-1.4px 0 0 1.4px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity var(--in) var(--eo)}\n.n.s{font-size:9.5px;letter-spacing:-.04em}\n.n.on{opacity:1}\n.launch .mode:hover,.launch .mode[aria-expanded=true]{background:var(--ho)}\n.launch .mode.on{background:var(--pu-accent);color:#fff}\n/* Open threads on other slides or views: a small dot at the button's top right, easing in and out. */\n.mode>.dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--pu-accent);border:2px solid var(--su);opacity:0}\n.mode.else>.dot{opacity:1}\n/* The tooltip eases in after a moment, above the button, and never moves it. */\n.ttip{position:absolute;right:0;bottom:54px;white-space:nowrap;border-radius:8px;padding:4px 9px;font-size:12px;background:var(--su);border:1px solid var(--ln);\nbox-shadow:var(--sh);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.ttip small{margin-left:8px}\n.ttip small,.mi .kc{font-size:12px;color:var(--fa)}\n.mode:hover+.ttip,.mode:focus-visible+.ttip{opacity:1;transform:none;transition:opacity var(--in) var(--eo) .5s,transform var(--in) var(--eo) .5s}\n.launch .mode[aria-expanded=true]+.ttip{opacity:0;transition:opacity var(--out) var(--ei)}\n@media (hover:none){.ttip,.tt{display:none}}\n.menu{position:fixed;right:20px;bottom:76px;width:290px;border-radius:12px;padding:4px;pointer-events:none;opacity:0;transform:translateY(6px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.menu.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo)}\n/* Menu rows: one line each; the explanation is a tooltip beside the menu that eases in after a moment. */\n.mi{position:relative;display:flex;gap:10px;align-items:center;width:100%;min-height:34px;text-align:left;padding:6px 10px;border-radius:8px;transition:background-color .2s var(--eo)}\n.mi:hover,.mi:focus-visible{background:var(--so);outline:none}\n.mi svg{color:var(--mu);flex:none}\n.mi small{display:block;color:var(--fa);font-size:12px}\n.lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.ma{flex:none;display:grid;margin:-2px 0}\n.ma .av{width:20px;height:20px;font-size:11px}\n.mi .av svg{color:inherit}\n.sep{height:1px;margin:4px 10px;background:var(--ru)}\n.tt{position:absolute;right:calc(100% + 14px);top:50%;translate:0 -50%;width:max-content;max-width:220px;padding:4px 9px;border-radius:8px;font-size:12px;line-height:1.4;\ncolor:var(--mu);background:var(--su);border:1px solid var(--ln);box-shadow:var(--sh);pointer-events:none;opacity:0;transform:translateX(3px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.mi:hover>.tt,.mi:focus-visible>.tt{opacity:1;transform:none;transition:opacity var(--in) var(--eo) .5s,transform var(--in) var(--eo) .5s}\n@media (max-width:600px){.tt{right:8px;top:auto;bottom:100%;translate:none;transform:translateY(3px)}}\n/* Switches: a track and a knob that slides (cross-fades with reduced motion). */\n.sw{position:relative;flex:none;width:26px;height:16px;border-radius:8px;background:var(--ln);transition:background-color var(--mv) var(--eio)}\n.sw::before,.sw::after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);\ntransition:transform var(--mv) var(--eio),opacity var(--mv) var(--eio)}\n.sw::before{opacity:0;transform:translateX(10px)}\n[aria-checked=true]>.sw{background:var(--pu-accent)}\n[aria-checked=true]>.sw::after{transform:translateX(10px)}\n/* All comments: a full-height panel on the right that slides in (fades, with reduced motion). */\n.all{position:fixed;top:0;right:0;bottom:0;width:var(--pu-panel);display:flex;flex-direction:column;border-width:0 0 0 1px;opacity:0;transform:translateX(100%);\ntransition:transform var(--out) var(--ei),opacity var(--out) var(--ei)}\n.all.show{opacity:1;transform:none;pointer-events:auto;transition:transform var(--mv) var(--eo),opacity var(--in) var(--eo)}\n.all.full{width:100%}\n.hd{display:flex;align-items:center;gap:8px;padding:12px 10px 8px 16px;font-weight:600}\n.pn{font-weight:400;color:var(--fa)}\n.hs{margin-left:auto;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border-radius:6px;font-size:12px;font-weight:400;color:var(--mu);\ntransition:background-color .2s var(--eo)}\n.hs:hover,.hs:focus-visible{background:var(--ho);outline:none}\n.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px}\n.all .mi{align-items:flex-start}\n.all .mi>.av{flex:none}\n.all .mi>span:last-child{flex:1;min-width:0}\n.all .mi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.all .mi .av svg{margin:0}\n.all .mi.done{opacity:.6}\n.layer.listing .col{opacity:0;transition:opacity var(--out) var(--ei)}\n.sec{padding:8px 10px 2px;font-size:12px;color:var(--fa)}\n.sec b{margin-left:6px;font-weight:500;color:var(--pu-accent)}\n.toast{position:fixed;left:50%;bottom:28px;border-radius:10px;padding:8px 14px;font-size:13px;opacity:0;transform:translate(-50%,6px);\ntransition:opacity .3s var(--eo),transform .36s var(--eo)}\n.toast.show{opacity:1;transform:translate(-50%,0)}\n\n@media (forced-colors: active){\n.pick.kf{border:3px solid Highlight}\n.layer :is(.ib,.mi,.nb,.hs,.selbar button,.say button):focus-visible{outline:2px solid Highlight}\n}\n\n@media (prefers-reduced-motion: reduce){\n.bub,.bub.in,.bub.in:hover,.bub.on,.tip,.pop,.selbar,.menu,.all,.ttip,.tt,.toast{transform:none!important}\n.sw::after{transform:none!important;transition-property:opacity}\n[aria-checked=true]>.sw::after{opacity:0}\n[aria-checked=true]>.sw::before{opacity:1}\n.th{transition-property:opacity,box-shadow}\n.tip.show{transition-property:opacity}\n.pick,.pick.show{transition:opacity .16s ease-in-out}\n.all,.all.show{transition-property:opacity}\n.namebar,.namebar.show{transform:none!important;transition:opacity .16s ease-in-out}\n.av,.nf{transform:none!important}\n@keyframes pu-pulse{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}\n}\n";
+export declare const STYLES = "\n/* Inherited page styles are reset on .layer below; custom properties pass through all:initial. */\n:host{all:initial}\n*{box-sizing:border-box}\nbutton{appearance:none;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}\nsvg{display:block}\n.layer{all:initial;display:block;position:fixed;inset:0;pointer-events:none;font:13px/1.5 var(--pu-font,system-ui,sans-serif);color:var(--k);\n--k:#2C2C2A;--mu:#5F5E5A;--fa:#888780;--ln:#E5E3DA;--ru:#ECEAE2;--so:#FAFAF7;--su:#FFFFFF;--ho:#F1EFE8;\n--as:color-mix(in srgb,var(--pu-accent,#534AB7) 12%,transparent);\n--sh:0 8px 28px rgba(44,44,42,.10);\n--in:.26s;--mv:.34s;--out:.2s;--pl:1.2s;\n--eo:cubic-bezier(.22,.61,.36,1);--eio:cubic-bezier(.4,0,.2,1);--ei:cubic-bezier(.4,0,1,1);\n--pu-text:var(--k);--pu-muted:var(--mu);--pu-faint:var(--fa);--pu-line:var(--ln);--pu-surface:var(--su);--pu-soft:var(--so);--pu-hover:var(--ho);--pu-shadow:var(--sh);--pu-ease:var(--eo)}\n.layer.dark{--k:#ECEBE6;--mu:#B4B2A9;--fa:#8D8B84;--ln:#3A3936;--ru:#34332F;--so:#22221F;--su:#1B1B19;--ho:#2C2C29;--sh:0 8px 28px rgba(0,0,0,.45)}\n.layer.hidden .bub,.layer.hidden .col,.layer.hidden .pop,.layer.hidden .tip,.layer.hidden .mark,.layer.hidden .selbar{opacity:0!important;pointer-events:none!important}\n\n.tx{font-size:14px;line-height:1.5;color:var(--k);white-space:pre-wrap;overflow-wrap:anywhere}\n.tx.del,.who,.rest,.ctx{color:var(--fa)}\n.who,.rest{font-size:12px}\n/* Long names are cut short on one line, never wrapped. */\n.who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.rft>.who{display:block}\n.ctx[hidden]{display:none}\n.ctx{font-size:12px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.tx a{color:var(--pu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}\n\n/* Footers: details take no space until hovered, then ease open beneath the words. */\n.ft,.rft{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--in) var(--eo),opacity var(--in) var(--eo)}\n.ft>*,.rft>*{overflow:hidden;min-height:0;display:flex;align-items:center}\n.root:hover>.ft,.root:focus-within>.ft,.it:hover>.rft,.it:focus-within>.rft{grid-template-rows:1fr;opacity:1}\n.ft.has-rest{grid-template-rows:1fr;opacity:1}\n.ft.has-rest>*{grid-area:1/1}\n.ft .hover{opacity:0;transition:opacity var(--in) var(--eo)}\n.ft .rest{transition:opacity var(--in) var(--eo)}\n.root:hover>.ft .hover,.root:focus-within>.ft .hover,.ft:not(.has-rest) .hover{opacity:1}\n.root:hover>.ft .rest,.root:focus-within>.ft .rest{opacity:0}\n.acts{margin-left:6px;display:flex;flex:none}\n.ib{width:24px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--mu);transition:background-color .2s var(--eo),color .2s var(--eo)}\n.ib:hover,.ib:focus-visible{background:var(--ho);color:var(--k);outline:none}\n\n/* Replies: one level in, oldest first; the reply line ends the thread at the same indent. */\n.rps,.rbox{padding-left:14px}\n.rps .it{padding-top:6px}\n.more{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--mv) var(--eio)}\n.more>div{overflow:hidden;min-height:0}\n.th:not(.on) .more{grid-template-rows:0fr}\n\n.row{display:flex;align-items:center;gap:8px;padding:8px 0 2px;cursor:text}\n.input{flex:1;min-width:0;height:27px;display:block;border:0;border-bottom:1px solid var(--ln);outline:none;resize:none;overflow:hidden;\nfont:inherit;font-size:14px;line-height:1.5;padding:3px 0;color:var(--k);background:transparent;transition:border-color var(--in) var(--eo)}\n.row:hover .input,.input:hover{border-bottom-color:var(--mu)}\n.input:focus{border-bottom-color:var(--pu-accent)}\n.ed{display:flex;gap:10px;align-items:center;min-height:34px;padding:6px 10px}\n.ed .input{font-size:13px;height:22px}\n\n/* Avatars: a squircle with the writer's animal (or initial) on a soft colour. Each comment keeps a fixed area\nat its top right for one, so its words are the same width with or without it. */\n.root,.it{position:relative;padding-right:30px}\n.av{display:grid;place-items:center;width:22px;height:22px;border-radius:32%;\nfont-size:12px;font-weight:600;line-height:1;opacity:0;transform:scale(.85);transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.av.in{opacity:1;transform:none}\n.av svg{width:80%;height:80%}\n.root>.av,.it>.av{position:absolute;top:0;right:0}\n.it>.av{top:6px}\n/* Ten colours (.c0 Red to .c9 Grey, as COLOURS): a soft tint and a dark drawing, swapped round on dark pages. */\n.av{--av-l:92%;--av-d:30%;--s:60%;background:hsl(var(--h) var(--s) var(--av-l));color:hsl(var(--h) var(--s) var(--av-d))}\n.dark .av{--av-l:20%;--av-d:78%}\n.c0{--h:0}.c1{--h:25}.c2{--h:50}.c3{--h:130}.c4{--h:175}.c5{--h:215}.c6{--h:270}.c7{--h:330}.c8{--h:28;--s:35%}.c9{--h:220;--s:8%}\n.me{flex:none;display:grid}\n.me>.av{grid-area:1/1;width:26px;height:26px;font-size:13px}\n/* Who you are, under the comment line; a name field eases open in its place. */\n.you{display:grid;padding:0 34px;min-height:24px;font-size:12px;color:var(--fa)}\n.you>*{grid-area:1/1;display:flex;align-items:center;min-width:0;transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.say{white-space:pre;overflow:hidden}\n.nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.say button{flex:none}\n.say button{color:var(--mu);text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:2px;transition:color .2s var(--eo)}\n.say button:hover,.say button:focus-visible{color:var(--pu-accent);outline:none}\n.nf{opacity:0;transform:translateY(-4px);pointer-events:none}\n.nf .input{font-size:13px;height:24px}\n.you.naming .nf{opacity:1;transform:none;pointer-events:auto}\n.you.naming .say{opacity:0;pointer-events:none}\n.send{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--pu-accent);flex:none;opacity:0;pointer-events:none;\ntransition:opacity var(--in) var(--eo),background-color .2s var(--eo)}\n.send.show{opacity:1;pointer-events:auto}\n.send:hover{background:var(--as)}\n\n/* Bubbles, tips, popovers, marks, pulses. */\n.bub{position:fixed;left:0;top:0;width:20px;height:20px;margin:-20px 0 0 -2px;border-radius:50% 50% 50% 0;background:var(--pu-accent);\nborder:2px solid var(--su);box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:auto;opacity:0;transform:translateY(-6px) scale(.9);transform-origin:2px 20px;\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.bub.in{opacity:1;transform:none;transition:opacity var(--in) var(--eo),transform var(--in) var(--eo)}\n.bub.in:hover,.bub.on{transform:scale(1.18)}\n.bub.done{background:var(--fa)}\n.bub.ghost{pointer-events:none}\n.tip,.pop,.menu,.all,.xp,.toast,.selbar,.namebar,.ttip,.tt,.mode{background:var(--su);border:1px solid var(--ln);box-shadow:var(--sh)}\n.tip{position:fixed;max-width:260px;border-radius:10px;padding:7px 10px;opacity:0;transform:translateY(3px);\ntransition:opacity .22s var(--eo),transform .26s var(--eo)}\n.tip.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer;\ntransition:opacity .22s var(--eo),transform .26s var(--eo),left var(--mv) var(--eio),top var(--mv) var(--eio)}\n.pop{position:fixed;width:var(--pu-pop);border-radius:12px;padding:10px 12px 8px;pointer-events:none;opacity:0;transform:translateY(6px) scale(.98);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.pop.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo)}\n.pop.show.glide{transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo),left var(--mv) var(--eio),top var(--mv) var(--eio)}\n.mark{position:fixed;border:2px solid color-mix(in srgb,var(--pu-accent) 50%,transparent);background:var(--as);border-radius:8px;opacity:0;\ntransition:opacity .3s var(--eo)}\n.mark.show{opacity:1}\n.pulse{position:fixed;border:2px solid var(--pu-accent);border-radius:8px;background:var(--as);animation:pu-pulse var(--pl) var(--eio) forwards}\n@keyframes pu-pulse{0%{opacity:0;transform:scale(.985)}35%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}\n\n/* Document column. */\n.col{position:fixed;left:0;top:0;pointer-events:none;transition:opacity var(--in) var(--eo)}\n.th{position:absolute;left:0;right:0;top:0;padding:4px 4px 4px 12px;pointer-events:auto;cursor:pointer;box-shadow:inset 2px 0 0 transparent;\ntransition:transform var(--mv) var(--eio),box-shadow var(--in) var(--eo),opacity var(--in) var(--eo)}\n.th.hot{box-shadow:inset 2px 0 0 var(--ln)}\n.th.on{box-shadow:inset 2px 0 0 var(--pu-accent);cursor:default}\n.th.dim{opacity:.45}\n.th.resolved:not(.on):not(.hot){opacity:.6}\n.th.lost .ctx{white-space:normal}\n.th.wait{opacity:0!important;pointer-events:none}\n.th.out{opacity:0!important;pointer-events:none;transition:opacity var(--out) var(--ei)}\n/* A closed thread's button has no box of its own: the thread shows its focus. */\n.th:has(.opn:focus-visible){box-shadow:inset 2px 0 0 var(--ln);outline:2px solid var(--pu-accent);outline-offset:2px;border-radius:4px}\n\n/* Selection bar. */\n.selbar{position:fixed;display:flex;border-radius:10px;padding:2px;opacity:0;transform:translateY(4px);pointer-events:none;\ntransition:opacity var(--in) var(--eo),transform .3s var(--eo)}\n.selbar.show{opacity:1;transform:none;pointer-events:auto}\n.selbar button{width:32px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--pu-accent);transition:background-color .2s var(--eo)}\n.selbar button:hover,.selbar button:focus-visible{background:var(--as);outline:none}\n\n/* Comment mode's outline: glides between blocks; solid accent once chosen. */\n.pick{position:fixed;left:0;top:0;border:2px solid color-mix(in srgb,var(--pu-accent) 70%,transparent);background:color-mix(in srgb,var(--pu-accent) 6%,transparent);\nborder-radius:8px;pointer-events:none;opacity:0;transition:opacity var(--out) var(--ei),border-color var(--out) var(--ei),border-width var(--out) var(--ei),box-shadow var(--out) var(--ei)}\n.pick.show{opacity:1;transition-duration:var(--in);transition-timing-function:var(--eo)}\n.pick.show.glide{transition-property:all;transition-duration:var(--mv);transition-timing-function:var(--eio)}\n.pick.on{border-color:var(--pu-accent)}\n/* The block cursor: its focus is drawn on the outline (3px accent with a surface halo, 3:1 on any page); the\nmarkers that hold focus are invisible. */\n.pick.kf{border:3px solid var(--pu-accent);box-shadow:0 0 0 2px var(--su)}\n.km{position:fixed;left:0;top:0;pointer-events:none;outline:none}\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n.namebar{position:fixed;left:0;top:0;display:flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;border-radius:10px;font-size:12px;color:var(--mu);\nwhite-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.namebar.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform .3s var(--eo)}\n.namebar.show.glide{transition-property:all;transition-duration:var(--mv);transition-timing-function:var(--eio)}\n.namebar .lbl{margin-right:6px;max-width:260px;overflow:hidden;text-overflow:ellipsis}\n.namebar .nb{padding:4px;display:grid;place-items:center;border-radius:7px;transition:background-color .2s var(--eo),color .2s var(--eo)}\n.namebar .nb:hover,.namebar .nb:focus-visible{background:var(--ho);color:var(--k);outline:none}\n.namebar .nb[hidden]{display:none}\n\n/* The comment control: one round button; the open count sits inside a comment bubble. Nothing about it\ngrows or slides: its layers and numbers cross-fade in place. */\n.launch{position:fixed;right:20px;bottom:20px;pointer-events:auto}\n.launch .mode{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;transition:background-color .3s var(--eo),color .3s var(--eo)}\n.mode>*,.cnt>*{grid-area:1/1}\n.mode>*{display:grid;place-items:center;transition:opacity var(--in) var(--eo)}\n.cnt,.has>.plus{opacity:0}\n.has>.cnt{opacity:1}\n.n{font-size:12px;font-weight:500;line-height:1;margin:-1.4px 0 0 1.4px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity var(--in) var(--eo)}\n.n.s{font-size:9.5px;letter-spacing:-.04em}\n.n.on{opacity:1}\n.launch .mode:hover,.launch .mode[aria-expanded=true]{background:var(--ho)}\n.launch .mode.on{background:var(--pu-accent);color:var(--pu-on,#fff)}\n/* Open threads on other slides or views: a small dot at the button's top right, easing in and out. */\n.mode>.dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--pu-accent);border:2px solid var(--su);opacity:0}\n.mode.else>.dot{opacity:1}\n/* The tooltip eases in after a moment, above the button, and never moves it. */\n.ttip{position:absolute;right:0;bottom:54px;white-space:nowrap;border-radius:8px;padding:4px 9px;font-size:12px;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.ttip small{margin-left:8px}\n.ttip small,.mi .kc{font-size:12px;color:var(--fa)}\n.mode:hover+.ttip,.mode:focus-visible+.ttip{opacity:1;transform:none;transition:opacity var(--in) var(--eo) .5s,transform var(--in) var(--eo) .5s}\n.launch .mode[aria-expanded=true]+.ttip{opacity:0;transition:opacity var(--out) var(--ei)}\n@media (hover:none){.ttip,.tt{display:none}}\n.menu{position:fixed;right:20px;bottom:76px;width:290px;border-radius:12px;padding:4px;pointer-events:none;opacity:0;transform:translateY(6px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.menu.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--in) var(--eo),transform var(--mv) var(--eo)}\n/* Menu rows: one line each; the explanation is a tooltip beside the menu that eases in after a moment. */\n.mi{position:relative;display:flex;gap:10px;align-items:center;width:100%;min-height:34px;text-align:left;padding:6px 10px;border-radius:8px;transition:background-color .2s var(--eo)}\n.mi:hover,.mi:focus-visible{background:var(--so);outline:none}\n.mi svg{color:var(--mu);flex:none}\n.mi small{display:block;color:var(--fa);font-size:12px}\n.lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.ma{flex:none;display:grid;margin:-2px 0}\n.ma .av{width:20px;height:20px;font-size:11px}\n.mi .av svg{color:inherit}\n.sep{height:1px;margin:4px 10px;background:var(--ru)}\n.tt{position:absolute;right:calc(100% + 14px);top:50%;translate:0 -50%;width:max-content;max-width:220px;padding:4px 9px;border-radius:8px;font-size:12px;line-height:1.4;\ncolor:var(--mu);pointer-events:none;opacity:0;transform:translateX(3px);\ntransition:opacity var(--out) var(--ei),transform var(--out) var(--ei)}\n.mi:hover>.tt,.mi:focus-visible>.tt{opacity:1;transform:none;transition:opacity var(--in) var(--eo) .5s,transform var(--in) var(--eo) .5s}\n@media (max-width:600px){.tt{right:8px;top:auto;bottom:100%;translate:none;transform:translateY(3px)}}\n/* Switches: a track and a knob that slides (cross-fades with reduced motion). */\n.sw{position:relative;flex:none;width:26px;height:16px;border-radius:8px;background:var(--ln);transition:background-color var(--mv) var(--eio)}\n.sw::before,.sw::after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);\ntransition:transform var(--mv) var(--eio),opacity var(--mv) var(--eio)}\n.sw::before{opacity:0;transform:translateX(10px)}\n[aria-checked=true]>.sw{background:var(--pu-accent)}\n[aria-checked=true]>.sw::after{transform:translateX(10px)}\n.tools{display:flex;flex:none;gap:2px}\n.tools[hidden]{display:none}\n.tool[aria-pressed=true]{background:var(--as);color:var(--pu-accent)}\n.note{display:block;padding:0 0 4px;font-size:12px;color:var(--fa)}\n.note[hidden]{display:none}\n.ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}\n/* An add-on's panel (.xp) is the same full-height panel as All comments (.all), with its own body. */\n.xb{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 16px;font-size:13px}\n.xb p{margin:0 0 10px}\n/* All comments: a full-height panel on the right that slides in (fades, with reduced motion). */\n.all,.xp{position:fixed;top:0;right:0;bottom:0;width:var(--pu-panel);display:flex;flex-direction:column;border-width:0 0 0 1px;opacity:0;transform:translateX(100%);\ntransition:transform var(--out) var(--ei),opacity var(--out) var(--ei)}\n.all.show,.xp.show{opacity:1;transform:none;pointer-events:auto;transition:transform var(--mv) var(--eo),opacity var(--in) var(--eo)}\n.all.full{width:100%}\n.hd{display:flex;align-items:center;gap:8px;padding:12px 10px 8px 16px;font-weight:600}\n.pn{font-weight:400;color:var(--fa)}\n.hs{margin-left:auto;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border-radius:6px;font-size:12px;font-weight:400;color:var(--mu);\ntransition:background-color .2s var(--eo)}\n.hs:hover,.hs:focus-visible{background:var(--ho);outline:none}\n.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px}\n.all .mi{align-items:flex-start}\n.all .mi>.av{flex:none}\n.all .mi>span:last-child{flex:1;min-width:0}\n.all .mi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.all .mi.done{opacity:.6}\n.layer.listing .col{opacity:0;transition:opacity var(--out) var(--ei)}\n.sec{padding:8px 10px 2px;font-size:12px;color:var(--fa)}\n.sec b{margin-left:6px;font-weight:500;color:var(--pu-accent)}\n.toast{position:fixed;left:50%;bottom:28px;border-radius:10px;padding:8px 14px;font-size:13px;opacity:0;transform:translate(-50%,6px);\ntransition:opacity .3s var(--eo),transform .36s var(--eo)}\n.toast.show{opacity:1;transform:translate(-50%,0)}\n\n@media (forced-colors: active){\n.pick.kf{border:3px solid Highlight}\n.layer :is(.ib,.mi,.nb,.hs,.selbar button,.say button,.xb button):focus-visible{outline:2px solid Highlight}\n}\n\n@media (prefers-reduced-motion: reduce){\n.bub,.bub.in,.bub.in:hover,.bub.on,.tip,.pop,.selbar,.menu,.all,.xp,.ttip,.tt,.toast{transform:none!important}\n.sw::after{transform:none!important;transition-property:opacity}\n[aria-checked=true]>.sw::after{opacity:0}\n[aria-checked=true]>.sw::before{opacity:1}\n.th{transition-property:opacity,box-shadow}\n.tip.show{transition-property:opacity}\n.pick,.pick.show{transition:opacity .16s ease-in-out}\n.all,.all.show,.xp,.xp.show{transition-property:opacity}\n.namebar,.namebar.show{transform:none!important;transition:opacity .16s ease-in-out}\n.av,.nf{transform:none!important}\n@keyframes pu-pulse{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}\n}\n";

package/dist/types/ui/theme.d.ts

@@ -2,6 +2,8 @@ export interface Theme {
     font: string;
     accent: string;
     dark: boolean;
+    /** The text colour that reads on the accent: white, or near black on a pale accent. */
+    on: string;
 }
 export declare function parseRgb(value: string): {
     r: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipeup",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Comments and feedback right on any HTML page: documents, slide decks and whole sites.",
   "keywords": [
     "comments",