@pinecall/dot 0.0.0-stage → 0.11.22

package/dist/pointer/menu.js

@@ -0,0 +1,252 @@
+/** The walks a visitor may play with no call: a small button beside the resting face, its pills fanned in an arc round it. */
+//
+// The button sits on the face's shoulder, toward the page, in front of the face: behind it, a click
+// meant for it reached the face and began a call. A click fans the walks out beside the
+// face, each a pill with its title and length, read from the top: the first walk is the highest. Escape, a click elsewhere or
+// a pick closes them. One walk can also be offered alone, beside the face, for a few seconds: the one
+// of the section scrolled to. Every colour is the person's: --pc-face, --pc-bubble, --pc-bubble-ink.
+import { clock } from "../wire/index.js";
+/** A pill's height, in px. */
+const PILL = 24;
+const STYLE = `
+.pc-walks { position: fixed; z-index: 3; width: 22px; height: 22px; padding: 0; border: 2px solid var(--pc-bubble, #fff); border-radius: 50%;
+  background: var(--pc-face, #1f6b55); color: #fff; font: 700 10px/18px system-ui, sans-serif; text-align: center; cursor: pointer;
+  pointer-events: auto; box-shadow: 0 2px 8px rgb(0 0 0 / .2); transition: transform .15s; }
+.pc-walks:hover, .pc-walks[aria-expanded="true"] { transform: scale(1.12); }
+.pc-walks:focus-visible, .pc-pill:focus-visible { outline: 2px solid var(--pc-face-ring, #44a785); outline-offset: 2px; }
+.pc-walks[hidden], .pc-pill[hidden] { display: none; }
+.pc-pill { position: fixed; z-index: 3; display: flex; align-items: center; gap: 6px; height: ${PILL}px; padding: 0 10px 0 8px; border: 0;
+  border-radius: 999px; background: var(--pc-bubble, #fff); color: var(--pc-bubble-ink, #17201c); cursor: pointer; pointer-events: auto;
+  font: 500 12px/${PILL}px system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgb(0 0 0 / .16);
+  opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s; }
+.pc-pill.pc-shown { opacity: 1; transform: none; }
+.pc-pill .pc-tri { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--pc-face, #1f6b55); }
+.pc-pill .pc-long { opacity: .55; font-variant-numeric: tabular-nums; }
+.pc-more { position: fixed; z-index: 3; display: grid; place-items: center; width: ${PILL}px; height: ${PILL}px; padding: 0; border: 0;
+  border-radius: 50%; background: var(--pc-bubble, #fff); color: var(--pc-face, #1f6b55); cursor: pointer; pointer-events: auto;
+  box-shadow: 0 4px 14px rgb(0 0 0 / .16); }
+.pc-more[hidden] { display: none; }
+.pc-more svg { transition: transform .2s; }
+.pc-more.pc-last svg { transform: rotate(180deg); }
+.pc-more:focus-visible { outline: 2px solid var(--pc-face-ring, #44a785); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .pc-pill, .pc-walks, .pc-more svg { transition: none; } }
+`;
+/** How long a walk offered alone stays beside the face, in ms. */
+export const OFFERED_MS = 5000;
+/** How many pills show at once; the rest come a page at a time, from a small button under them. */
+export const PAGE = 4;
+/** How far apart two pills stand, in px: a pill's height and a gap of 6, so no two ever overlap. */
+export const STEP = PILL + 6;
+/** How far the nearest pill stands from the face's edge, and how much farther each lower one does, in px. */
+const GAP = 14;
+const SLANT = 10;
+/**
+ * Where each of `count` pills sits beside a face at `at` of `radius`, the end nearest it: rising a
+ * step at a time from beside the face, each a slant nearer it than the one below, the highest a gap
+ * from its edge. On an arc wide enough for the highest, the lowest stood far out from the face.
+ */
+export function fanned(count, at, radius, dock) {
+    const side = dock === "right" ? -1 : 1;
+    const lowest = radius * 0.3;
+    return Array.from({ length: count }, (_, index) => ({
+        x: at.x + side * (radius + GAP + (count - 1 - index) * SLANT),
+        y: at.y - lowest - index * STEP,
+    }));
+}
+export class Menu {
+    #document;
+    #options;
+    #style;
+    #button;
+    #host;
+    #more;
+    #pills = [];
+    #open = false;
+    /** Which page of pills shows, from 0. */
+    #page = 0;
+    /** The walk offered alone, by its place in the list, and when it goes. */
+    #alone = null;
+    #outside = (event) => {
+        const target = event.target instanceof Node ? event.target : null;
+        if (target !== null && [this.#button, this.#more, ...this.#pills].some((part) => part.contains(target)))
+            return;
+        this.toggle(false);
+    };
+    #escape = (event) => {
+        if (event.key === "Escape")
+            this.toggle(false);
+    };
+    // The face rests in a corner of the window, so a resize moves it, and the button and pills with it.
+    #resized = () => this.#place();
+    constructor(document, host, options) {
+        this.#document = document;
+        this.#options = options;
+        this.#style = document.createElement("style");
+        this.#style.textContent = STYLE;
+        document.head.append(this.#style);
+        this.#button = document.createElement("button");
+        this.#button.type = "button";
+        this.#button.className = "pc-walks";
+        this.#button.hidden = true;
+        this.#button.textContent = "▸";
+        this.#button.setAttribute("aria-label", options.label);
+        this.#button.setAttribute("aria-expanded", "false");
+        this.#button.title = options.label;
+        this.#button.addEventListener("click", () => this.toggle(!this.#open));
+        host(this.#button);
+        this.#more = document.createElement("button");
+        this.#more.type = "button";
+        this.#more.className = "pc-more";
+        this.#more.hidden = true;
+        this.#more.innerHTML = `<svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true"><path d="M2.5 4.5 6 8l3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+        this.#more.setAttribute("aria-label", options.more);
+        this.#more.title = options.more;
+        this.#more.addEventListener("click", () => {
+            this.#page = (this.#page + 1) % Math.ceil(this.#pills.length / PAGE);
+            this.#show();
+            this.#shown()[0]?.focus();
+        });
+        host(this.#more);
+        this.#host = host;
+        document.addEventListener("pointerdown", this.#outside, true);
+        document.addEventListener("keydown", this.#escape);
+        document.defaultView?.addEventListener("resize", this.#resized);
+    }
+    /** The walks to offer; none hides the button. */
+    offer(items) {
+        this.#unsuggest();
+        for (const pill of this.#pills)
+            pill.remove();
+        this.#pills = items.map((item, index) => {
+            const pill = this.#document.createElement("button");
+            pill.type = "button";
+            pill.className = "pc-pill";
+            pill.hidden = true;
+            const tri = this.#document.createElement("span");
+            tri.className = "pc-tri";
+            const long = this.#document.createElement("span");
+            long.className = "pc-long";
+            long.textContent = clock(item.ms);
+            pill.append(tri, this.#document.createTextNode(item.title), long);
+            pill.addEventListener("click", () => {
+                this.toggle(false);
+                this.#options.onPick(index);
+            });
+            this.#host(pill);
+            return pill;
+        });
+        this.#button.hidden = items.length === 0;
+    }
+    /** Whether the button may show now: not during a call, nor while a walk plays. */
+    available(on) {
+        this.#button.hidden = !on || this.#pills.length === 0;
+        if (!on)
+            this.toggle(false);
+        if (on)
+            this.#place();
+    }
+    /** Offer one walk alone, beside the face, for `ms`, while the button shows and the pills are folded. */
+    suggest(index, ms = OFFERED_MS) {
+        const pill = this.#pills[index];
+        if (pill === undefined || this.#open || this.#button.hidden)
+            return;
+        this.#unsuggest();
+        this.#alone = { index, timer: setTimeout(() => this.#unsuggest(), ms) };
+        this.#place();
+        pill.hidden = false;
+        setTimeout(() => pill.classList.add("pc-shown"), 30);
+    }
+    /** Fan the pills out, or fold them back. */
+    toggle(open) {
+        this.#unsuggest();
+        this.#open = open && !this.#button.hidden;
+        this.#page = 0;
+        this.#button.setAttribute("aria-expanded", String(this.#open));
+        this.#show();
+        if (this.#open)
+            this.#shown()[0]?.focus();
+    }
+    /** The pills of the page showing, while the pills are fanned out. */
+    #shown() {
+        return this.#open ? this.#pills.slice(this.#page * PAGE, (this.#page + 1) * PAGE) : [];
+    }
+    // The page's pills shown, one after another; the others folded; the button for more while there are more than a page.
+    #show() {
+        this.#place();
+        const shown = this.#shown();
+        for (const pill of this.#pills) {
+            if (shown.includes(pill))
+                continue;
+            pill.hidden = true;
+            pill.classList.remove("pc-shown");
+        }
+        shown.forEach((pill, index) => {
+            pill.hidden = false;
+            setTimeout(() => pill.classList.add("pc-shown"), 30 * index);
+        });
+        this.#more.hidden = !this.#open || this.#pills.length <= PAGE;
+        this.#more.classList.toggle("pc-last", (this.#page + 1) * PAGE >= this.#pills.length);
+    }
+    get open() {
+        return this.#open;
+    }
+    #place() {
+        const { at, radius } = this.#options.face();
+        const lean = radius * 0.72 + 2;
+        const side = this.#options.dock === "right" ? -1 : 1;
+        Object.assign(this.#button.style, { left: `${at.x + side * lean - 11}px`, top: `${at.y - lean - 11}px` });
+        const view = this.#document.defaultView;
+        const right = this.#options.dock === "right";
+        const stand = (pill, point) => {
+            if (pill === undefined)
+                return;
+            Object.assign(pill.style, {
+                top: `${point.y - PILL / 2}px`,
+                left: right ? "auto" : `${point.x}px`,
+                right: right ? `${(view?.innerWidth ?? 0) - point.x}px` : "auto",
+                transformOrigin: right ? "right center" : "left center",
+            });
+        };
+        // The page's pills from the top, the first the highest; under them, the button for more.
+        const shown = this.#shown();
+        const paged = this.#pills.length > PAGE;
+        const slots = fanned(shown.length + (paged ? 1 : 0), at, radius, this.#options.dock);
+        shown.forEach((pill, index) => stand(pill, slots[slots.length - 1 - index] ?? at));
+        const [under] = slots;
+        if (paged && under !== undefined) {
+            Object.assign(this.#more.style, { left: `${right ? under.x - PILL : under.x}px`, top: `${under.y - PILL / 2}px` });
+        }
+        // A walk offered alone stands where the lowest pill would, beside the face.
+        const [beside] = fanned(1, at, radius, this.#options.dock);
+        if (this.#alone !== null && beside !== undefined)
+            stand(this.#pills[this.#alone.index], beside);
+    }
+    #unsuggest() {
+        if (this.#alone === null)
+            return;
+        clearTimeout(this.#alone.timer);
+        const { index } = this.#alone;
+        const pill = this.#pills[index];
+        this.#alone = null;
+        if (pill === undefined || this.#open)
+            return;
+        pill.classList.remove("pc-shown");
+        // Hidden once it has faded, unless it was offered again or the pills fanned out meanwhile.
+        setTimeout(() => {
+            if (!this.#open && this.#alone?.index !== index)
+                pill.hidden = true;
+        }, 200);
+    }
+    close() {
+        this.#unsuggest();
+        this.#document.removeEventListener("pointerdown", this.#outside, true);
+        this.#document.removeEventListener("keydown", this.#escape);
+        this.#document.defaultView?.removeEventListener("resize", this.#resized);
+        this.#button.remove();
+        this.#more.remove();
+        for (const pill of this.#pills)
+            pill.remove();
+        this.#style.remove();
+    }
+}
+//# sourceMappingURL=menu.js.map

package/dist/pointer/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/pointer/menu.ts"],"names":[],"mappings":"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"}

package/dist/pointer/person.d.ts

@@ -0,0 +1,91 @@
+/** The tutor as one more person on the page: a pointer of its own, its face beside the tip, what it says beside the face. */
+import type { Kind } from "./hover.js";
+import type { Point } from "./flight.js";
+/** Which side of the tip the face and its words sit on: to its left or right, above or below it. */
+export interface Side {
+    west: boolean;
+    up: boolean;
+}
+/** The first side whose reach fits the screen and covers nothing of `avoid`; else the first that fits; else below and right. */
+export declare function sideOf(tip: Point, avoid: DOMRect | null, width: number, height: number): Side;
+export interface PersonOptions {
+    /** The corner it rests in. */
+    dock: "right" | "left";
+    /** What the face is called for a screen reader: "Talk to Pip". */
+    label: string;
+    /** The face's and the arrow's colour, any CSS colour; the page's `--pc-face` when left out. */
+    color?: string | undefined;
+    /** A click (or Enter) on the face. */
+    onClick: () => void;
+    /** The hang-up button: its name, and its click. */
+    hangUp: {
+        label: string;
+        onClick: () => void;
+    };
+    /** The button that stops a walk: its name, and its click. */
+    stop: {
+        label: string;
+        onClick: () => void;
+    };
+    /** The button that holds a walk and goes on with it: its name, and its click. */
+    pause: {
+        label: string;
+        onClick: () => void;
+    };
+    /** The captions button, when the site lets the visitor choose: its name, and its click. */
+    captions: {
+        label: string;
+        onClick: () => void;
+    } | null;
+    /** The ▶ beside an element the site wrote a line for: its name, and its click with that element. */
+    explain: {
+        label: string;
+        onClick: (element: Element) => void;
+    };
+}
+export declare class Person {
+    #private;
+    /** The element the face is drawn into. */
+    readonly face: HTMLElement;
+    constructor(document: Document, options: PersonOptions);
+    /** Where the face rests: its middle, 52 px in from the corner. */
+    dock(): Point;
+    /** The tip, now. */
+    get at(): Point;
+    /**
+     * Put the tip at a point of the viewport, the face and its words on `side`, or on the side of it that
+     * fits the screen and covers nothing of `avoid`, the box being explained: right or left, below or above.
+     */
+    place(point: Point, avoid?: DOMRect | null, side?: Side): void;
+    /** Out of the corner with the arrow showing, the buttons sliding into it; or back in it, and they aside. */
+    tour(on: boolean): void;
+    get touring(): boolean;
+    kind(kind: Kind): void;
+    /** What it is saying: the words said, and the ones still to come; null hides the bubble. */
+    say(lit: string | null, coming?: string): void;
+    /** What the visitor is saying, in the corner; null hides it. */
+    heard(text: string | null): void;
+    /**
+     * The corner's buttons: captions and hang-up while a call is on, captions, pause and stop while a
+     * walk plays; captions pressed while they show, pause while the walk is held. Called every frame, so
+     * it writes only what changed.
+     */
+    buttons(call: boolean, walk: boolean, captioned: boolean, paused?: boolean): void;
+    /** The ▶ at the top right of `element`, or none. Called every frame while shown, so it follows the element. */
+    offer(element: Element | null): void;
+    /** The spotlight on an element's box, or off. Called every frame while on, so it follows the element. */
+    spot(element: Element | null): void;
+    /** "Here": a ring where the tip is, twice. */
+    ring(): void;
+    /** Put another part on the person's layer, out of what the agent reads: the walks' button and pills. */
+    add(element: Element): void;
+    /**
+     * Half the resting face's width, in px, touring or not: read off a face still small from a walk, it
+     * set the walks' button where the face, grown back, covered it.
+     */
+    get radius(): number;
+    /** How far a walk has played, 0 to 1, as a ring round the face; null takes the ring away. */
+    progress(fraction: number | null): void;
+    close(): void;
+}
+//# sourceMappingURL=person.d.ts.map

package/dist/pointer/person.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../src/pointer/person.ts"],"names":[],"mappings":"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"}