@peekling/runtime 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { hatch, type PeeklingFinishReason, type PeeklingFinishResult, type PeeklingHatchInput, type PeeklingInstance, type PeeklingOptions, type PeeklingPackSelection, type PeeklingPosition, } from "./runtime.js";
+export { hatch, type PeeklingFinishReason, type PeeklingFinishResult, type PeeklingHatchInput, type PeeklingIndicator, type PeeklingInteractionOptions, type PeeklingInstance, type PeeklingOptions, type PeeklingPackSelection, type PeeklingPosition, type PeeklingPressAction, } from "./runtime.js";
 export { hidePeekling, isPeeklingHidden, showPeekling, type PeeklingHideDuration, } from "./visibility.js";
 export type { RuntimeStyleAsset } from "./styles.js";
 export { definePeeklingElement, PEEKLING_ELEMENT_TAG, type PeeklingElement, } from "./web-component.js";
-export type { ContentRegion, DiagnosticRecord, DiagnosticSeverity, Direction, EmitResult, HostBindings, HostContent, HostContentItem, HostContentPrimitive, HostContentSurface, HostSurfaceMount, HostSurfaceMountContext, HostSurfaceMountResult, JsonValue, NativeDensity, NativeManifest, NormalizedPack, Plan, PlanBrowserEvent, PlanCapability, PlanChannel, PlanCondition, PlanDisposition, PlanEffect, PlanEventSource, PlanMotionEffect, PlanRule, PlanStateSelection, PlanSurfaceEffect, PlanSurfaceOrdering, OverrideCompletionReason, OverrideHandle, OverrideInput, OverrideLifetime, OverrideResult, OverrideStatus, StateDefinition, SurfaceTheme, } from "./types.js";
+export type { ContentRegion, DiagnosticRecord, DiagnosticSeverity, Direction, EmitResult, HostBindings, HostContent, HostContentItem, HostContentPrimitive, HostContentSurface, HostSurfaceMount, HostSurfaceMountContext, HostSurfaceMountResult, JsonValue, NativeDensity, NativeManifest, NormalizedPack, Plan, PlanBrowserEvent, PlanCapability, PlanChannel, PlanCondition, PlanDisposition, PlanEffect, PlanEventSource, PlanMotionEffect, PeeklingPreset, PlanRule, PlanStateSelection, PlanSurfaceEffect, PlanSurfaceOrdering, OverrideCompletionReason, OverrideHandle, OverrideInput, OverrideLifetime, OverrideResult, OverrideStatus, StateDefinition, SurfaceTheme, TargetAnchor, TargetSnapshot, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,KAAK,oBAAoB,GAC1B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,SAAS,EACT,aAAa,EACb,cAAc,EACd,cAAc,EACd,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,YAAY,GACb,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,KAAK,oBAAoB,GAC1B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,SAAS,EACT,aAAa,EACb,cAAc,EACd,cAAc,EACd,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,aAAa,EACd,MAAM,YAAY,CAAC;AAWpB,qBAAa,cAAc;;IACzB,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,CAAM;IACzC,cAAc,EAAE,MAAM,CAAC;IAkBvB,YACE,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QACP,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACtC,QAAQ,CAAC,EAAE,WAAW,CACpB,MAAM,EACN,IAAI,GAAG;YAAE,YAAY,EAAE,MAAM,CAAC;YAAC,aAAa,EAAE,MAAM,CAAA;SAAE,CACvD,CAAC;QACF,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QACvC,GAAG,EAAE,MAAM,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,EAYF;IAED,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED,eAAe,CACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,SAAS,EACnB,MAAM,GAAE,eAA+B,GAErC;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,GAClD;QAAE,QAAQ,EAAE,KAAK,CAAC;QAAC,MAAM,EAAE,YAAY,CAAA;KAAE,CAiC5C;IAED,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,IAAI,CAQ/C;IAED,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAajC;IAED,OAAO,IAAI,IAAI,CAOd;CAkIF"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,aAAa,EACd,MAAM,YAAY,CAAC;AAWpB,qBAAa,cAAc;;IACzB,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,CAAM;IACzC,cAAc,EAAE,MAAM,CAAC;IAkBvB,YACE,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QACP,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACtC,QAAQ,CAAC,EAAE,WAAW,CACpB,MAAM,EACN,IAAI,GAAG;YAAE,YAAY,EAAE,MAAM,CAAC;YAAC,aAAa,EAAE,MAAM,CAAA;SAAE,CACvD,CAAC;QACF,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QACvC,GAAG,EAAE,MAAM,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,EAYF;IAED,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED,eAAe,CACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,SAAS,EACnB,MAAM,GAAE,eAA+B,GAErC;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,GAClD;QAAE,QAAQ,EAAE,KAAK,CAAC;QAAC,MAAM,EAAE,YAAY,CAAA;KAAE,CAiC5C;IAED,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,IAAI,CAQ/C;IAED,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAajC;IAED,OAAO,IAAI,IAAI,CAOd;CAmIF"}

package/dist/input.js

@@ -134,7 +134,10 @@ export class InputCollector {
             listen(this.#document, "visibilitychange", () => this.captureReaction("document.visibility", { visible: !this.#document.hidden }, "browser"), true);
         }
         else if (event === "window.scroll") {
-            listen(this.#window, "scroll", (input) => this.#captureObserved("window.scroll", input));
+            listen(this.#window, "scroll", (input) => {
+                this.#clearPointer();
+                this.#captureObserved("window.scroll", input);
+            });
         }
         else if (event === "window.focus") {
             listen(this.#window, "focus", () => this.captureReaction("window.focus", { focused: true }, "browser"));

package/dist/interaction.d.ts

@@ -0,0 +1,37 @@
+import { type RuntimeStyleAsset } from "./styles.js";
+import type { Point } from "./types.js";
+export interface CharacterIndicator {
+    kind?: "dot" | "count";
+    count?: number;
+    label: string;
+    color?: "transparent" | `#${string}`;
+    visible?: boolean;
+}
+export interface CharacterInteractionControllerOptions {
+    document: Document;
+    styles: RuntimeStyleAsset;
+    label: string;
+    draggable: boolean;
+    /** Present only when the character button controls an owned content surface. */
+    expanded?: boolean;
+    indicator?: CharacterIndicator;
+    onPress(): void;
+    onDragStart(): void;
+    onDragMove(position: Readonly<Point>, velocity: Readonly<Point>): void;
+    onDragEnd(velocity: Readonly<Point>, moved: boolean, pointer: Readonly<Point>): void;
+}
+/** Accessible owned hit target layered above either character renderer. */
+export declare class CharacterInteractionController {
+    #private;
+    readonly ready: Promise<void>;
+    constructor(options: CharacterInteractionControllerOptions);
+    render(position: Readonly<Point>, character: Readonly<{
+        width: number;
+        height: number;
+    }>, lift?: number): void;
+    setHidden(hidden: boolean): void;
+    setExpanded(expanded: boolean): void;
+    updateIndicator(indicator?: CharacterIndicator | null): void;
+    destroy(): void;
+}
+//# sourceMappingURL=interaction.d.ts.map

package/dist/interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,MAAM,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qCAAqC;IACpD,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,OAAO,IAAI,IAAI,CAAC;IAChB,WAAW,IAAI,IAAI,CAAC;IACpB,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IACvE,SAAS,CACP,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,EACzB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,GACvB,IAAI,CAAC;CACT;AAED,2EAA2E;AAC3E,qBAAa,8BAA8B;;IACzC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAuB9B,YAAY,OAAO,EAAE,qCAAqC,EAyCzD;IAED,MAAM,CACJ,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,EACzB,SAAS,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,EACtD,IAAI,SAAI,GACP,IAAI,CAWN;IAED,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAE/B;IAED,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAInC;IAED,eAAe,CAAC,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,GAAG,IAAI,CAuB3D;IAQD,OAAO,IAAI,IAAI,CAKd;CAwGF"}

package/dist/interaction.js

@@ -0,0 +1,204 @@
+import { runtimeMessage } from "./runtime-diagnostics.js";
+import { connectRuntimeHost, ShadowStyleSheet, } from "./styles.js";
+/** Accessible owned hit target layered above either character renderer. */
+export class CharacterInteractionController {
+    ready;
+    #document;
+    #host;
+    #root;
+    #button;
+    #badge;
+    #styles;
+    #options;
+    #buttonRule;
+    #badgeRule;
+    #indicator;
+    #label;
+    #position = { x: 0, y: 0 };
+    #pointerId;
+    #startPointer = { x: 0, y: 0 };
+    #lastPointer = { x: 0, y: 0 };
+    #startPosition = { x: 0, y: 0 };
+    #velocity = { x: 0, y: 0 };
+    #lastTime = 0;
+    #moved = false;
+    #suppressClick = false;
+    #destroyed = false;
+    constructor(options) {
+        this.#options = options;
+        this.#document = options.document;
+        this.#label = options.label;
+        this.#host = options.document.createElement("div");
+        this.#host.setAttribute("data-peekling-interaction", "");
+        this.#root = this.#host.attachShadow({ mode: "closed" });
+        this.#styles = new ShadowStyleSheet(options.document, this.#root, options.styles);
+        this.#button = options.document.createElement("button");
+        this.#button.type = "button";
+        this.#button.className = "peekling-character-hit";
+        this.#button.setAttribute("aria-label", options.label);
+        if (options.expanded !== undefined) {
+            this.#button.setAttribute("aria-expanded", String(options.expanded));
+        }
+        this.#button.toggleAttribute("data-peekling-draggable", options.draggable);
+        this.#badge = options.document.createElement("span");
+        this.#badge.className = "peekling-character-indicator";
+        this.#badge.setAttribute("aria-hidden", "true");
+        this.#button.append(this.#badge);
+        this.#root.append(this.#button);
+        this.ready = this.#styles.ready.then(() => {
+            if (this.#destroyed)
+                return;
+            this.#buttonRule = this.#styles.addRule(".peekling-character-hit");
+            this.#badgeRule = this.#styles.addRule(".peekling-character-indicator");
+            this.#syncIndicatorColor();
+        });
+        void this.ready.catch(() => { });
+        this.#button.addEventListener("click", this.#click);
+        if (options.draggable) {
+            this.#button.addEventListener("pointerdown", this.#pointerDown);
+            this.#button.addEventListener("pointermove", this.#pointerMove);
+            this.#button.addEventListener("pointerup", this.#pointerUp);
+            this.#button.addEventListener("pointercancel", this.#pointerCancel);
+        }
+        this.updateIndicator(options.indicator);
+        this.#repair();
+    }
+    render(position, character, lift = 0) {
+        if (this.#destroyed)
+            return;
+        this.#repair();
+        this.#position = { x: position.x, y: position.y - lift };
+        const rule = this.#buttonRule;
+        if (!rule)
+            return;
+        const left = position.x - character.width / 2;
+        const top = position.y - character.height / 2 - lift;
+        rule.width = `${character.width}px`;
+        rule.height = `${character.height}px`;
+        rule.transform = `translate3d(${left}px,${top}px,0)`;
+    }
+    setHidden(hidden) {
+        if (!this.#destroyed)
+            this.#host.toggleAttribute("hidden", hidden);
+    }
+    setExpanded(expanded) {
+        if (!this.#destroyed && this.#button.hasAttribute("aria-expanded")) {
+            this.#button.setAttribute("aria-expanded", String(expanded));
+        }
+    }
+    updateIndicator(indicator) {
+        if (this.#destroyed)
+            return;
+        this.#indicator = indicator ?? undefined;
+        this.#syncIndicatorColor();
+        const visible = Boolean(indicator &&
+            indicator.visible !== false &&
+            (indicator.kind !== "count" || (indicator.count ?? 0) > 0));
+        this.#badge.hidden = !visible;
+        if (!visible || !indicator) {
+            this.#badge.textContent = "";
+            this.#button.setAttribute("aria-label", this.#label);
+            return;
+        }
+        const kind = indicator.kind ?? "dot";
+        this.#badge.dataset.kind = kind;
+        this.#badge.textContent =
+            kind === "count" ? String(Math.min(99, indicator.count ?? 0)) : "";
+        this.#button.setAttribute("aria-label", `${this.#label}. ${indicator.label}`);
+    }
+    #syncIndicatorColor() {
+        if (this.#badgeRule) {
+            this.#badgeRule.backgroundColor = this.#indicator?.color ?? "";
+        }
+    }
+    destroy() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        this.#styles.destroy();
+        this.#host.remove();
+    }
+    #click = () => {
+        if (this.#suppressClick) {
+            this.#suppressClick = false;
+            return;
+        }
+        this.#options.onPress();
+    };
+    #pointerDown = (event) => {
+        if (this.#destroyed ||
+            this.#pointerId !== undefined ||
+            (!event.isPrimary && event.pointerType !== "mouse") ||
+            (event.pointerType === "mouse" && event.button !== 0)) {
+            return;
+        }
+        this.#pointerId = event.pointerId;
+        this.#startPointer = { x: event.clientX, y: event.clientY };
+        this.#lastPointer = { ...this.#startPointer };
+        this.#startPosition = { ...this.#position };
+        this.#velocity = { x: 0, y: 0 };
+        this.#lastTime = event.timeStamp;
+        this.#moved = false;
+        try {
+            this.#button.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Pointer capture is an optimization. Owned pointer listeners still work.
+        }
+        this.#options.onDragStart();
+    };
+    #pointerMove = (event) => {
+        if (event.pointerId !== this.#pointerId)
+            return;
+        const dx = event.clientX - this.#startPointer.x;
+        const dy = event.clientY - this.#startPointer.y;
+        if (!this.#moved && Math.hypot(dx, dy) >= 4)
+            this.#moved = true;
+        const elapsed = Math.max(8, Math.min(100, event.timeStamp - this.#lastTime));
+        const sampleX = ((event.clientX - this.#lastPointer.x) * 1_000) / elapsed;
+        const sampleY = ((event.clientY - this.#lastPointer.y) * 1_000) / elapsed;
+        this.#velocity = {
+            x: sampleX * 0.65 + this.#velocity.x * 0.35,
+            y: sampleY * 0.65 + this.#velocity.y * 0.35,
+        };
+        this.#lastPointer = { x: event.clientX, y: event.clientY };
+        this.#lastTime = event.timeStamp;
+        this.#options.onDragMove({
+            x: this.#startPosition.x + dx,
+            y: this.#startPosition.y + dy,
+        }, this.#velocity);
+    };
+    #pointerUp = (event) => {
+        if (event.pointerId !== this.#pointerId)
+            return;
+        this.#finishPointer(event, this.#moved, this.#velocity);
+    };
+    #pointerCancel = (event) => {
+        if (event.pointerId !== this.#pointerId)
+            return;
+        this.#finishPointer(event, this.#moved, { x: 0, y: 0 }, this.#lastPointer);
+    };
+    #finishPointer(event, moved, velocity, pointer = { x: event.clientX, y: event.clientY }) {
+        const pointerId = this.#pointerId;
+        this.#pointerId = undefined;
+        if (pointerId !== undefined) {
+            try {
+                this.#button.releasePointerCapture(pointerId);
+            }
+            catch {
+                // Capture may already have been released by the browser.
+            }
+        }
+        this.#suppressClick = moved;
+        this.#options.onDragEnd(velocity, moved, pointer);
+    }
+    #repair() {
+        if (this.#destroyed)
+            return;
+        connectRuntimeHost(this.#host, this.#document, "data-peekling-interaction");
+        if (this.#root.host !== this.#host ||
+            this.#button.getRootNode() !== this.#root) {
+            throw new Error(runtimeMessage("interaction.root", "Peekling interaction root structure was changed"));
+        }
+    }
+}

package/dist/overrides.d.ts

@@ -9,6 +9,14 @@ interface OverrideWorld {
         x: number;
         y: number;
     };
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    characterSize?: {
+        width: number;
+        height: number;
+    };
 }
 /** Instance-owned temporary channel controller. It never mutates the Plan. */
 export declare class OverrideManager {

package/dist/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../src/overrides.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACxB,cAAc,EACd,aAAa,EAIb,gBAAgB,EAChB,eAAe,EAEhB,MAAM,YAAY,CAAC;AAiBpB,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrC;AAED,8EAA8E;AAC9E,qBAAa,eAAe;;IAO1B,YACE,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,MAAM,MAAM,EACjB,UAAU,GAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAe,EAKjD;IAED,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,CAyDxC;IAED,MAAM,CAAC,MAAM,GAAE,wBAAqC,GAAG,cAAc,CAIpE;IAED,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAK7D;IAED,gFAAgF;IAChF,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,GAAE,eAA+B,GAAG,KAAK,CAWzE;IAED,OAAO,CACL,IAAI,EAAE,QAAQ,CAAC,eAAe,CAAC,EAC/B,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,GAC7B,eAAe,CAmDjB;IAED,UAAU,IAAI,MAAM,GAAG,SAAS,CAQ/B;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1B;IAED,KAAK,CAAC,MAAM,EAAE,wBAAwB,GAAG,IAAI,CAE5C;CA+CF;AAMD,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,wBAAwB,GAC/B,cAAc,CAOhB"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../src/overrides.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,oBAAoB,CAAC;AAO5B,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACxB,cAAc,EACd,aAAa,EAIb,gBAAgB,EAChB,eAAe,EAEhB,MAAM,YAAY,CAAC;AAkBpB,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD;AAED,8EAA8E;AAC9E,qBAAa,eAAe;;IAO1B,YACE,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,MAAM,MAAM,EACjB,UAAU,GAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAe,EAKjD;IAED,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,CAyDxC;IAED,MAAM,CAAC,MAAM,GAAE,wBAAqC,GAAG,cAAc,CAIpE;IAED,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAK7D;IAED,gFAAgF;IAChF,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,GAAE,eAA+B,GAAG,KAAK,CAWzE;IAED,OAAO,CACL,IAAI,EAAE,QAAQ,CAAC,eAAe,CAAC,EAC/B,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,GAC7B,eAAe,CA4DjB;IAED,UAAU,IAAI,MAAM,GAAG,SAAS,CAQ/B;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1B;IAED,KAAK,CAAC,MAAM,EAAE,wBAAwB,GAAG,IAAI,CAE5C;CAgDF;AAMD,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,wBAAwB,GAC/B,cAAc,CAOhB"}

package/dist/overrides.js

@@ -1,8 +1,9 @@
 import { EVENT_NAME_PATTERN } from "./contracts.js";
 import { browserCompletionEvent, isContinuousBrowserEvent } from "./events.js";
-import { DEFAULT_PERSISTENT_REQUEST_LIMIT, DEFAULT_SPEED } from "./defaults.js";
+import { DEFAULT_PERSISTENT_REQUEST_LIMIT } from "./defaults.js";
 import { compileOverrideEffect, } from "./plan-compiler.js";
 import { snapshotOwnData } from "./own-data.js";
+import { evaluateHorizontalPatrol, motionToward, } from "./plan.js";
 import { runtimeMessage } from "./runtime-diagnostics.js";
 const OVERRIDE_LIMIT = 8;
 const MAX_LIFETIME = DEFAULT_PERSISTENT_REQUEST_LIMIT;
@@ -99,22 +100,22 @@ export class OverrideManager {
                 delete output.state;
             }
             const motion = item.effect.motion;
-            if (motion && world.pointer && world.position) {
-                const dx = world.pointer.x - world.position.x;
-                const dy = world.pointer.y - world.position.y;
-                const distance = Math.hypot(dx, dy);
-                const arrivalRadius = motion.arrivalRadius ?? 0;
-                if (distance > arrivalRadius) {
-                    output.motion = {
-                        x: dx / distance,
-                        y: dy / distance,
-                        speed: motion.speed ?? DEFAULT_SPEED,
-                        maxDistance: distance - arrivalRadius,
-                    };
-                }
-                else {
+            if (motion?.type === "horizontal-patrol") {
+                const [direction, request] = evaluateHorizontalPatrol(motion, world, item.patrolDirection);
+                item.patrolDirection = direction;
+                if (request)
+                    output.motion = request;
+                else
+                    delete output.motion;
+            }
+            else if (motion?.type === "follow-pointer" &&
+                world.pointer &&
+                world.position) {
+                const request = motionToward(motion, world.position, world.pointer.x, world.pointer.y, motion.arrivalRadius, world);
+                if (request)
+                    output.motion = request;
+                else
                     delete output.motion;
-                }
             }
             for (const surface of item.effect.surfaces) {
                 surfaces.set(surface.channel, Object.freeze({
@@ -180,6 +181,7 @@ export class OverrideManager {
             startedAt: 0,
             deadline: 0,
             status: "rejected",
+            patrolDirection: true,
             handle,
             finish,
         });

package/dist/path-sampler.d.ts

@@ -0,0 +1,9 @@
+import type { Point } from "./types.js";
+/** Bounded browser-native SVG path geometry. Path data is never inserted as HTML. */
+export declare class SvgPathSampler {
+    #private;
+    constructor(document: Document);
+    validate(path: string): boolean;
+    sample(path: string, progress: number): Point | undefined;
+}
+//# sourceMappingURL=path-sampler.d.ts.map

package/dist/path-sampler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-sampler.d.ts","sourceRoot":"","sources":["../src/path-sampler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AASxC,qFAAqF;AACrF,qBAAa,cAAc;;IAIzB,YAAY,QAAQ,EAAE,QAAQ,EAE7B;IAED,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE9B;IAED,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAaxD;CAqBF"}

package/dist/path-sampler.js

@@ -0,0 +1,47 @@
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+/** Bounded browser-native SVG path geometry. Path data is never inserted as HTML. */
+export class SvgPathSampler {
+    #document;
+    #cache = new Map();
+    constructor(document) {
+        this.#document = document;
+    }
+    validate(path) {
+        return this.#geometry(path) !== undefined;
+    }
+    sample(path, progress) {
+        const geometry = this.#geometry(path);
+        if (!geometry)
+            return;
+        const bounded = Math.max(0, Math.min(1, progress));
+        try {
+            const point = geometry.element.getPointAtLength(geometry.length * bounded);
+            if (!Number.isFinite(point.x) || !Number.isFinite(point.y))
+                return;
+            return { x: point.x, y: point.y };
+        }
+        catch {
+            return;
+        }
+    }
+    #geometry(path) {
+        const cached = this.#cache.get(path);
+        if (cached)
+            return cached;
+        if (this.#cache.size >= 16)
+            return;
+        const element = this.#document.createElementNS(SVG_NAMESPACE, "path");
+        element.setAttribute("d", path);
+        try {
+            const length = element.getTotalLength();
+            if (!Number.isFinite(length) || length <= 0)
+                return;
+            const geometry = Object.freeze({ element, length });
+            this.#cache.set(path, geometry);
+            return geometry;
+        }
+        catch {
+            return;
+        }
+    }
+}

package/dist/peekling.css

@@ -1 +1 @@
-:host{all:initial!important;position:fixed!important;inset:0!important;pointer-events:none!important}:host([data-peekling-host][hidden]){display:none!important}:host([data-peekling-host]){z-index:2147483646!important;contain:strict!important;overflow:hidden!important}.sprite{display:block;position:absolute;background-repeat:no-repeat;transform-origin:0 0}:host([data-peekling-content]){z-index:2147483645!important;color:var(--peekling-surface-color, #262626)!important;font:500 14px/1.4 system-ui!important}.surface{position:absolute;box-sizing:border-box;width:min(var(--peekling-surface-width, 320px),calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:var(--peekling-surface-padding, 12px 14px);border:1px solid var(--peekling-surface-border, #d9d9d3);border-radius:var(--peekling-surface-radius, 14px);background:var(--peekling-surface-background, #fafafa);pointer-events:auto}.title{display:block}.surface p{margin:0}.surface a{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-top:6px;color:var(--peekling-surface-link, #174f00)}.surface a:focus-visible{outline:3px solid;outline-offset:3px}:host([data-peekling-controls]){z-index:2147483647!important;color:#262626!important;font:600 14px/1.25 system-ui!important}.peekling-visibility-trigger{position:fixed;right:0;bottom:0;width:64px;height:64px;border:0;background:transparent;opacity:0;pointer-events:none}.peekling-visibility-trigger:focus-visible{opacity:1;outline:3px solid;background:#fafafa}.peekling-visibility-panel{position:fixed;right:16px;bottom:16px;box-sizing:border-box;width:min(272px,calc(100vw - 32px));padding:16px;border:1px solid #d9d9d3;border-radius:18px;background:#fafafa;pointer-events:auto}.peekling-visibility-panel h2{margin:0 0 12px}.peekling-visibility-option{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;background:transparent;color:inherit;font:inherit}.peekling-visibility-option:hover,.peekling-visibility-option:focus-visible{outline:2px solid}
+:host{all:initial!important;position:fixed!important;inset:0!important;pointer-events:none!important}:host([data-peekling-host][hidden]){display:none!important}:host([data-peekling-host]){z-index:2147483646!important;contain:strict!important;overflow:hidden!important}.sprite{display:block;position:absolute;background-repeat:no-repeat;transform-origin:0 0}:host([data-peekling-content]){z-index:2147483645!important;color:var(--peekling-surface-color, #262626)!important;font:500 14px/1.4 system-ui!important}:host([data-peekling-content][hidden]){display:none!important}:host([data-peekling-interaction]){z-index:2147483647!important;contain:strict!important;overflow:hidden!important}:host([data-peekling-interaction][hidden]){display:none!important}.peekling-character-hit{-webkit-appearance:none;appearance:none;position:absolute;margin:0;padding:0;border:0;border-radius:28%;background:transparent;color:#262626;pointer-events:auto;cursor:pointer;transform-origin:0 0;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}.peekling-character-hit[data-peekling-draggable]{cursor:grab;touch-action:none}.peekling-character-hit[data-peekling-draggable]:active{cursor:grabbing}.peekling-character-hit:focus-visible{outline:3px solid #2f6f1d;outline-offset:3px}.peekling-character-indicator{position:absolute;top:-2px;right:-2px;display:grid;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;place-items:center;border:2px solid #fafafa;border-radius:999px;background:#ff4d4f;color:#fff;font:700 10px/1 system-ui}.peekling-character-indicator[data-kind=dot]{min-width:12px;width:12px;height:12px;padding:0}.surface{position:absolute;box-sizing:border-box;width:min(var(--peekling-surface-width, 320px),calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:var(--peekling-surface-padding, 12px 14px);border:1px solid var(--peekling-surface-border, #d9d9d3);border-radius:var(--peekling-surface-radius, 14px);background:var(--peekling-surface-background, #fafafa);pointer-events:auto}.surface [hidden]{display:none!important}.title{display:block}.surface p{margin:0}.surface a{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-top:6px;color:var(--peekling-surface-link, #174f00)}.surface a:focus-visible{outline:3px solid;outline-offset:3px}:host([data-peekling-controls]){z-index:2147483647!important;color:#262626!important;font:600 14px/1.25 system-ui!important}.peekling-visibility-trigger{position:fixed;right:0;bottom:0;width:64px;height:64px;border:0;background:transparent;opacity:0;pointer-events:none}.peekling-visibility-trigger:focus-visible{opacity:1;outline:3px solid;background:#fafafa}.peekling-visibility-panel{position:fixed;right:16px;bottom:16px;box-sizing:border-box;width:min(272px,calc(100vw - 32px));padding:16px;border:1px solid #d9d9d3;border-radius:18px;background:#fafafa;pointer-events:auto}.peekling-visibility-panel h2{margin:0 0 12px}.peekling-visibility-option{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;background:transparent;color:inherit;font:inherit}.peekling-visibility-option:hover,.peekling-visibility-option:focus-visible{outline:2px solid}

package/dist/peekling.css.sri

@@ -1 +1 @@
-sha256-w8BENjaJ/B1wtpk3iuh7jT++FlbT5+fx5BBlvePx1qo=
+sha256-r4PIKebZlQTb2JaHfQibQqQxHaKciwlXtTMDEvDTUPY=