@maple-kit/ui 0.1.0

package/dist/maple.js

@@ -0,0 +1,65 @@
+import { MapleRoot } from "./root.js";
+import { MapleActions } from "./composer/actions.js";
+import { MapleAttachments } from "./composer/attachments.js";
+import { MapleContextBadge } from "./composer/badge.js";
+import { MapleBody } from "./composer/body.js";
+import { MapleComposer } from "./composer/composer.js";
+import { MapleDetail } from "./composer/detail.js";
+import { MapleTarget } from "./composer/target.js";
+import { PICK_ORDER } from "./island/language.js";
+import { IslandContent } from "./island/content.js";
+import { Filters } from "./island/filters.js";
+import { Branch, Header, Logo } from "./island/header.js";
+import { Island } from "./island/island.js";
+import { Item } from "./island/item.js";
+import { List } from "./island/list.js";
+import { NewComment, PickButton } from "./island/new-comment.js";
+import { Settings } from "./island/settings.js";
+import { IslandTrigger } from "./island/trigger.js";
+import { MapleMarkLayer } from "./marks/layer.js";
+import { MapleNotice } from "./notice/notice.js";
+import { MaplePicker } from "./picker/picker.js";
+import { createElement, forwardRef } from "react";
+//#region src/maple.ts
+const LOAD_CALLS = [
+	"load",
+	"status",
+	"link"
+];
+const SEND_CALLS = ["send"];
+const Maple = forwardRef(function Maple(props, ref) {
+	const { attachments, children, defaultOpen, hint, leave, ...root } = props;
+	return createElement(MapleRoot, {
+		...root,
+		ref
+	}, createElement(MapleMarkLayer, { key: "marks" }), createElement(MaplePicker, {
+		key: "picker",
+		...hint === void 0 ? {} : { hint }
+	}), inventory(root.branch, root.label, defaultOpen === true), composer(leave, attachments), children);
+});
+function inventory(branch, label, defaultOpen) {
+	return createElement(Island, {
+		defaultOpen,
+		key: "island"
+	}, createElement(IslandTrigger), createElement(IslandContent, null, createElement(Header, null, createElement(Logo), createElement(Branch, {
+		branch,
+		...label === void 0 ? {} : { label }
+	}), createElement(Settings)), createElement(MapleNotice, { during: LOAD_CALLS }), createElement(Filters), createElement(List, { children: (comment) => createElement(Item, { comment }) }), createElement(NewComment, null, ...PICK_ORDER.map((kind) => createElement(PickButton, {
+		key: kind,
+		kind
+	})))));
+}
+function composer(leave, shots) {
+	return createElement(MapleComposer, {
+		key: "composer",
+		...leave === void 0 ? {} : { leave }
+	}, createElement(MapleTarget, { key: "target" }), createElement(MapleBody, { key: "body" }), createElement(MapleDetail, { key: "detail" }), createElement(MapleContextBadge, { key: "context" }), createElement(MapleAttachments, {
+		key: "attachments",
+		...shots
+	}), createElement(MapleNotice, {
+		key: "notice",
+		during: SEND_CALLS
+	}), createElement(MapleActions, { key: "actions" }));
+}
+//#endregion
+export { Maple };

package/dist/marks/avatar.d.ts

@@ -0,0 +1,16 @@
+import { AsChildProps } from "../slot.js";
+import { HTMLAttributes } from "react";
+import { IdentityProvenance } from "@maple-kit/core";
+//#region src/marks/avatar.d.ts
+/** Who wrote it, in their own colour. */
+export interface AvatarProps extends AsChildProps, HTMLAttributes<HTMLSpanElement> {
+  readonly name: string;
+  readonly provenance?: IdentityProvenance;
+  /** The reviewer colour, 0 to 9. */
+  readonly colorSlot?: number;
+}
+/** The first letters of the first two words, which is what a name reduces to. */
+export declare function initialsOf(name: string): string;
+/** An author's leaf. The provenance is the fill; the name is beside it. */
+export declare const MapleAvatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion

package/dist/marks/avatar.js

@@ -0,0 +1,36 @@
+import { dataAttributes } from "../data.js";
+import { Slot, composeRefs } from "../slot.js";
+import { applyReviewerSlot } from "../slots.js";
+import { MapleLeaf, inside } from "./shape.js";
+import { createElement, forwardRef, useCallback } from "react";
+//#region src/marks/avatar.ts
+const TOOLTIPS = {
+	server: "verified by the application's own session",
+	client: "the application told us; unverified",
+	guest: "typed a name into Maple"
+};
+function initialsOf(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toUpperCase() ?? "").join("");
+}
+const MapleAvatar = forwardRef(function MapleAvatar(props, ref) {
+	const { asChild, children, className, colorSlot, name, provenance = "server", ...rest } = props;
+	const paint = useCallback((node) => {
+		if (node && colorSlot !== void 0) applyReviewerSlot(node, colorSlot);
+	}, [colorSlot]);
+	return createElement(asChild ? Slot : "span", {
+		...rest,
+		...dataAttributes({ provenance }),
+		title: `${name} — ${TOOLTIPS[provenance]}`,
+		className: className ? `mk-avatar ${className}` : "mk-avatar",
+		ref: composeRefs(ref, paint)
+	}, ...inside(asChild, children, [createElement(MapleLeaf, {
+		key: "leaf",
+		form: provenance === "guest" ? "outline" : "solid",
+		halo: false
+	}), createElement("span", {
+		key: "ini",
+		className: "mk-avatar-ini"
+	}, initialsOf(name))]));
+});
+//#endregion
+export { MapleAvatar, initialsOf };

package/dist/marks/css.d.ts

@@ -0,0 +1,12 @@
+//#region src/marks/css.d.ts
+/**
+ * The marks' half of the adopted stylesheet.
+ *
+ * It is its own module so `src/stylesheet.ts` composes rather than grows, and
+ * so this file is the one place a mark's look is decided. Every value here is
+ * a token: a rule that spelled its own duration would stop honouring reduced
+ * motion the moment a reviewer asked for it.
+ */
+/** Everything the marks add to the overlay's one stylesheet. */
+export declare function marksCss(): string;
+//#endregion

package/dist/marks/css.js

@@ -0,0 +1,371 @@
+//#region src/marks/css.ts
+const POSITIONED = `
+  position: absolute;
+  top: 0;
+  left: 0;
+  translate: var(--mk-x) var(--mk-y);
+`.trim();
+function paintCss() {
+	return `
+/* A mark is drawn in its status, not in its author's hue: where a comment is
+   in its life is what a reviewer scans the page for, and who wrote it is the
+   name beside it. The row's leaf answers to the same four rules, because a
+   comment drawn two ways in two places is two comments. */
+:is(.mk-mark, .mk-rowleaf) {
+  --mk-paint: var(--mk-pin, var(--mk-accent));
+  --mk-ink: var(--mk-pin-ink, var(--mk-accent-ink));
+}
+
+.mk-avatar {
+  --mk-paint: var(--mk-pin, var(--mk-slot, var(--mk-accent)));
+  --mk-ink: var(--mk-pin-ink, var(--mk-slot-ink, var(--mk-accent-ink)));
+}
+
+:is(.mk-mark, .mk-rowleaf)[data-status="needs_reverify"] {
+  --mk-paint: var(--mk-pin, var(--mk-warn));
+  --mk-ink: var(--mk-pin-ink, var(--mk-warn-sub));
+}
+
+:is(.mk-mark, .mk-rowleaf)[data-status="resolved"] {
+  --mk-paint: var(--mk-pin, var(--mk-ok));
+  --mk-ink: var(--mk-pin-ink, var(--mk-bg));
+}
+
+/* Held back, not faded out: at 0.6 a resolved mark read as one that had
+   failed to load, and a reviewer re-checking it has to be able to see it. */
+.mk-mark[data-status="resolved"] {
+  opacity: 0.85;
+}
+
+/* Unpinned never reached the page and unsent never left it, so neither takes
+   a status colour: grey is what separates them from an open comment, which
+   is drawn in the same outline. */
+:is(.mk-mark, .mk-rowleaf)[data-status="orphaned"],
+:is(.mk-mark, .mk-rowleaf)[data-sent="false"] {
+  --mk-paint: var(--mk-pin, var(--mk-muted));
+  --mk-ink: var(--mk-pin-ink, var(--mk-muted));
+}
+`;
+}
+function leafCss() {
+	return `
+.mk-leaf {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.mk-leaf-halo {
+  fill: var(--mk-bg);
+  stroke: var(--mk-bg);
+  stroke-width: 8;
+  stroke-linejoin: round;
+}
+
+.mk-leaf-body {
+  fill: var(--mk-paint);
+  stroke: var(--mk-paint);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+}
+
+/* The ring is a filled shape carrying its own counter, so it keeps one weight
+   at every size and recolours with one declaration. A dashed stroke was tried
+   and reads as a broken leaf rather than an empty one, which is a different
+   sentence about the comment. The stroke on top of the fill is what gives it
+   weight: the drawn path alone is a hairline beside the solid form. */
+.mk-leaf-edge {
+  fill: var(--mk-paint);
+  stroke: var(--mk-paint);
+  stroke-width: 1.6;
+  stroke-linejoin: round;
+}
+`;
+}
+function markCss() {
+	return `
+.mk-marks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mk-mark {
+  ${POSITIONED}
+  --mk-mark-up: 1.18;
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-r-xs);
+  background: transparent;
+  color: var(--mk-ink);
+  cursor: pointer;
+  pointer-events: auto;
+  filter: drop-shadow(var(--mk-sh1));
+  animation: mk-mark-in var(--mk-dur-mark-in) var(--mk-ease-entrance);
+  transition:
+    transform var(--mk-dur-fade) var(--mk-ease-surface),
+    opacity var(--mk-dur-fade) var(--mk-ease-surface);
+}
+
+/* A row pointed at is the same gesture as a mark pointed at, so it gets the
+   same answer: the mark grows and comes forward. The glow below is the click's
+   alone — that one outlives the hand, and this does not. */
+.mk-mark:hover,
+.mk-mark:focus-visible,
+.mk-mark[data-mk-peeked="true"],
+.mk-mark[aria-pressed="true"] {
+  transform: scale(var(--mk-mark-up));
+  opacity: 1;
+  z-index: 3;
+}
+
+.mk-mark:active {
+  transform: scale(calc(var(--mk-mark-up) * var(--mk-press)));
+}
+
+/* Moved out of the way of what it was covering. The cursor says so before the
+   drag starts, because nothing else on the page suggests a mark can move. */
+.mk-mark[data-mk-nudged="true"] {
+  cursor: grab;
+}
+
+.mk-mark[data-mk-dragging="true"] {
+  cursor: grabbing;
+  transition: none;
+  z-index: 4;
+}
+
+/* A box-shadow on the 38px button draws a rounded square behind a leaf, which
+   reads as a second object. A drop-shadow takes the alpha, so it takes the leaf. */
+.mk-mark[aria-pressed="true"] {
+  filter:
+    drop-shadow(0 0 3px color-mix(in oklab, var(--mk-paint) 70%, transparent))
+    drop-shadow(0 0 9px color-mix(in oklab, var(--mk-paint) 45%, transparent))
+    drop-shadow(var(--mk-sh1));
+}
+
+.mk-mark[aria-pressed="true"] .mk-leaf-halo {
+  stroke-width: 10;
+}
+
+/* The leaf's mass sits below its middle — the stem is the long end — so a
+   box-centred number reads high inside it. 1px down is where it looks centred,
+   which is 2px from where the box says it is. */
+.mk-mark-n {
+  --mk-n: 11px;
+  position: relative;
+  font-size: var(--mk-n);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--mk-ink);
+  transform: translateY(1px);
+}
+
+/* Two digits are twice the width in the same waist. The leaf does not grow —
+   a mark that changed size at the tenth comment would be a different object —
+   so the number gives way instead. */
+.mk-mark-n[data-mk-digits="2"] {
+  font-size: calc(var(--mk-n) * 0.9);
+  letter-spacing: -0.05em;
+}
+
+.mk-mark-n[data-mk-digits="3"] {
+  font-size: calc(var(--mk-n) * 0.78);
+  letter-spacing: -0.06em;
+}
+
+:is(.mk-mark, .mk-rowleaf)[data-form="outline"] .mk-mark-n {
+  color: var(--mk-paint);
+}
+
+/* A half-filled leaf puts the waterline through the number, so the glyph is
+   two colours at once and legible in neither. Stroking it in the paint, under
+   the fill, sits it on its own colour wherever the waterline happens to fall. */
+:is(.mk-mark, .mk-rowleaf)[data-form="partial"] .mk-mark-n {
+  paint-order: stroke fill;
+  -webkit-text-stroke: 2.5px var(--mk-paint);
+}
+
+/* A weak anchor thins the fill and leaves the ring at full strength: how sure
+   the anchor is and how far through its life the comment is are two signals,
+   and one washing out the other is how they stop being two. */
+.mk-mark[data-confidence="weak"] .mk-leaf-body {
+  fill-opacity: 0.42;
+}
+
+.mk-mark[data-confidence="weak"] .mk-leaf-edge {
+  fill-opacity: 1;
+}
+
+@keyframes mk-mark-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--mk-rise-mark));
+  }
+}
+`;
+}
+function ringCss() {
+	return `
+.mk-ring {
+  ${POSITIONED}
+  width: var(--mk-w);
+  height: var(--mk-h);
+  border-radius: var(--mk-r-sm);
+  pointer-events: none;
+  box-shadow:
+    0 0 0 2px var(--mk-accent),
+    0 0 0 7px color-mix(in oklab, var(--mk-accent) 20%, transparent);
+  animation: mk-ring-in var(--mk-dur-fade) var(--mk-ease-surface);
+  transition: opacity var(--mk-dur-fade) var(--mk-ease-surface);
+}
+
+.mk-ring[data-mk-moving] {
+  will-change: transform;
+}
+
+.mk-ring[data-mk-state="hovered"] {
+  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--mk-accent) 60%, transparent);
+}
+
+/* A passage is its own lines and nothing else: the box around them is the
+   paragraph, and outlining that says the comment is on the paragraph. */
+.mk-ring[data-mk-passage="true"] {
+  box-shadow: none;
+}
+
+/* A region is an area, not a thing: it is filled as well as outlined, in the
+   picker's own band, so what a reviewer drew is what they get back. It has no
+   outer halo — the halo reads as a margin around an element, and there is no
+   element here to have one. */
+.mk-ring[data-mk-region="true"] {
+  border-radius: var(--mk-r-xs);
+  background: color-mix(in oklab, var(--mk-accent) 18%, transparent);
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+
+/* Anchored to the ring's edge rather than offset by a number: the label is two
+   lines in developer detail and one line the rest of the time. */
+.mk-ring-label {
+  position: absolute;
+  bottom: 100%;
+  left: -2px;
+  display: flex;
+  flex-direction: column;
+  max-width: 260px;
+  margin-bottom: 3px;
+  padding: 1px 7px 2px;
+  border-radius: var(--mk-r-xs) var(--mk-r-xs) var(--mk-r-xs) 0;
+  background: var(--mk-accent);
+  color: var(--mk-accent-ink);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.mk-ring-label[data-mk-below] {
+  bottom: auto;
+  top: 100%;
+  margin: 3px 0 0;
+  border-radius: 0 var(--mk-r-xs) var(--mk-r-xs) var(--mk-r-xs);
+}
+
+.mk-ring-name,
+.mk-ring-note {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Quieter than the name: it is where to go next, not what this is. */
+.mk-ring-note {
+  font-size: 9px;
+  font-weight: 500;
+  color: color-mix(in oklab, var(--mk-accent-ink) 78%, transparent);
+}
+
+/* The wash a reviewer reads as "this text": the same green the ring is drawn
+   in, at the weight a selection has, so the passage is what is highlighted
+   and the element around it is not. */
+.mk-ring-run {
+  ${POSITIONED}
+  width: var(--mk-w);
+  height: var(--mk-h);
+  border-radius: 3px;
+  background: color-mix(in oklab, var(--mk-accent) 32%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--mk-accent) 45%, transparent);
+}
+
+@keyframes mk-ring-in {
+  from {
+    opacity: 0;
+  }
+}
+`;
+}
+function avatarCss() {
+	return `
+.mk-avatar {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+}
+
+.mk-avatar .mk-leaf-body {
+  stroke-width: 2;
+}
+
+.mk-avatar-ini {
+  position: relative;
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--mk-ink);
+  transform: translateY(0.5px);
+}
+
+.mk-avatar[data-provenance="client"] .mk-leaf-body {
+  fill-opacity: 0.4;
+  stroke-width: 2.5;
+}
+
+.mk-avatar[data-provenance="client"] .mk-avatar-ini {
+  color: var(--mk-fg);
+}
+
+.mk-avatar[data-provenance="guest"] .mk-avatar-ini {
+  color: var(--mk-paint);
+}
+`;
+}
+function cullCss() {
+	return `
+.mk-mark[data-mk-off],
+.mk-ring[data-mk-off] {
+  visibility: hidden;
+}
+`;
+}
+function marksCss() {
+	return [
+		paintCss(),
+		leafCss(),
+		markCss(),
+		ringCss(),
+		avatarCss(),
+		cullCss()
+	].map((block) => block.trim()).join("\n\n");
+}
+//#endregion
+export { marksCss };

package/dist/marks/frame.d.ts

@@ -0,0 +1,25 @@
+//#region src/marks/frame.d.ts
+/**
+ * The scroll loop: one animation frame per scrolled frame, for everything.
+ *
+ * Marks and the ring are absolutely positioned over a page that moves under
+ * them, so they are measured and moved per frame rather than transitioned —
+ * a transition on a position lags a frame behind the page and reads as broken.
+ * One loop repaints all of them, because two loops disagree on a slow frame.
+ */
+/** What a loop repaints, told whether the page is currently moving under it. */
+export type Paint = (moving: boolean) => void;
+/**
+ * Repaints on scroll and resize, coalesced into one frame. `scrollend` is what
+ * drops `will-change` again: a compositor layer held forever costs memory on a
+ * page Maple is only a guest on.
+ */
+export declare function startFrameLoop(view: Window, paint: Paint): () => void;
+/**
+ * Runs a loop for as long as a part is mounted, and repaints after every
+ * render, so nothing is ever seen at the position React first rendered it at.
+ */
+export declare function useFrameLoop(part: string, paint: Paint): void;
+/** The viewport height a cull is measured against. */
+export declare function viewportHeight(container: Element): number;
+//#endregion

package/dist/marks/frame.js

@@ -0,0 +1,53 @@
+import { useMapleUi } from "../context.js";
+import { useLayoutEffect, useRef } from "react";
+//#region src/marks/frame.ts
+const PASSIVE = {
+	capture: true,
+	passive: true
+};
+function startFrameLoop(view, paint) {
+	let frame = 0;
+	let moving = false;
+	const run = () => {
+		frame = 0;
+		paint(moving);
+	};
+	const schedule = () => {
+		if (frame === 0) frame = view.requestAnimationFrame(run);
+	};
+	const onScroll = () => {
+		moving = true;
+		schedule();
+	};
+	const onSettle = () => {
+		moving = false;
+		schedule();
+	};
+	view.addEventListener("scroll", onScroll, PASSIVE);
+	view.addEventListener("scrollend", onSettle, PASSIVE);
+	view.addEventListener("resize", schedule, PASSIVE);
+	return () => {
+		view.removeEventListener("scroll", onScroll, PASSIVE);
+		view.removeEventListener("scrollend", onSettle, PASSIVE);
+		view.removeEventListener("resize", schedule, PASSIVE);
+		if (frame !== 0) view.cancelAnimationFrame(frame);
+	};
+}
+function useFrameLoop(part, paint) {
+	const { container } = useMapleUi(part);
+	const latest = useRef(paint);
+	useLayoutEffect(() => {
+		latest.current = paint;
+		paint(false);
+	});
+	useLayoutEffect(() => {
+		const view = container.ownerDocument.defaultView;
+		if (!view) return;
+		return startFrameLoop(view, (moving) => latest.current(moving));
+	}, [container]);
+}
+function viewportHeight(container) {
+	return container.ownerDocument.defaultView?.innerHeight ?? 0;
+}
+//#endregion
+export { startFrameLoop, useFrameLoop, viewportHeight };

package/dist/marks/geometry.d.ts

@@ -0,0 +1,55 @@
+//#region src/marks/geometry.d.ts
+/**
+ * Where a mark goes and how big its half-fill is.
+ *
+ * The collision resolver steps a colliding mark sideways at most three times:
+ * a fourth is further from its anchor than it is worth. Hit areas are 40px and
+ * the step is wider than the visible mark, so two marks' hit areas never
+ * overlap — which is half of what the resolver exists for.
+ */
+/** The visible mark. The hit area is larger and extended with a pseudo-element. */
+export declare const MARK_SIZE_PX = 38;
+/** The smallest a control may be to be hit reliably with a thumb. */
+export declare const MARK_HIT_PX = 40;
+/** A mark sits just outside its anchor's top-left corner. */
+export declare const MARK_OFFSET_PX = 16;
+/** Two candidates collide when both axes are inside this: one whole hit area. */
+export declare const COLLISION_GAP_PX = 40;
+/** How far a colliding mark steps sideways before trying again. */
+export declare const COLLISION_STEP_PX = 42;
+/** Three tries. A fourth lands further from the anchor than it is worth. */
+export declare const COLLISION_MAX_TRIES = 3;
+/** The clip rectangle that gives the half-filled form its horizontal waterline. */
+export interface Waterline {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+/**
+ * The clip sits outside the rotation, so the waterline stays horizontal on
+ * screen while the leaf stays tilted. A fraction outside 0..1 is clamped.
+ */
+export declare function waterline(fraction: number): Waterline;
+/** A box in viewport coordinates, which is what the overlay's layer is in. */
+export interface Box {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+/** The overlay is `position: fixed`, so a client rect is already its geometry. */
+export declare function ringBox(rect: Box): Box;
+/** One quote run, placed inside the ring rather than against the viewport. */
+export declare function runBox(run: Box, rect: Box): Box;
+/** Far enough above or below the viewport that drawing it is wasted work. */
+export declare function culled(rect: Box, viewportHeight: number): boolean;
+/** Where a mark wants to be: just outside its anchor's top-left corner. */
+export declare function markSpot(rect: Box): Box;
+/**
+ * Steps a colliding mark sideways until it clears every mark already placed.
+ * It gives up after three: a fourth is further from its anchor than it is
+ * worth, and a mark that has wandered names the wrong thing.
+ */
+export declare function placeMark(wanted: Box, taken: readonly Box[]): Box;
+//#endregion

package/dist/marks/geometry.js

@@ -0,0 +1,61 @@
+//#region src/marks/geometry.ts
+const MARK_SIZE_PX = 38;
+const MARK_HIT_PX = 40;
+const MARK_OFFSET_PX = 16;
+const COLLISION_GAP_PX = 40;
+const COLLISION_STEP_PX = 42;
+const COLLISION_MAX_TRIES = 3;
+const BOX = 78;
+const BOTTOM = 71;
+const ORIGIN = -7;
+function waterline(fraction) {
+	const height = BOX * Math.min(Math.max(fraction, 0), 1);
+	return {
+		x: ORIGIN,
+		y: BOTTOM - height,
+		width: BOX,
+		height
+	};
+}
+const RING_INSET_PX = 3;
+const CULL_PX = 60;
+function ringBox(rect) {
+	return {
+		x: Math.round(rect.x - RING_INSET_PX),
+		y: Math.round(rect.y - RING_INSET_PX),
+		width: Math.round(rect.width + 6),
+		height: Math.round(rect.height + 6)
+	};
+}
+function runBox(run, rect) {
+	return {
+		x: Math.round(run.x - rect.x + RING_INSET_PX),
+		y: Math.round(run.y - rect.y + RING_INSET_PX),
+		width: Math.round(run.width),
+		height: Math.round(run.height)
+	};
+}
+function culled(rect, viewportHeight) {
+	return rect.y + rect.height < -60 || rect.y > viewportHeight + CULL_PX;
+}
+function markSpot(rect) {
+	return {
+		x: Math.max(2, Math.round(rect.x - 16)),
+		y: Math.max(2, Math.round(rect.y - 16)),
+		width: 38,
+		height: 38
+	};
+}
+function collides(spot, taken) {
+	return taken.some((other) => Math.abs(other.x - spot.x) < 40 && Math.abs(other.y - spot.y) < 40);
+}
+function placeMark(wanted, taken) {
+	let spot = wanted;
+	for (let tries = 0; tries < 3 && collides(spot, taken); tries += 1) spot = {
+		...spot,
+		x: spot.x + 42
+	};
+	return spot;
+}
+//#endregion
+export { COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, MARK_HIT_PX, MARK_OFFSET_PX, MARK_SIZE_PX, culled, markSpot, placeMark, ringBox, runBox, waterline };