lintje 0.1.1

package/dist-elements/types/components/charts/kpi/kpi.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`). Rich
+ * values go in as properties. The value counts up from zero once 35 % of the tile is in view,
+ * and not under `prefers-reduced-motion`. Events: none.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import '../../../primitives/status-dot/status-dot.js';
+import '../../../primitives/skeleton/skeleton.js';
+import type { KpiItem, KpiState, KpiTrend, KpiVariable } from '../../../types.js';
+export declare class LintjeKpi extends LintjeGridItemElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    label: string;
+    /** An icon file name, drawn before the label. Decorative; it stays in every state. */
+    icon?: string;
+    /** A string or number with one number in it counts up when the tile comes into view. */
+    value?: string | number;
+    suffix?: string;
+    /** One to three figures of the same variable, the current one first. Wins over `value`. */
+    items?: KpiItem[];
+    /** `row`: side by side, stacked below 360 px. `column`: stacked, period beside the value. */
+    layout: 'row' | 'column';
+    /** `primary`: the first figure at full size, the others smaller below a line. */
+    emphasis: 'equal' | 'primary';
+    /** Default `true`: bind as `.dividers=${false}`, an attribute cannot turn it off. */
+    dividers: boolean;
+    trend?: KpiTrend;
+    /** A line without an arrow, for when there is no direction. */
+    note?: string;
+    detail?: string;
+    /** A data colour's name (`DataColor`); `coverage` is the gray one. */
+    variable: KpiVariable;
+    state: KpiState;
+    index: number;
+    counting: (string | null)[];
+    private get figures();
+    private get reduced();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private startCount;
+    protected render(): TemplateResult;
+    private body;
+    /** Trend, note or state message, then the detail line; with `primary` the detail stands apart. */
+    private lines;
+    private trendLine;
+    /** The comparison figures of `primary` always form a row. */
+    private itemList;
+    private figure;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-kpi': LintjeKpi;
+    }
+}

package/dist-elements/types/components/charts/kpi-row/kpi-row.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<lintje-kpi-row>` — the KPI row: one grid, the KPIs staggered in from left to right.
+ *
+ * The grid and the KPIs share one shadow root, so `kpi-row.css` reaches the `<lintje-kpi>` hosts.
+ * `dividers` is set as a property: a boolean attribute can't turn off a `true` default.
+ * Events: none.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { type FrameSettings } from '../../../core/element.js';
+import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import '../kpi/kpi.js';
+import type { KpiRowData } from '../../../types.js';
+export declare class LintjeKpiRow extends LintjeGridItemElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    data?: KpiRowData | null;
+    protected get dataSettings(): FrameSettings | undefined;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-kpi-row': LintjeKpiRow;
+    }
+}

package/dist-elements/types/components/charts/note/note.d.ts

@@ -0,0 +1,17 @@
+/** `<lintje-note>` — the analyst's note ("Toelichting analist"). Events: none. */
+import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { type FrameSettings } from '../../../core/element.js';
+import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import type { NoteData } from '../../../types.js';
+export declare class LintjeNote extends LintjeGridItemElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    data?: NoteData | null;
+    protected get dataSettings(): FrameSettings | undefined;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-note': LintjeNote;
+    }
+}

package/dist-elements/types/components/chat/chat/chat.d.ts

@@ -0,0 +1,68 @@
+/**
+ * `<lintje-chat>` — a conversation with data; takes `ChatData`. The host owns the transport.
+ *
+ * An answer arrives by setting `data` again; keep the objects of what did not change so only
+ * the changed part is redrawn. It stands in the flow and scrolls with what scrolls around it —
+ * the page, or the nearest box that scrolls — and its question box stays in view at the bottom.
+ *
+ * Events: none of its own; its parts' events reach the host as they are (`lintje-message-send`,
+ * `lintje-answer-stop`, `lintje-sources-change`, `lintje-draft-change`) and, with the `turnId`,
+ * `lintje-suggestion-select`, `lintje-message-edit`, `lintje-answer-retry`,
+ * `lintje-answer-rate`, `lintje-strip-change`, `lintje-mark-select`, `lintje-row-click` and
+ * `lintje-sort-change`. The host replies: send adds a turn and answers it; message-edit asks
+ * again and drops that turn and all after it; strip-change answers again with the new assumption.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement, type FrameSettings } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+import '../chat-answer/chat-answer.js';
+import '../chat-composer/chat-composer.js';
+import '../chat-message/chat-message.js';
+import '../chat-suggestions/chat-suggestions.js';
+import type { ChatData } from '../../../types.js';
+export declare class LintjeChat extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    data?: ChatData | null;
+    /** The turn whose message is in its input frame, if any. */
+    editingId: string | null;
+    away: boolean;
+    /** The page scrolls the conversation, so a question sticks under the shell's pinned bar. */
+    paged: boolean;
+    /** Pixels from the end that count as away. */
+    static readonly AWAY = 120;
+    /** Pixels from the end that still count as standing at it. */
+    static readonly AT_END = 8;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The question that sticks above and the question box that sticks below would cover what the
+     * focus scrolls to (WCAG 2.4.11): the scroller keeps their height free, as the form's action
+     * bar does. Above, the tallest question that sticks, from where it sticks.
+     */
+    private reserveRoom;
+    /** How far the conversation's end lies below what its scroller shows. */
+    private beyond;
+    private toEnd;
+    private get composer();
+    private toLatest;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * A turn can take the focused control away: an edit that ends, or the edit button an answer
+     * that starts takes away. Once the turns have drawn, a focus that fell out goes to the field.
+     */
+    private keepFocus;
+    protected updated(changed: PropertyValues<this>): void;
+    protected get dataSettings(): FrameSettings | undefined;
+    private onEditingChange;
+    protected render(): TemplateResult | typeof nothing;
+    private renderTurns;
+    private renderStart;
+    private renderSources;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat': LintjeChat;
+    }
+}

package/dist-elements/types/components/chat/chat-answer/chat-answer.d.ts

@@ -0,0 +1,78 @@
+/**
+ * `<lintje-chat-answer>` — what the assistant answered, as a list of existing blocks.
+ *
+ * It draws none of the blocks itself; only the bold lead, strip, actions and follow-ups are its
+ * own. A block still to come is that block with `state: 'loading'`. Only the `current` answer
+ * can be retried, changed through its strip or followed up. The thumbs and "Gekopieerd" are
+ * the element's own state; the conversation is not stored.
+ *
+ * Events: `lintje-answer-retry` `{turnId}` and `lintje-answer-rate` `{turnId, rating, reason}`
+ * (`rating` is `'up'`, `'down'` or `null` when taken back; a `'down'` is followed by a second
+ * event once the reader picks a reason). The strip's, the suggestions' and the blocks' events
+ * pass through untouched.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+import '../../../primitives/icon-button/icon-button.js';
+import '../../../primitives/spinner/spinner.js';
+import '../../feedback/announcement/announcement.js';
+import '../../charts/chart-tile/chart-tile.js';
+import '../chat-strip/chat-strip.js';
+import '../chat-suggestions/chat-suggestions.js';
+import '../../tables/data-table/data-table.js';
+import '../../charts/kpi-row/kpi-row.js';
+import '../../content/prose/prose.js';
+import type { ChatAnswerState, ChatBlock, ChatStripData, ChatSuggestion } from '../../../types.js';
+export type ChatRating = 'up' | 'down';
+export declare class LintjeChatAnswer extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    state: ChatAnswerState;
+    /** The first sentence, drawn bold. */
+    lead?: string;
+    text?: string;
+    blocks?: ChatBlock[];
+    strip?: ChatStripData;
+    /** `streaming`: the step that is running. */
+    status?: string;
+    /** `error`: what went wrong, and the way out in words. */
+    error?: {
+        title?: string;
+        text: string;
+    };
+    /** The choices of `out-of-scope` and `needs-clarification`. */
+    choices?: ChatSuggestion[];
+    /** Suggested next questions; drawn on the current answer only. */
+    followUps?: ChatSuggestion[];
+    current: boolean;
+    /** The turn this answers; it comes back in the events. */
+    turnId?: string;
+    rating: ChatRating | null;
+    reasonGiven: boolean;
+    note: string;
+    /** The sentences of a streamed answer, spoken from a status region beside the text. */
+    spoken: string[];
+    disconnectedCallback(): void;
+    private get spokenText();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private get detail();
+    private get plainText();
+    /** The same words again are emptied first, so a screen reader hears them again. */
+    private say;
+    private copy;
+    private rate;
+    private giveReason;
+    private retry;
+    protected render(): TemplateResult;
+    private renderText;
+    private renderError;
+    private renderBlocks;
+    private renderActions;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat-answer': LintjeChatAnswer;
+    }
+}

package/dist-elements/types/components/chat/chat-composer/chat-composer.d.ts

@@ -0,0 +1,101 @@
+/**
+ * `<lintje-chat-composer>` — the question box: text field, source picker and split send button.
+ *
+ * The field is a plain-text `contenteditable`; the element never writes markup into it. Terms
+ * are painted with the CSS Custom Highlight API so typing, input methods and undo stay the
+ * browser's; without the API the field is unmarked. Terms come from `vocabulary` (matched while
+ * typing) or from the host's `draftTerms`, which win while the text is unchanged.
+ * The source selection is the host's; the draft, send key (in `localStorage`) and answer form
+ * are the element's own.
+ *
+ * Events: `lintje-message-send` `{text, terms, sources, form}`, `lintje-answer-stop`,
+ * `lintje-sources-change` `{ids}`, `lintje-draft-change` `{text}` (200 ms after the last key).
+ * In `variant="edit"` it sends `lintje-submit` `{text, terms}` and `lintje-cancel` instead, both
+ * not composed.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+import '../../../primitives/icon-button/icon-button.js';
+import '../../inputs/multiselect/multiselect.js';
+import '../../inputs/radio-group/radio-group.js';
+import type { ChatAnswerForm, ChatDraftTerms, ChatSourceData, ChatTermData } from '../../../types.js';
+export type ChatComposerVariant = 'ask' | 'edit';
+export type ChatSendKey = 'enter' | 'ctrl-enter';
+interface Caption {
+    left: number;
+    top: number;
+    kind: string;
+    certain: boolean;
+    /** The room up to the next caption on the same line; a longer caption is cut. */
+    room?: number;
+}
+export declare class LintjeChatComposer extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** `edit` is the frame a sent message is changed in: no picker, no split send. */
+    variant: ChatComposerVariant;
+    /** The text to start from. Setting it again replaces what stands in the field. */
+    text: string;
+    placeholder: string;
+    /** An answer is arriving: "Stoppen" stands in for the send button. */
+    busy: boolean;
+    /** The last question, which ↑ brings back into an empty field. */
+    recall?: string;
+    sendKey: ChatSendKey;
+    /** What kind of answer the reader asks for; it goes out with the question. */
+    form: ChatAnswerForm;
+    /** Sources given and none `selected`: sending is off. The host sets them again on a change. */
+    sources?: ChatSourceData[];
+    vocabulary?: ChatTermData[];
+    /** The host's own reading of the text; it wins while the text is unchanged. */
+    draftTerms?: ChatDraftTerms;
+    optionsOpen: boolean;
+    /** Only "Versturen": no choice of the answer's form, no send key. For a question that is not a
+     * conversation with data, such as the one on a start page that searches a catalogue. */
+    plain: boolean;
+    draft: string;
+    /** The caret as an offset into the draft. */
+    caret: number;
+    completionIndex: number;
+    /** The reader dismissed the list, or took from it; typing brings it back. */
+    completionOff: boolean;
+    captions: Caption[];
+    private get input();
+    private get selectedIds();
+    private get noSource();
+    private termsIn;
+    private get suggestions();
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    focus(): void;
+    /** Opens the source picker; the start screen's "Wijzigen" asks for it. */
+    openSources(): void;
+    private selection;
+    private read;
+    private write;
+    private onInput;
+    private onPaste;
+    private sends;
+    private onKeydown;
+    private complete;
+    private send;
+    private termsFor;
+    private clearHighlights;
+    private paint;
+    private setSendKey;
+    private toggleOptions;
+    protected render(): TemplateResult;
+    private renderAsk;
+    private renderSendOptions;
+    private renderEdit;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat-composer': LintjeChatComposer;
+    }
+}
+export {};

package/dist-elements/types/components/chat/chat-message/chat-message.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<lintje-chat-message>` — what the reader asked: a filled bar on the right. A visually hidden
+ * "Jij:" carries the role.
+ *
+ * Editing is the message's own state (`lintje-chat-composer variant="edit"`). The message never
+ * changes its own text: asking again is an event and the host replaces the turn.
+ *
+ * Events: `lintje-message-edit` `{turnId, text, terms}` — ask this instead, replacing the answer
+ * and everything after it. `lintje-editing-change` `{turnId, editing}` is not composed: it tells
+ * the holding view which answers are about to be replaced.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/icon-button/icon-button.js';
+import '../chat-composer/chat-composer.js';
+import type { ChatSourceData, ChatTermData, ChatTermRange } from '../../../types.js';
+export declare class LintjeChatMessage extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    text: string;
+    terms?: ChatTermRange[];
+    /** When it was sent, as the host formats it ("08:20"). */
+    time?: string;
+    editable: boolean;
+    editing: boolean;
+    /** The turn this message opens; it comes back in the events. */
+    turnId?: string;
+    vocabulary?: ChatTermData[];
+    sources?: ChatSourceData[];
+    private setEditing;
+    protected render(): TemplateResult;
+    private renderSent;
+    private renderText;
+    private renderEditing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat-message': LintjeChatMessage;
+    }
+}

package/dist-elements/types/components/chat/chat-strip/chat-strip.d.ts

@@ -0,0 +1,38 @@
+/**
+ * `<lintje-chat-strip>` — the strip under an answer's text: what the answer assumed, as
+ * label/value pairs, and how it was calculated.
+ *
+ * A fixed value is plain text; one with `options` is a native `<select>` drawn as a term (the
+ * browser's own list and phone picker); one with `pressed` is a suggestion. The strip keeps only
+ * whether its details are open; a change is an event and the host sets the items again.
+ *
+ * Events: `lintje-strip-change` `{turnId, key, value}` — a state; `value` is the
+ * chosen option's value, or the suggestion's new `pressed`.
+ */
+import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import type { ChatStripItem } from '../../../types.js';
+export declare class LintjeChatStrip extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    items?: ChatStripItem[];
+    details?: {
+        term: string;
+        description: string;
+    }[];
+    detailsLabel: string;
+    /** Every value is plain text and untaken suggestions are left out: the answer is a record. */
+    disabled: boolean;
+    /** The turn this strip belongs to; it comes back in the event. */
+    turnId?: string;
+    open: boolean;
+    private change;
+    protected updated(): void;
+    private value;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat-strip': LintjeChatStrip;
+    }
+}

package/dist-elements/types/components/chat/chat-suggestions/chat-suggestions.d.ts

@@ -0,0 +1,37 @@
+/**
+ * `<lintje-chat-suggestions>` — sentences the reader can send with one press.
+ *
+ * `kind` is a rule, not decoration: `suggestion` (dashed) is something the reader could ask;
+ * `choice` (solid) is an answer the assistant is waiting for. In a conversation they stand on the
+ * reader's side, on the right; `align="start"` sets them left and side by side, as the examples
+ * under a question box on a start page.
+ *
+ * Events: `lintje-suggestion-select` `{turnId, kind, label, value}` — a trigger;
+ * `value` is the item's own, or its label.
+ */
+import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import type { ChatSuggestion } from '../../../types.js';
+export type ChatSuggestionKind = 'suggestion' | 'choice';
+export type ChatSuggestionsAlign = 'end' | 'start';
+export declare class LintjeChatSuggestions extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    /** The caps line above the sentences: "Jij, als vervolgvraag". */
+    label?: string;
+    /** The gray line under a set of choices. */
+    hint?: string;
+    kind: ChatSuggestionKind;
+    /** `start`: left and side by side, outside a conversation. */
+    align: ChatSuggestionsAlign;
+    items?: ChatSuggestion[];
+    /** It comes back in the event. */
+    turnId?: string;
+    private select;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-chat-suggestions': LintjeChatSuggestions;
+    }
+}

package/dist-elements/types/components/chat/shared/chat-terms.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Terms in a question: where they stand in a text, and which a reader is typing.
+ * Shared by `lintje-chat-message` and `lintje-chat-composer`; the words come from the host.
+ */
+import type { ChatTermData, ChatTermRange } from '../../../types.js';
+export interface ChatTextPart {
+    text: string;
+    term?: ChatTermRange;
+}
+/** Cuts a text at its term ranges; an empty, out-of-text or overlapping range is dropped. */
+export declare function termParts(text: string, terms?: ChatTermRange[]): ChatTextPart[];
+/**
+ * Finds the vocabulary's terms: whole words, case-insensitive, longest spelling first, never
+ * overlapping. A term is certain unless `ambiguous` or from a source not in `sources`.
+ */
+export declare function recogniseTerms(text: string, vocabulary?: ChatTermData[], sources?: string[]): ChatTermRange[];
+export declare function wordBefore(text: string, caret?: number): string;
+/** Terms with a word starting with the typed word: at most five, none for an exact match. */
+export declare function completions(word: string, vocabulary?: ChatTermData[]): ChatTermData[];

package/dist-elements/types/components/content/audio-player/audio-player.d.ts

@@ -0,0 +1,84 @@
+/**
+ * `<lintje-audio-player>` — plays a recording: play between two 15-second skips, the position
+ * as a slider, the time, the volume and the speed.
+ *
+ * With `.peaks` (0–1) the slider is the waveform, without them a bar. With `.segments` — the
+ * transcript's `{ start, speaker }[]` — every speaker takes a colour, named in a legend above
+ * (`no-legend` leaves it to the transcript, which names the same colours).
+ * `compact` puts everything on one line; a phone has no room for it and keeps the column.
+ * `flush` drops its own frame, for a bar the page draws around it. Never autoplays.
+ * `.currentTime` seeks.
+ *
+ * Events: `lintje-time-change` (seconds, at most four times a second), `lintje-seek` (seconds:
+ * the reader moved the position), `lintje-play`, `lintje-pause`.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import '../../../primitives/button/button.js';
+import '../../../primitives/skeleton/skeleton.js';
+import '../../feedback/announcement/announcement.js';
+import '../../actions/menu-button/menu-button.js';
+import { type SpeakerTurn } from './playback.js';
+import { LintjePlayerElement } from './player.js';
+export type { SpeakerTurn } from './playback.js';
+export declare class LintjeAudioPlayer extends LintjePlayerElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The waveform's peaks, 0–1. Without them the position is a bar. */
+    peaks?: number[] | null;
+    /** Who speaks when: the transcript's segments, or any `{ start, speaker }[]` in time order. */
+    segments: SpeakerTurn[];
+    /** Leaves the legend out where the transcript beside it names every colour. */
+    noLegend: boolean;
+    /** Everything on one line, for a row or a tile. */
+    compact: boolean;
+    /** No frame of its own: the page's bar around it is the frame. */
+    flush: boolean;
+    protected hoverTime: number | null;
+    protected waveWidth: number;
+    protected volume: number;
+    protected muted: boolean;
+    protected readonly mediaSelector = "audio";
+    private readonly mobile;
+    private observer;
+    private observed;
+    private get hasPeaks();
+    private get colours();
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** The slider also says who speaks, so the colours are never the only way to know. */
+    protected sliderLabel(): string;
+    private setVolume;
+    private toggleMute;
+    private applyVolume;
+    private onWaveMove;
+    /** "Opnieuw proberen" goes away with the failure: the focus moves to the play button. */
+    private readonly onRetry;
+    private volumeFromPointer;
+    private onVolumePointerDown;
+    private onVolumePointerMove;
+    private onVolumeKeydown;
+    private onSpeedMenu;
+    private renderCursor;
+    private renderWave;
+    /** The bar without peaks; with speakers its stretches take their colours. */
+    private renderTrack;
+    private renderSlider;
+    private renderLegend;
+    private renderSkip;
+    private renderTransport;
+    private renderMute;
+    private renderVolume;
+    /** Beside the volume bar an icon says the label is the speed; alone, on a phone, it needs none. */
+    private renderSpeed;
+    /** On a phone the times stand under the slider: the row has room for the buttons only. */
+    private renderTimes;
+    /** A phone has its own volume buttons: there the player only mutes. */
+    private renderFull;
+    private renderCompact;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-audio-player': LintjeAudioPlayer;
+    }
+}

package/dist-elements/types/components/content/audio-player/playback.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The pure arithmetic `<lintje-audio-player>` and `<lintje-video-player>` share. No DOM.
+ * `<lintje-transcript>` and the video player's caption use `indexAt()`.
+ */
+/** Seconds an arrow key moves; PageUp and PageDown move `PAGE_STEP`. */
+export declare const ARROW_STEP = 5;
+export declare const PAGE_STEP = 30;
+/** Seconds the skip buttons move. */
+export declare const SKIP_STEP = 15;
+/** The share of full volume an arrow key moves the volume slider. */
+export declare const VOLUME_STEP = 0.1;
+export declare const REPORT_INTERVAL = 250;
+/** A waveform bar is 4 px wide with 4 px between two bars. */
+export declare const BAR_PITCH = 8;
+export declare const SPEEDS: readonly {
+    value: number;
+    label: string;
+}[];
+export declare function speedLabel(speed: number): string;
+/** A number of seconds as `m:ss`: `724` → "12:04". Minutes do not roll over into hours. */
+export declare function formatTime(seconds: number): string;
+/** A number of seconds in words: `724` → "12 minuten 4 seconden"; a screen reader misreads "12:04". */
+export declare function spokenTime(seconds: number): string;
+/** What the slider says to a screen reader: "12 minuten 4 seconden van 47 minuten 12 seconden". */
+export declare function valueText(position: number, duration: number): string;
+/** A time inside the recording: `0` to `duration`, and `0` for anything that is not a number. */
+export declare function clampTime(seconds: number, duration: number): number;
+export declare function playedFraction(position: number, duration: number): number;
+export declare function timeAtPointer(clientX: number, left: number, width: number, duration: number): number;
+/** Where a slider key takes the position; `null` for a key the slider does not take. */
+export declare function seekForKey(key: string, position: number, duration: number): number | null;
+export declare function barCount(width: number): number;
+/** Each bar is the highest peak of its stretch, so a short loud moment survives. */
+export declare function resamplePeaks(peaks: readonly number[], count: number): number[];
+/** Where a volume key takes the volume (0–1); `null` for a key the slider does not take. */
+export declare function volumeForKey(key: string, volume: number): number | null;
+/**
+ * The categorical colours a recording's speakers take, in order of first appearance. Orange is
+ * left out: it is the focus ring, and Defensie's primary.
+ */
+export declare const SPEAKER_COLOURS: readonly ['sky-blue', 'dark-yellow', 'pink', 'mint-green', 'violet', 'green'];
+/** A speaker past the six colours takes the gray of "other". */
+export type SpeakerColour = (typeof SPEAKER_COLOURS)[number] | 'other';
+export interface SpeakerTurn {
+    start: number;
+    speaker: string;
+}
+export declare function speakerColours(turns: readonly SpeakerTurn[]): Map<string, SpeakerColour>;
+/** Who speaks at `time`; `null` before the first turn. */
+export declare function speakerAt(turns: readonly SpeakerTurn[], time: number): string | null;
+/**
+ * The recording as stretches of one speaker, as fractions of `duration`: a turn runs until the
+ * next speaker starts, the last one until the end.
+ */
+export declare function speakerStretches(turns: readonly SpeakerTurn[], duration: number): {
+    speaker: string;
+    from: number;
+    to: number;
+}[];
+/** The index of the last item that started by `time`; `-1` before the first. */
+export declare function indexAt(items: readonly {
+    start: number;
+}[], time: number): number;
+/** Lets a report through at most once per `interval` ms; `force` passes the last of a run. */
+export declare class RateLimit {
+    private readonly interval;
+    private last;
+    constructor(interval?: number);
+    allow(now: number, force?: boolean): boolean;
+}