@cueplusplus/ui 0.13.0

package/dist/layout/timeline.js

@@ -0,0 +1,63 @@
+import { cn } from "../lib/cn.js";
+import { StatusDot } from "../primitives/status-dot.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+/**
+* A vertical run of events on one rail: a run log, a cue history, a deploy
+* trail.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Timeline.Root>
+*   <Timeline.Item>
+*     <Timeline.Marker tone="ok" label="Patched" />
+*     <Timeline.Content>Patched universe 1</Timeline.Content>
+*   </Timeline.Item>
+*   <Timeline.Item>
+*     <Timeline.Marker tone="busy" label="Focusing" pulse />
+*     <Timeline.Content>Focusing front truss</Timeline.Content>
+*   </Timeline.Item>
+* </Timeline.Root>
+*/
+const Timeline = {
+	Root: React.forwardRef(function TimelineRoot({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("ol", {
+			ref,
+			"data-slot": "timeline",
+			className: cn("m-0 flex list-none flex-col p-0", className),
+			...elementProps
+		});
+	}),
+	Item: React.forwardRef(function TimelineItem({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("li", {
+			ref,
+			"data-slot": "timeline-item",
+			className: cn("relative flex gap-(--cue-space-4) pb-(--cue-space-5) last:pb-0", "before:absolute before:top-(--cue-icon-sm) before:bottom-0 before:left-[calc(var(--cue-icon-sm)/2)] before:w-px before:-translate-x-1/2 before:bg-border before:content-[''] last:before:hidden", className),
+			...elementProps
+		});
+	}),
+	Marker: React.forwardRef(function TimelineMarker({ className, tone, label, pulse, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("span", {
+			ref,
+			"data-slot": "timeline-marker",
+			className: cn("relative z-10 flex size-icon-sm shrink-0 items-center justify-center rounded-full bg-bg", className),
+			...elementProps,
+			children: /* @__PURE__ */ jsx(StatusDot, {
+				tone,
+				label,
+				pulse
+			})
+		});
+	}),
+	Content: React.forwardRef(function TimelineContent({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "timeline-content",
+			className: cn("flex min-w-0 flex-1 flex-col gap-(--cue-space-1) font-mono text-(length:--cue-text-ui) text-fg", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Timeline };

package/dist/lib/aria-class.js

@@ -0,0 +1,24 @@
+import { cn } from "./cn.js";
+//#region src/lib/aria-class.ts
+/**
+* Bridge a React Aria `className` — string *or* render prop — through `cn`.
+*
+* Every other component in this system merges the caller's `className` over the
+* recipe with `cn`, which is what makes `className` a real override instead of
+* a specificity fight. React Aria's render-prop form breaks that: the value is
+* a function, so there is nothing to merge until it is called. This wraps the
+* function instead, deferring the merge to render time and keeping the same
+* last-one-wins contract on both shapes.
+*
+* @param base - The component's own recipe.
+* @param className - Whatever the caller passed, if anything.
+* @returns A string when both sides are strings, otherwise a render prop.
+* @example
+* <RACColorArea className={ariaClassName(colorAreaClasses, className)} />
+*/
+function ariaClassName(base, className) {
+	if (typeof className === "function") return (values) => cn(base, className(values));
+	return cn(base, className);
+}
+//#endregion
+export { ariaClassName };

package/dist/lib/cn.js

@@ -0,0 +1,18 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/cn.ts
+/**
+* Join class names and resolve conflicting Tailwind utilities, last one wins.
+*
+* Every component in the system funnels its computed classes plus the caller's
+* `className` through `cn`, which is what makes `className` a real override
+* instead of a fight with specificity.
+*
+* @param inputs - Any clsx-compatible values (strings, arrays, condition maps).
+* @returns The merged, de-conflicted class string.
+* @example
+* cn("h-4 px-2", isLarge && "h-8") // "px-2 h-8" when isLarge
+*/
+const cn = (...inputs) => twMerge(clsx(inputs));
+//#endregion
+export { cn };

package/dist/lib/compose.js

@@ -0,0 +1,38 @@
+"use client";
+import * as React from "react";
+//#region src/lib/compose.ts
+/**
+* Point several refs at the same node.
+*
+* A component that forwards a ref to a DOM element but also needs that element
+* itself — to measure it, or to ask whether an event landed inside it — cannot
+* simply pass the forwarded ref through. This composes them into one callback
+* ref that writes to all of them.
+*
+* @param refs Any mix of callback refs, ref objects, `null` and `undefined`.
+* @returns A callback ref to hand to the element.
+* @example
+* const popupRef = React.useRef<HTMLDivElement | null>(null);
+* <Popup ref={composeRefs(forwardedRef, popupRef)} />
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref !== null && ref !== void 0) ref.current = node;
+	};
+}
+/**
+* {@link composeRefs}, memoised on the refs it was given.
+*
+* Use this in render: a fresh callback ref on every render makes React detach
+* and re-attach the node (`null` then the element), which would tear down
+* anything keyed off the ref each time the component re-renders.
+*
+* @example
+* const ref = useComposedRefs(forwardedRef, popupRef);
+*/
+function useComposedRefs(...refs) {
+	return React.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+export { composeRefs, useComposedRefs };

package/dist/lib/cva.d.ts

@@ -0,0 +1,18 @@
+import { ClassValue, clsx } from "clsx";
+//#region src/lib/cva.d.ts
+type ClassPropKey = "class" | "className";
+type ClassProp = {
+  class: ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className: ClassValue;
+} | {
+  class?: never;
+  className?: never;
+};
+type OmitUndefined<T> = T extends undefined ? never : T;
+/** The prop surface of a `cva` recipe, minus the class escape hatches. */
+type VariantProps<Component extends (...args: never[]) => unknown> = Omit<OmitUndefined<Parameters<Component>[0]>, ClassPropKey>;
+//#endregion
+export { ClassProp, ClassPropKey, type ClassValue, OmitUndefined, VariantProps };

package/dist/lib/cva.js

@@ -0,0 +1,65 @@
+import { clsx } from "clsx";
+//#region src/lib/cva.ts
+/**
+* Copyright 2022 Joe Bell. All rights reserved.
+*
+* This file is licensed to you under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with the
+* License. You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations under
+* the License.
+*/
+/** Upstream CVA re-exports clsx as `cx`; kept for API parity. */
+const cx = clsx;
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+/**
+* Build a class-name recipe: a base string plus a variant map, compound
+* variants and defaults.
+*
+* @param base - Classes applied to every call.
+* @param config - `variants`, `compoundVariants` and `defaultVariants`.
+* @returns A function taking the variant props (plus `class`/`className`) and
+* returning the resolved class string.
+* @example
+* const chip = cva("inline-flex", {
+*   variants: { tone: { ok: "text-ok", danger: "text-danger" } },
+*   defaultVariants: { tone: "ok" },
+* });
+* chip({ tone: "danger" }); // "inline-flex text-danger"
+*/
+const cva = (base, config) => (props) => {
+	if (config?.variants == null) return cx(base, props?.class, props?.className);
+	const { variants, defaultVariants } = config;
+	const getVariantClassNames = Object.keys(variants).map((variant) => {
+		const variantProp = props?.[variant];
+		const defaultVariantProp = defaultVariants?.[variant];
+		if (variantProp === null) return null;
+		const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+		return variants[variant][variantKey];
+	});
+	const propsWithoutUndefined = props && Object.entries(props).reduce((acc, [key, value]) => {
+		if (value === void 0) return acc;
+		acc[key] = value;
+		return acc;
+	}, {});
+	const getCompoundVariantClassNames = config.compoundVariants?.reduce((acc, { class: cvClass, className: cvClassName, ...compoundVariantOptions }) => Object.entries(compoundVariantOptions).every(([key, value]) => {
+		const merged = {
+			...defaultVariants,
+			...propsWithoutUndefined
+		};
+		return Array.isArray(value) ? value.includes(merged[key]) : merged[key] === value;
+	}) ? [
+		...acc,
+		cvClass,
+		cvClassName
+	] : acc, []);
+	return cx(base, getVariantClassNames, getCompoundVariantClassNames, props?.class, props?.className);
+};
+//#endregion
+export { cva, cx };

package/dist/midi/_notes.d.ts

@@ -0,0 +1,101 @@
+//#region src/midi/_notes.d.ts
+/**
+ * The note layer: what a MIDI number is called, whether it is a black key, and
+ * where it sits on a drawn keyboard.
+ *
+ * Kept out of the component because key geometry is arithmetic, not rendering —
+ * a sequencer wants to hit-test a pointer against a keyboard it has not drawn
+ * yet, and a test wants to check the layout without a DOM.
+ *
+ * The geometry is ported from ableton-sync verbatim: a 16px white key, a 10px
+ * black key, and the five black keys of an octave at 11, 27, 59, 75 and 91 px
+ * from the octave's left edge. Those offsets are not arbitrary — they are what
+ * makes the black keys sit over the *seams* between white keys rather than over
+ * their centres, which is the difference between a keyboard and a barcode.
+ *
+ * @internal Not part of the public API surface beyond the `/midi` barrel.
+ */
+/** How many notes MIDI addresses: 0 (C-2) through 127 (G8). */
+declare const MIDI_NOTES = 128;
+/** The pitch classes, sharp-spelled — the spelling a piano roll uses. */
+declare const NOTE_NAMES: readonly ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+/** White key width in px at the 16px root. */
+declare const WHITE_KEY_PX = 16;
+/** Black key width in px at the 16px root. */
+declare const BLACK_KEY_PX = 10;
+/** One octave's width in px at the 16px root. */
+declare const OCTAVE_PX: number;
+/** An inclusive run of notes: the selection, or the window drawn on screen. */
+interface NoteRange {
+  /** First note, inclusive. */
+  start: number;
+  /** Last note, inclusive. */
+  end: number;
+}
+/** One drawn key. */
+interface PianoKey {
+  /** MIDI note number. */
+  note: number;
+  /** What to print or announce: `"C#3"`. */
+  name: string;
+  /** Whether it is one of the five raised keys. */
+  black: boolean;
+  /** Distance from the board's left edge, in px at the 16px root. */
+  left: number;
+  /** Key width in px at the 16px root. */
+  width: number;
+}
+/** A window of the note space, placed. */
+interface KeyboardLayout extends NoteRange {
+  /** Board width in px at the 16px root. */
+  width: number;
+  /** The keys, whites first: the blacks are painted over the seams. */
+  keys: PianoKey[];
+}
+/** Whether a note is one of the five raised keys of its octave. */
+declare function isBlackKey(note: number): boolean;
+/**
+ * The note's name and octave: `60` → `"C3"`.
+ *
+ * @param note - MIDI note number.
+ */
+declare function noteName(note: number): string;
+/**
+ * The stretch of the note space a keyboard should draw for a given selection.
+ *
+ * Always a whole number of octaves starting on a C, because a keyboard that
+ * starts on F# is unreadable — the pattern of blacks is how a player finds
+ * their place. The window is centred on the selection and then clamped, so
+ * dragging an edge past the visible end scrolls the board rather than losing
+ * the marker.
+ *
+ * @param range - The selection to centre on.
+ * @param octaves - How many octaves to show.
+ */
+declare function keyboardWindow(range: NoteRange, octaves: number): NoteRange;
+/**
+ * Place every key of a window.
+ *
+ * Whites come first in the returned array and blacks second, which is the paint
+ * order: a black key overlaps the two whites it sits between, and in a flat DOM
+ * the later element wins. Positions are px at the 16px root, the same contract
+ * the instruments group uses — the component converts to `rem`.
+ *
+ * @param window - The stretch to draw. Expected to start on a C.
+ */
+declare function keyboardLayout(window: NoteRange): KeyboardLayout;
+/**
+ * Which note an x offset lands on, with the black keys winning the overlap.
+ *
+ * The order matters and is the whole subtlety of a keyboard hit test: a black
+ * key is drawn *over* the white keys either side of it, so an offset inside a
+ * black key belongs to the black key even though it is also inside a white one.
+ * Testing the whites first would make the sharps unclickable.
+ *
+ * @param x - Offset from the board's left edge, in px at the 16px root.
+ * @param window - The stretch on screen.
+ * @returns A note inside `window`; offsets past either edge clamp to it.
+ */
+declare function noteAtOffset(x: number, window: NoteRange): number;
+//#endregion
+export { BLACK_KEY_PX, KeyboardLayout, MIDI_NOTES, NOTE_NAMES, NoteRange, OCTAVE_PX, PianoKey, WHITE_KEY_PX, isBlackKey, keyboardLayout, keyboardWindow, noteAtOffset, noteName };

package/dist/midi/_notes.js

@@ -0,0 +1,183 @@
+//#region src/midi/_notes.ts
+/**
+* The note layer: what a MIDI number is called, whether it is a black key, and
+* where it sits on a drawn keyboard.
+*
+* Kept out of the component because key geometry is arithmetic, not rendering —
+* a sequencer wants to hit-test a pointer against a keyboard it has not drawn
+* yet, and a test wants to check the layout without a DOM.
+*
+* The geometry is ported from ableton-sync verbatim: a 16px white key, a 10px
+* black key, and the five black keys of an octave at 11, 27, 59, 75 and 91 px
+* from the octave's left edge. Those offsets are not arbitrary — they are what
+* makes the black keys sit over the *seams* between white keys rather than over
+* their centres, which is the difference between a keyboard and a barcode.
+*
+* @internal Not part of the public API surface beyond the `/midi` barrel.
+*/
+/** How many notes MIDI addresses: 0 (C-2) through 127 (G8). */
+const MIDI_NOTES = 128;
+/** Semitones in an octave. */
+const SEMITONES = 12;
+/** The pitch classes, sharp-spelled — the spelling a piano roll uses. */
+const NOTE_NAMES = [
+	"C",
+	"C#",
+	"D",
+	"D#",
+	"E",
+	"F",
+	"F#",
+	"G",
+	"G#",
+	"A",
+	"A#",
+	"B"
+];
+/**
+* Octave numbering: middle C (note 60) is C3.
+*
+* This is the sequencer convention (Ableton Live, Logic), not the Yamaha one
+* where 60 is C4. It is ported rather than chosen: a range typed against the
+* host's own display must read the same here, and being one octave out is the
+* kind of bug nobody notices until a show.
+*/
+const OCTAVE_OFFSET = 2;
+/** White key width in px at the 16px root. */
+const WHITE_KEY_PX = 16;
+/** Black key width in px at the 16px root. */
+const BLACK_KEY_PX = 10;
+/** One octave's width in px at the 16px root. */
+const OCTAVE_PX = 112;
+/** Semitone offsets of the white keys, in playing order. */
+const WHITE_SEMITONES = [
+	0,
+	2,
+	4,
+	5,
+	7,
+	9,
+	11
+];
+/** Left edge of each black key within its octave, in px at the 16px root. */
+const BLACK_LEFT = {
+	1: 11,
+	3: 27,
+	6: 59,
+	8: 75,
+	10: 91
+};
+/** Whether a note is one of the five raised keys of its octave. */
+function isBlackKey(note) {
+	return BLACK_LEFT[modulo(note, SEMITONES)] !== void 0;
+}
+/**
+* The note's name and octave: `60` → `"C3"`.
+*
+* @param note - MIDI note number.
+*/
+function noteName(note) {
+	return `${NOTE_NAMES[modulo(note, SEMITONES)]}${Math.floor(note / SEMITONES) - OCTAVE_OFFSET}`;
+}
+/**
+* The stretch of the note space a keyboard should draw for a given selection.
+*
+* Always a whole number of octaves starting on a C, because a keyboard that
+* starts on F# is unreadable — the pattern of blacks is how a player finds
+* their place. The window is centred on the selection and then clamped, so
+* dragging an edge past the visible end scrolls the board rather than losing
+* the marker.
+*
+* @param range - The selection to centre on.
+* @param octaves - How many octaves to show.
+*/
+function keyboardWindow(range, octaves) {
+	const span = Math.max(1, Math.round(octaves)) * SEMITONES;
+	if (span >= 128) return {
+		start: 0,
+		end: 127
+	};
+	const centre = Math.floor((range.start + range.end) / 2);
+	const wanted = Math.floor(centre / SEMITONES) - Math.floor((octaves - 1) / 2);
+	const last = Math.floor((128 - span) / SEMITONES);
+	const first = Math.min(Math.max(wanted, 0), last);
+	return {
+		start: first * SEMITONES,
+		end: Math.min(127, first * SEMITONES + span - 1)
+	};
+}
+/**
+* Place every key of a window.
+*
+* Whites come first in the returned array and blacks second, which is the paint
+* order: a black key overlaps the two whites it sits between, and in a flat DOM
+* the later element wins. Positions are px at the 16px root, the same contract
+* the instruments group uses — the component converts to `rem`.
+*
+* @param window - The stretch to draw. Expected to start on a C.
+*/
+function keyboardLayout(window) {
+	const whites = [];
+	const blacks = [];
+	let width = 0;
+	for (let note = window.start; note <= window.end; note += 1) {
+		const black = isBlackKey(note);
+		const key = {
+			note,
+			name: noteName(note),
+			black,
+			left: keyLeft(note, window.start),
+			width: black ? 10 : 16
+		};
+		if (black) blacks.push(key);
+		else {
+			whites.push(key);
+			width = Math.max(width, key.left + key.width);
+		}
+	}
+	return {
+		...window,
+		width,
+		keys: [...whites, ...blacks]
+	};
+}
+/**
+* Which note an x offset lands on, with the black keys winning the overlap.
+*
+* The order matters and is the whole subtlety of a keyboard hit test: a black
+* key is drawn *over* the white keys either side of it, so an offset inside a
+* black key belongs to the black key even though it is also inside a white one.
+* Testing the whites first would make the sharps unclickable.
+*
+* @param x - Offset from the board's left edge, in px at the 16px root.
+* @param window - The stretch on screen.
+* @returns A note inside `window`; offsets past either edge clamp to it.
+*/
+function noteAtOffset(x, window) {
+	const clamped = Math.max(0, x);
+	const octave = Math.floor(clamped / 112);
+	const inOctave = clamped - octave * 112;
+	for (const [semitone, left] of Object.entries(BLACK_LEFT)) if (inOctave >= left && inOctave < left + 10) return clampNote(window.start + octave * SEMITONES + Number(semitone), window);
+	const index = Math.min(6, Math.floor(inOctave / 16));
+	return clampNote(window.start + octave * SEMITONES + WHITE_SEMITONES[index], window);
+}
+/** Left edge of a key within a board that starts at `first`. */
+function keyLeft(note, first) {
+	const relative = note - first;
+	const octave = Math.floor(relative / SEMITONES);
+	const semitone = modulo(relative, SEMITONES);
+	const base = octave * 112;
+	const black = BLACK_LEFT[semitone];
+	if (black !== void 0) return base + black;
+	return base + WHITE_SEMITONES.indexOf(semitone) * 16;
+}
+/** Keep a note inside a window. */
+function clampNote(note, window) {
+	return Math.min(window.end, Math.max(window.start, note));
+}
+/** Remainder that stays positive for negative input, unlike `%`. */
+function modulo(value, divisor) {
+	return (value % divisor + divisor) % divisor;
+}
+//#endregion
+export { BLACK_KEY_PX, MIDI_NOTES, NOTE_NAMES, OCTAVE_PX, WHITE_KEY_PX, isBlackKey, keyboardLayout, keyboardWindow, noteAtOffset, noteName };

package/dist/midi/_ruler.d.ts

@@ -0,0 +1,100 @@
+import { TimeSignature } from "./_time.js";
+//#region src/midi/_ruler.d.ts
+/**
+ * Ruler arithmetic: how far apart the ticks go at a given zoom, and which of
+ * them are actually on screen.
+ *
+ * Both halves are pure, and both are the part of a timeline that is easy to get
+ * subtly wrong — a ruler that re-picks its interval one frame late flickers, and
+ * a ruler that renders every tick of an eight-thousand-beat song locks the tab
+ * on the first scroll.
+ *
+ * @internal `chooseInterval` and `rulerTicks` are re-exported from the `/midi`
+ * barrel; the module itself is not public.
+ */
+/**
+ * The pixel spacing a tick aims for: one centimetre at a nominal 96 DPI.
+ *
+ * A centimetre is the density a ruler stays *readable* at — close enough to
+ * count by eye, far enough apart that the labels do not collide. Ported from
+ * ableton-sync, which then multiplied the chosen interval by four "to make
+ * markers 4x less dense", i.e. targeted 4 cm while claiming to target 1. The
+ * multiplier is gone; callers who want a sparser ruler pass a bigger target.
+ */
+declare const TICK_TARGET_PX = 37.8;
+/** What is on screen, in the ruler's own pixel coordinates. */
+interface RulerViewport {
+  /** Distance from the start of the timeline to the left edge of the view. */
+  offset: number;
+  /** Width of the view. */
+  width: number;
+}
+/** One placed tick. */
+interface RulerTick {
+  /** Position in quarter-note beats from the start of the song. */
+  beat: number;
+  /** Distance from the start of the track, in px. */
+  left: number;
+  /** Bar number, counting from 1. */
+  bar: number;
+  /** Beat within the bar, counting from 1. */
+  beatInBar: number;
+  /** Sixteenth within the beat, counting from 0. */
+  sixteenth: number;
+  /** Whether this tick is a bar line. */
+  barStart: boolean;
+  /** What to print: the bar number on a bar line, the subdivision otherwise. */
+  label: string;
+}
+/** A ruled timeline. */
+interface RulerTicks {
+  /** Beats between ticks at this zoom. */
+  interval: number;
+  /** Full track width in px. */
+  width: number;
+  /** The ticks that are on screen, in time order. */
+  ticks: RulerTick[];
+}
+/** Everything {@link rulerTicks} needs to rule a timeline. */
+interface RulerTicksOptions {
+  /** Length of the song in quarter-note beats. */
+  totalBeats: number;
+  /** Zoom: px per quarter-note beat. */
+  pxPerBeat: number;
+  /** What is on screen. Omitted, the whole song is ruled. */
+  viewport?: RulerViewport;
+  /** The signature in force. Defaults to 4/4. */
+  timeSignature?: TimeSignature;
+  /** Pixel spacing to aim for. Defaults to {@link TICK_TARGET_PX}. */
+  targetPx?: number;
+  /** How far past the viewport to keep ruling. Defaults to `120`. */
+  bufferPx?: number;
+}
+/**
+ * How many beats apart the ticks should be at this zoom.
+ *
+ * The candidates are musical divisions only — sixteenth, eighth, quarter, half,
+ * then the bar and multiples of it. A ruler that ticked every 3.7 beats because
+ * that is what the arithmetic wanted would be unreadable; the whole point of a
+ * musical ruler is that the numbers on it are numbers a musician counts in.
+ *
+ * @param pxPerBeat - Current zoom.
+ * @param beatsPerBar - Length of a bar in quarter-note beats.
+ * @param targetPx - Spacing to aim for. Defaults to {@link TICK_TARGET_PX}.
+ * @returns The finest interval whose spacing reaches the target, or the coarsest
+ *   candidate when even that does not — a ruler always ticks somewhere.
+ */
+declare function chooseInterval(pxPerBeat: number, beatsPerBar: number, targetPx?: number): number;
+/**
+ * The ticks worth rendering, and where they go.
+ *
+ * Culling is against a **pixel** buffer either side of the viewport, not a beat
+ * buffer. The ported version kept fifty beats of margin, which at a tight zoom
+ * is a thousand pixels of work nobody will scroll to and at a loose zoom is a
+ * few pixels — the one thing a buffer must be is a constant amount of *screen*.
+ *
+ * @param options - Song length, zoom, and what is on screen.
+ */
+declare function rulerTicks(options: RulerTicksOptions): RulerTicks;
+//#endregion
+export { RulerTick, RulerTicks, RulerTicksOptions, RulerViewport, TICK_TARGET_PX, chooseInterval, rulerTicks };