@cube-nl/dmp-sdk 1.0.0-rc.4 → 1.1.0-rc.1

package/dist/ui/period.d.ts

@@ -0,0 +1,18 @@
+export type PeriodKey = 'this-month' | '12m' | 'this-year' | 'custom';
+/** ISO dates, both ends inclusive. */
+export interface Period {
+    key: PeriodKey;
+    from: string;
+    to: string;
+    previous: {
+        from: string;
+        to: string;
+    };
+    /** The day the period was counted from (the picker's today); what lies after it has no data yet. */
+    today?: string;
+}
+/** The period the key names around `today`, with the one before it for comparison. `custom` needs its dates. */
+export declare function resolvePeriod(key: PeriodKey, today: Date, custom?: {
+    from: string;
+    to: string;
+}): Period;

package/dist/ui/period.js

@@ -0,0 +1,52 @@
+import { isoDate, parseLocalDate } from './format.js';
+const DAY_MS = 86_400_000;
+// `new Date(y, m, d)` maps years 0-99 to 1900-1999; setFullYear does not.
+function local(year, month, day) {
+    const date = new Date(2000, 0, 1);
+    date.setFullYear(year, month, day);
+    return date;
+}
+function range(from, to) {
+    return { from: isoDate(from), to: isoDate(to) };
+}
+/** First day of the month `offset` months from `today`'s, and the last day of the month `span - 1` months later. */
+function months(today, offset, span) {
+    const year = today.getFullYear();
+    const month = today.getMonth() + offset;
+    return range(local(year, month, 1), local(year, month + span, 0));
+}
+function days(from, to) {
+    return Math.round((Date.UTC(to.getFullYear(), to.getMonth(), to.getDate()) -
+        Date.UTC(from.getFullYear(), from.getMonth(), from.getDate())) / DAY_MS) + 1;
+}
+/** The period the key names around `today`, with the one before it for comparison. `custom` needs its dates. */
+export function resolvePeriod(key, today, custom) {
+    switch (key) {
+        case 'this-month':
+            return { key, ...months(today, 0, 1), previous: months(today, -1, 1) };
+        case '12m':
+            return { key, ...months(today, -11, 12), previous: months(today, -23, 12) };
+        case 'this-year': {
+            const year = today.getFullYear();
+            return {
+                key,
+                ...range(local(year, 0, 1), local(year, 11, 31)),
+                previous: range(local(year - 1, 0, 1), local(year - 1, 11, 31)),
+            };
+        }
+        case 'custom': {
+            const from = custom === undefined ? null : parseLocalDate(custom.from);
+            const to = custom === undefined ? null : parseLocalDate(custom.to);
+            if (custom === undefined || from === null || to === null || to < from) {
+                throw new TypeError('A custom period needs a valid from and to, from not after to.');
+            }
+            const length = days(from, to);
+            return {
+                key,
+                from: custom.from,
+                to: custom.to,
+                previous: range(local(from.getFullYear(), from.getMonth(), from.getDate() - length), local(from.getFullYear(), from.getMonth(), from.getDate() - 1)),
+            };
+        }
+    }
+}

package/dist/ui/query.d.ts

@@ -0,0 +1,26 @@
+import type { CubeAppSession } from '../app.js';
+import type { FilterValue } from '../types.js';
+import type { Period } from './period.js';
+export interface PeriodSourceLike extends HTMLElement {
+    readonly value: Period;
+    updateComplete: Promise<void>;
+}
+/** The `filter` attribute: a JSON object of API filters, or nothing. */
+export declare function blockFilter(el: Element): Record<string, FilterValue>;
+/** `{ [field]: { gte: from, lt: day after to } }`: right for dates and date-times alike, never `between`. */
+export declare function periodFilter(field: string, range: {
+    from: string;
+    to: string;
+}): Record<string, FilterValue>;
+/**
+ * The period picker a block follows, once it has rendered. Null without a selector. Blocks load after the page's
+ * scripts have run, so a picker element that is not defined by then never will be: that is an error, not a wait.
+ */
+export declare function resolvePeriodSource(host: HTMLElement, selector: string | null): Promise<PeriodSourceLike | null>;
+/** The date field a period filters on: explicit, else the field of a truncated `by`. */
+export declare function dateFieldFor(dateField: string | null, by: string | null, tag: string): string;
+/**
+ * Labels for ids from `<resource>.<field>`: one list per 200 ids. An id without a row, or whose list was refused
+ * or failed (not an abort), is absent from the map.
+ */
+export declare function lookupLabels(session: CubeAppSession, lookup: string, ids: unknown[], signal: AbortSignal): Promise<Map<string, string>>;

package/dist/ui/query.js

@@ -0,0 +1,98 @@
+import { parseDimension, isoDate, parseLocalDate } from './format.js';
+import { NL } from './texts.js';
+const LOOKUP = /^([a-z][a-z0-9_]*)\.([A-Za-z_][A-Za-z0-9_]*)$/;
+const LOOKUP_CHUNK = 200;
+/** The `filter` attribute: a JSON object of API filters, or nothing. */
+export function blockFilter(el) {
+    const raw = el.getAttribute('filter');
+    if (raw === null || raw.trim() === '')
+        return {};
+    let filter;
+    try {
+        filter = JSON.parse(raw);
+    }
+    catch {
+        filter = null;
+    }
+    if (filter === null || typeof filter !== 'object' || Array.isArray(filter)) {
+        throw new TypeError(NL.invalid.json(el.localName, 'filter'));
+    }
+    return filter;
+}
+function isPeriod(value) {
+    const period = value;
+    return typeof period?.from === 'string' && typeof period.to === 'string'
+        && typeof period.previous?.from === 'string' && typeof period.previous.to === 'string';
+}
+/** `{ [field]: { gte: from, lt: day after to } }`: right for dates and date-times alike, never `between`. */
+export function periodFilter(field, range) {
+    const to = parseLocalDate(range.to);
+    if (to === null)
+        throw new TypeError(NL.invalid.periodEnd(range.to));
+    to.setDate(to.getDate() + 1);
+    return { [field]: { gte: range.from, lt: isoDate(to) } };
+}
+/**
+ * The period picker a block follows, once it has rendered. Null without a selector. Blocks load after the page's
+ * scripts have run, so a picker element that is not defined by then never will be: that is an error, not a wait.
+ */
+export async function resolvePeriodSource(host, selector) {
+    if (selector === null || selector === '')
+        return null;
+    const source = host.ownerDocument.querySelector(selector);
+    const registry = (host.ownerDocument.defaultView ?? window).customElements;
+    if (source === null || registry.get(source.localName) === undefined) {
+        throw new TypeError(NL.invalid.periodSource(selector));
+    }
+    const picker = source;
+    await picker.updateComplete;
+    if (!isPeriod(picker.value))
+        throw new TypeError(NL.invalid.periodSource(selector));
+    return picker;
+}
+/** The date field a period filters on: explicit, else the field of a truncated `by`. */
+export function dateFieldFor(dateField, by, tag) {
+    if (dateField !== null && dateField !== '')
+        return dateField;
+    if (by !== null && by !== '') {
+        const dimension = parseDimension(by);
+        if (dimension.truncation !== null)
+            return dimension.field;
+    }
+    throw new TypeError(NL.invalid.dateField(tag));
+}
+/**
+ * Labels for ids from `<resource>.<field>`: one list per 200 ids. An id without a row, or whose list was refused
+ * or failed (not an abort), is absent from the map.
+ */
+export async function lookupLabels(session, lookup, ids, signal) {
+    const match = LOOKUP.exec(lookup);
+    const resource = match?.[1];
+    const field = match?.[2];
+    if (resource === undefined || field === undefined)
+        throw new TypeError(NL.invalid.lookup(lookup));
+    const unique = [...new Set(ids.filter((id) => id !== null && id !== undefined).map((id) => id))];
+    const labels = new Map();
+    for (let start = 0; start < unique.length; start += LOOKUP_CHUNK) {
+        // The preview session ignores the signal; without this an aborted block would still ask every chunk.
+        signal.throwIfAborted();
+        const chunk = unique.slice(start, start + LOOKUP_CHUNK);
+        let data;
+        try {
+            const query = { filter: { id: { in: chunk } }, fields: ['id', field], page: { size: LOOKUP_CHUNK } };
+            ({ data } = await session.resource(resource).list(query, { signal }));
+        }
+        catch (error) {
+            // Names are decoration: a refused or failing lookup leaves the ids unlabeled instead of failing the block.
+            if (signal.aborted || error?.name === 'AbortError')
+                throw error;
+            continue;
+        }
+        for (const row of data) {
+            const label = row[field];
+            if (label !== null && label !== undefined)
+                labels.set(String(row.id), String(label));
+        }
+    }
+    return labels;
+}

package/dist/ui/schema.d.ts

@@ -0,0 +1,23 @@
+import type { ResourceCapability } from '../types.js';
+export interface FieldInfo {
+    name: string;
+    type: string;
+    format: string | null;
+    nullable: boolean;
+    readonly: boolean;
+    enum: string[] | null;
+    description: string | null;
+}
+/** What a block needs to know about one resource, the same shape in the preview and live. */
+export interface ResourceSchema {
+    name: string;
+    actions: string[];
+    fields: FieldInfo[];
+    summary: string[];
+    filterable: string[];
+    sortable: string[];
+    groupable: string[];
+    aggregatable: Record<string, string[]>;
+}
+/** The REST face has neither `format` nor `enum`, so both are null. */
+export declare function schemaFromCapability(resource: ResourceCapability): ResourceSchema;

package/dist/ui/schema.js

@@ -0,0 +1,21 @@
+/** The REST face has neither `format` nor `enum`, so both are null. */
+export function schemaFromCapability(resource) {
+    return {
+        name: resource.name,
+        actions: [...resource.actions],
+        fields: resource.fields.map((field) => ({
+            name: field.name,
+            type: field.type,
+            format: null,
+            nullable: field.nullable,
+            readonly: field.readonly,
+            enum: null,
+            description: field.description ?? null,
+        })),
+        summary: [...resource.summary],
+        filterable: [...resource.filterable],
+        sortable: [...resource.sortable],
+        groupable: [...resource.groupable],
+        aggregatable: Object.fromEntries(Object.entries(resource.aggregatable).map(([key, fns]) => [key, [...fns]])),
+    };
+}

package/dist/ui/styles.d.ts

@@ -0,0 +1,8 @@
+import type { BlockScope } from './define.js';
+/**
+ * Shared by every block's shadow root. Colours, radii and the font come from the theme's --cube-* properties.
+ * Every block's scroller is position:relative, so an .sr-only inside it cannot escape it and widen the page.
+ */
+export declare const BASE_CSS = "\n:host{display:block;box-sizing:border-box;min-width:0;font-family:var(--cube-font-family,system-ui,sans-serif);\ncolor:var(--cube-color-text,#1f2328);font-size:1rem;line-height:1.5}\n:host([hidden]){display:none}\n*,*::before,*::after{box-sizing:inherit}\n.cube-body{display:block;min-width:0}\nbutton{font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;\ngap:.375rem;min-height:2.5rem;padding:.5rem 1rem;border:1px solid var(--cube-color-primary);\nborder-radius:var(--cube-radius-small);background:var(--cube-color-primary);color:var(--cube-color-on-primary)}\nbutton:hover{background:var(--cube-color-primary-hover);border-color:var(--cube-color-primary-hover)}\nbutton.secondary{background:var(--cube-color-bg);color:var(--cube-color-primary-text);\nborder-color:var(--cube-color-border)}\nbutton.secondary:hover{background:var(--cube-color-primary-subtle)}\nbutton:disabled{cursor:not-allowed;opacity:.6}\ninput,select,textarea{font:inherit;color:inherit;max-width:100%;min-height:2.5rem;padding:.5rem .75rem;\nborder:1px solid var(--cube-color-text-muted);border-radius:var(--cube-radius-small);background:var(--cube-color-bg)}\na{color:var(--cube-color-primary-text)}\n:focus-visible{outline:3px solid var(--cube-color-focus);outline-offset:2px}\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);\nwhite-space:nowrap;border:0}\n.badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;font-size:.875rem;font-weight:600;\nbackground:var(--cube-color-primary-subtle);color:var(--cube-color-primary-text)}\n.muted{color:var(--cube-color-text-muted)}\n.example.badge,.not-saved{background:var(--cube-color-example-bg);color:var(--cube-color-example-text)}\np.example{margin:0 0 .5rem}\ntd.example,dd.example{text-decoration:underline dashed;text-underline-offset:.25em}\n.not-saved{margin:0;align-self:center;padding:.125rem .5rem;border-radius:var(--cube-radius-small);font-size:.875rem;\nfont-weight:600}\n.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}\n@media (max-width:640px){.row{flex-direction:column;align-items:stretch}.row>button{width:100%}}\n";
+/** One constructed stylesheet per scope and css text, shared by every element that adopts it. */
+export declare function sheet(scope: BlockScope, css: string): CSSStyleSheet;

package/dist/ui/styles.js

@@ -0,0 +1,51 @@
+/**
+ * Shared by every block's shadow root. Colours, radii and the font come from the theme's --cube-* properties.
+ * Every block's scroller is position:relative, so an .sr-only inside it cannot escape it and widen the page.
+ */
+export const BASE_CSS = `
+:host{display:block;box-sizing:border-box;min-width:0;font-family:var(--cube-font-family,system-ui,sans-serif);
+color:var(--cube-color-text,#1f2328);font-size:1rem;line-height:1.5}
+:host([hidden]){display:none}
+*,*::before,*::after{box-sizing:inherit}
+.cube-body{display:block;min-width:0}
+button{font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
+gap:.375rem;min-height:2.5rem;padding:.5rem 1rem;border:1px solid var(--cube-color-primary);
+border-radius:var(--cube-radius-small);background:var(--cube-color-primary);color:var(--cube-color-on-primary)}
+button:hover{background:var(--cube-color-primary-hover);border-color:var(--cube-color-primary-hover)}
+button.secondary{background:var(--cube-color-bg);color:var(--cube-color-primary-text);
+border-color:var(--cube-color-border)}
+button.secondary:hover{background:var(--cube-color-primary-subtle)}
+button:disabled{cursor:not-allowed;opacity:.6}
+input,select,textarea{font:inherit;color:inherit;max-width:100%;min-height:2.5rem;padding:.5rem .75rem;
+border:1px solid var(--cube-color-text-muted);border-radius:var(--cube-radius-small);background:var(--cube-color-bg)}
+a{color:var(--cube-color-primary-text)}
+:focus-visible{outline:3px solid var(--cube-color-focus);outline-offset:2px}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
+white-space:nowrap;border:0}
+.badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;font-size:.875rem;font-weight:600;
+background:var(--cube-color-primary-subtle);color:var(--cube-color-primary-text)}
+.muted{color:var(--cube-color-text-muted)}
+.example.badge,.not-saved{background:var(--cube-color-example-bg);color:var(--cube-color-example-text)}
+p.example{margin:0 0 .5rem}
+td.example,dd.example{text-decoration:underline dashed;text-underline-offset:.25em}
+.not-saved{margin:0;align-self:center;padding:.125rem .5rem;border-radius:var(--cube-radius-small);font-size:.875rem;
+font-weight:600}
+.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
+@media (max-width:640px){.row{flex-direction:column;align-items:stretch}.row>button{width:100%}}
+`;
+const sheets = new WeakMap();
+/** One constructed stylesheet per scope and css text, shared by every element that adopts it. */
+export function sheet(scope, css) {
+    let byCss = sheets.get(scope);
+    if (byCss === undefined) {
+        byCss = new Map();
+        sheets.set(scope, byCss);
+    }
+    let found = byCss.get(css);
+    if (found === undefined) {
+        found = new scope.CSSStyleSheet();
+        found.replaceSync(css);
+        byCss.set(css, found);
+    }
+    return found;
+}

package/dist/ui/texts.d.ts

@@ -0,0 +1,134 @@
+/** On its own so the core (the preview session) takes this one name, not every UI text. */
+export declare const PREVIEW_USER_NAME = "Voorbeeldgebruiker";
+/** The theme's warnings, also on their own: resolveTheme is part of the core. */
+export declare const THEME_TEXTS: {
+    readonly invalidPrimary: "De hoofdkleur is geen geldige hexkleur; de neutrale standaardkleur wordt gebruikt.";
+    readonly invalidAccent: "De accentkleur is geen geldige hexkleur; er wordt een accentkleur afgeleid.";
+    readonly primaryLight: "De hoofdkleur is erg licht; witte tekst erop heeft weinig contrast.";
+    readonly primaryDarkened: "De hoofdkleur is voor tekst donkerder gemaakt om voldoende contrast te houden.";
+};
+/** Every Dutch text the UI shows. Blocks take their wording from here, never from a literal of their own. */
+export declare const NL: {
+    readonly loading: "Laden…";
+    readonly empty: "Er is hier nog niets te tonen.";
+    readonly error: "Er ging iets mis bij het laden.";
+    readonly retry: "Opnieuw proberen";
+    readonly forbidden: "Je hebt geen toegang tot deze gegevens.";
+    readonly signedOut: "Je bent niet ingelogd.";
+    readonly signIn: "Inloggen";
+    readonly signOut: "Uitloggen";
+    readonly signedIn: "Ingelogd";
+    readonly previewUser: "Voorbeeldgebruiker";
+    readonly pages: "Pagina's";
+    readonly yes: "Ja";
+    readonly no: "Nee";
+    readonly emptyValue: "—";
+    readonly quarter: (quarter: string, year: string) => string;
+    readonly week: (week: number, year: string) => string;
+    /** A short month on an axis with its year: `jan '26`. */
+    readonly monthYear: (month: string, year: string) => string;
+    readonly period: {
+        readonly label: "Periode";
+        readonly 'this-month': "Deze maand";
+        readonly '12m': "Laatste 12 maanden";
+        readonly 'this-year': "Dit jaar";
+        readonly custom: "Zelf kiezen";
+        readonly from: "Van";
+        readonly to: "Tot en met";
+        readonly invalidRange: "De einddatum ligt vóór de begindatum.";
+        readonly incompleteDate: "Vul bij Van en Tot en met een volledige datum in.";
+    };
+    readonly noData: "geen gegevens";
+    readonly comparedTo: "t.o.v. vorige periode";
+    readonly newValue: "nieuw";
+    readonly higher: "hoger";
+    readonly lower: "lager";
+    readonly incomplete: "Mogelijk niet compleet: er zijn meer groepen dan de DMP in één keer teruggeeft.";
+    readonly asTable: "Gegevens van de grafiek";
+    readonly tooManyGroups: "Te veel groepen om te tonen (meer dan 1000). Kies een kortere periode of een filter.";
+    readonly points: (count: number) => string;
+    readonly change: (percent: string, direction: string) => string;
+    readonly search: "Zoeken";
+    readonly all: "Alle";
+    readonly min: "Vanaf";
+    readonly max: "Tot en met";
+    readonly previous: "Vorige";
+    readonly next: "Volgende";
+    readonly pageOf: (n: number, m: number, total: number) => string;
+    readonly exportCsv: "Exporteren (CSV)";
+    readonly exporting: (n: number) => string;
+    readonly chooseRow: "Kies een rij om de details te zien.";
+    readonly edit: "Bewerken";
+    readonly save: "Opslaan";
+    readonly cancel: "Annuleren";
+    readonly saved: "Opgeslagen.";
+    readonly formSaved: "Opgeslagen. Dank je wel!";
+    readonly another: "Nog een invullen";
+    readonly required: "Vul dit veld in.";
+    /** After the label of a field that must be filled in. */
+    readonly requiredMark: " (verplicht)";
+    readonly notANumber: "Vul een getal in.";
+    readonly notAnInteger: "Vul een geheel getal in.";
+    readonly conflict: "Iemand anders heeft deze rij intussen gewijzigd. Laad de nieuwste versie en probeer het opnieuw.";
+    readonly reload: "Opnieuw laden";
+    readonly saveFailed: "Opslaan is niet gelukt. Probeer het opnieuw.";
+    readonly exportFailed: "Exporteren is niet gelukt. Probeer het opnieuw.";
+    /** The form-level line; `invalid` itself already holds the attribute errors. */
+    readonly formInvalid: "Niet alles is goed ingevuld.";
+    readonly noWritableFields: "Dit formulier heeft geen invulbare velden.";
+    readonly calcFailed: "De berekening lukt niet met deze invoer.";
+    readonly moveTo: (label: string) => string;
+    readonly moveFailed: "Verplaatsen lukte niet.";
+    readonly tryAgain: "Probeer het opnieuw.";
+    readonly changedMeanwhile: "Iemand anders heeft dit intussen gewijzigd; de nieuwste stand is geladen.";
+    readonly more: (n: number) => string;
+    readonly noColumns: "Geef de kolommen op met <cube-column value=\"…\">.";
+    readonly emptyColumn: "Leeg";
+    readonly range: (min: string, max: string) => string;
+    readonly atLeast: (min: string) => string;
+    readonly atMost: (max: string) => string;
+    readonly step: (step: string) => string;
+    /** The visible word of a marked column; the rest of exampleMissing is for screen readers. */
+    readonly example: "Voorbeeld";
+    readonly exampleMissing: "Voorbeeld — bestaat nog niet";
+    readonly exampleNotSaved: "Voorbeeld — wordt niet opgeslagen";
+    readonly gaps: {
+        readonly screen: "Scherm";
+        readonly what: "Wat ontbreekt";
+        readonly type: "Soort gegeven";
+        readonly why: "Waarom";
+        readonly none: "Er ontbreekt niets: alles in dit voorstel bestaat al in de DMP.";
+        readonly types: {
+            readonly tekst: "Tekst";
+            readonly getal: "Getal";
+            readonly bedrag: "Bedrag";
+            readonly datum: "Datum";
+            readonly keuze: "Keuze";
+            readonly 'ja/nee': "Ja/nee";
+        };
+    };
+    readonly invalid: {
+        readonly json: (tag: string, name: string) => string;
+        readonly number: (tag: string, name: string) => string;
+        readonly attribute: (name: string) => string;
+        readonly measure: (measure: string) => string;
+        readonly missing: (tag: string, name: string) => string;
+        readonly value: (tag: string, name: string, value: string) => string;
+        readonly formula: "cube-calc: formula moet een functie zijn";
+        readonly calcSingle: "cube-calc: formula gaf één waarde, maar er zijn meer cube-results; geef een object met hun namen";
+        readonly dateField: (tag: string) => string;
+        readonly compare: (tag: string) => string;
+        readonly periodSource: (selector: string) => string;
+        readonly periodEnd: (to: string) => string;
+        readonly notFilterable: (tag: string, name: string, field: string) => string;
+        readonly selector: (tag: string, name: string, selector: string) => string;
+        readonly lookup: (lookup: string) => string;
+        readonly dimension: (by: string) => string;
+    };
+    readonly theme: {
+        readonly invalidPrimary: "De hoofdkleur is geen geldige hexkleur; de neutrale standaardkleur wordt gebruikt.";
+        readonly invalidAccent: "De accentkleur is geen geldige hexkleur; er wordt een accentkleur afgeleid.";
+        readonly primaryLight: "De hoofdkleur is erg licht; witte tekst erop heeft weinig contrast.";
+        readonly primaryDarkened: "De hoofdkleur is voor tekst donkerder gemaakt om voldoende contrast te houden.";
+    };
+};

package/dist/ui/texts.js

@@ -0,0 +1,122 @@
+/** On its own so the core (the preview session) takes this one name, not every UI text. */
+export const PREVIEW_USER_NAME = 'Voorbeeldgebruiker';
+/** The theme's warnings, also on their own: resolveTheme is part of the core. */
+export const THEME_TEXTS = {
+    invalidPrimary: 'De hoofdkleur is geen geldige hexkleur; de neutrale standaardkleur wordt gebruikt.',
+    invalidAccent: 'De accentkleur is geen geldige hexkleur; er wordt een accentkleur afgeleid.',
+    primaryLight: 'De hoofdkleur is erg licht; witte tekst erop heeft weinig contrast.',
+    primaryDarkened: 'De hoofdkleur is voor tekst donkerder gemaakt om voldoende contrast te houden.',
+};
+/** Every Dutch text the UI shows. Blocks take their wording from here, never from a literal of their own. */
+export const NL = {
+    loading: 'Laden…',
+    empty: 'Er is hier nog niets te tonen.',
+    error: 'Er ging iets mis bij het laden.',
+    retry: 'Opnieuw proberen',
+    forbidden: 'Je hebt geen toegang tot deze gegevens.',
+    signedOut: 'Je bent niet ingelogd.',
+    signIn: 'Inloggen',
+    signOut: 'Uitloggen',
+    signedIn: 'Ingelogd',
+    previewUser: PREVIEW_USER_NAME,
+    pages: "Pagina's",
+    yes: 'Ja',
+    no: 'Nee',
+    emptyValue: '—',
+    quarter: (quarter, year) => `K${quarter} ${year}`,
+    week: (week, year) => `week ${week}, ${year}`,
+    /** A short month on an axis with its year: `jan '26`. */
+    monthYear: (month, year) => `${month} '${year.slice(-2)}`,
+    period: {
+        label: 'Periode',
+        'this-month': 'Deze maand',
+        '12m': 'Laatste 12 maanden',
+        'this-year': 'Dit jaar',
+        custom: 'Zelf kiezen',
+        from: 'Van',
+        to: 'Tot en met',
+        invalidRange: 'De einddatum ligt vóór de begindatum.',
+        incompleteDate: 'Vul bij Van en Tot en met een volledige datum in.',
+    },
+    noData: 'geen gegevens',
+    comparedTo: 't.o.v. vorige periode',
+    newValue: 'nieuw',
+    higher: 'hoger',
+    lower: 'lager',
+    incomplete: 'Mogelijk niet compleet: er zijn meer groepen dan de DMP in één keer teruggeeft.',
+    asTable: 'Gegevens van de grafiek',
+    tooManyGroups: 'Te veel groepen om te tonen (meer dan 1000). Kies een kortere periode of een filter.',
+    points: (count) => `${count} ${count === 1 ? 'punt' : 'punten'}`,
+    change: (percent, direction) => `${percent} procent ${direction} dan de vorige periode`,
+    search: 'Zoeken',
+    all: 'Alle',
+    min: 'Vanaf',
+    max: 'Tot en met',
+    previous: 'Vorige',
+    next: 'Volgende',
+    pageOf: (n, m, total) => `Pagina ${n} van ${m} · ${total} rijen`,
+    exportCsv: 'Exporteren (CSV)',
+    exporting: (n) => `${n} rijen opgehaald…`,
+    chooseRow: 'Kies een rij om de details te zien.',
+    edit: 'Bewerken',
+    save: 'Opslaan',
+    cancel: 'Annuleren',
+    saved: 'Opgeslagen.',
+    formSaved: 'Opgeslagen. Dank je wel!',
+    another: 'Nog een invullen',
+    required: 'Vul dit veld in.',
+    /** After the label of a field that must be filled in. */
+    requiredMark: ' (verplicht)',
+    notANumber: 'Vul een getal in.',
+    notAnInteger: 'Vul een geheel getal in.',
+    conflict: 'Iemand anders heeft deze rij intussen gewijzigd. Laad de nieuwste versie en probeer het opnieuw.',
+    reload: 'Opnieuw laden',
+    saveFailed: 'Opslaan is niet gelukt. Probeer het opnieuw.',
+    exportFailed: 'Exporteren is niet gelukt. Probeer het opnieuw.',
+    /** The form-level line; `invalid` itself already holds the attribute errors. */
+    formInvalid: 'Niet alles is goed ingevuld.',
+    noWritableFields: 'Dit formulier heeft geen invulbare velden.',
+    calcFailed: 'De berekening lukt niet met deze invoer.',
+    moveTo: (label) => `Verplaats naar ${label}`,
+    moveFailed: 'Verplaatsen lukte niet.',
+    tryAgain: 'Probeer het opnieuw.',
+    changedMeanwhile: 'Iemand anders heeft dit intussen gewijzigd; de nieuwste stand is geladen.',
+    more: (n) => `en nog ${n}`,
+    noColumns: 'Geef de kolommen op met <cube-column value="…">.',
+    emptyColumn: 'Leeg',
+    range: (min, max) => `Kies een waarde van ${min} tot en met ${max}.`,
+    atLeast: (min) => `Kies een waarde van ${min} of meer.`,
+    atMost: (max) => `Kies een waarde van ten hoogste ${max}.`,
+    step: (step) => `Kies een waarde in stappen van ${step}.`,
+    /** The visible word of a marked column; the rest of exampleMissing is for screen readers. */
+    example: 'Voorbeeld',
+    exampleMissing: 'Voorbeeld — bestaat nog niet',
+    exampleNotSaved: 'Voorbeeld — wordt niet opgeslagen',
+    gaps: {
+        screen: 'Scherm',
+        what: 'Wat ontbreekt',
+        type: 'Soort gegeven',
+        why: 'Waarom',
+        none: 'Er ontbreekt niets: alles in dit voorstel bestaat al in de DMP.',
+        types: { tekst: 'Tekst', getal: 'Getal', bedrag: 'Bedrag', datum: 'Datum', keuze: 'Keuze', 'ja/nee': 'Ja/nee' },
+    },
+    invalid: {
+        json: (tag, name) => `${tag}: ${name} is geen geldige JSON`,
+        number: (tag, name) => `${tag}: ${name} is geen geldig getal`,
+        attribute: (name) => `${name} mag geen attribuut zijn: geen inline stijl of script`,
+        measure: (measure) => `"${measure}" is geen geldige meting: gebruik count of count/sum/avg/min/max(veld)`,
+        missing: (tag, name) => `${tag}: ${name} ontbreekt`,
+        value: (tag, name, value) => `${tag}: ${name} "${value}" is geen geldige waarde`,
+        formula: 'cube-calc: formula moet een functie zijn',
+        calcSingle: 'cube-calc: formula gaf één waarde, maar er zijn meer cube-results; geef een object met hun namen',
+        dateField: (tag) => `${tag}: date-field ontbreekt bij period`,
+        compare: (tag) => `${tag}: compare werkt alleen samen met period`,
+        periodSource: (selector) => `Geen periodekiezer gevonden voor "${selector}"`,
+        periodEnd: (to) => `"${to}" is geen geldige einddatum van de periode`,
+        notFilterable: (tag, name, field) => `${tag}: ${name} noemt "${field}", maar daarop kan niet gefilterd worden`,
+        selector: (tag, name, selector) => `${tag}: ${name} "${selector}" is geen geldige selector`,
+        lookup: (lookup) => `"${lookup}" is geen geldige opzoeking: gebruik resource.veld`,
+        dimension: (by) => `"${by}" is geen geldige indeling: gebruik veld of veld.day/week/month/quarter/year`,
+    },
+    theme: THEME_TEXTS,
+};

package/dist/ui/theme.d.ts

@@ -0,0 +1,58 @@
+export type FontId = 'system' | 'inter' | 'albert-sans' | 'source-sans-3' | 'nunito-sans' | 'ibm-plex-sans';
+export type Corners = 'scherp' | 'normaal' | 'rond';
+export interface ThemeSource {
+    primary_colour: string;
+    accent_colour?: string | null;
+    font?: FontId;
+    corners?: Corners;
+    logo?: string | null;
+    logo_dark?: string | null;
+}
+export interface FontFile {
+    src: string;
+    weight?: string;
+    style?: 'normal' | 'italic';
+}
+export declare const TOKEN_NAMES: readonly ["color-primary", "color-primary-hover", "color-primary-subtle", "color-primary-text", "color-on-primary", "color-accent", "color-on-accent", "color-text", "color-text-muted", "color-bg", "color-surface", "color-border", "color-focus", "color-danger", "color-success", "color-warning", "color-example-bg", "color-example-text", "color-series-1", "color-series-2", "color-series-3", "color-series-4", "color-series-5", "color-series-6", "radius", "radius-small", "font-family"];
+export type TokenName = (typeof TOKEN_NAMES)[number];
+export type ThemeTokens = Record<TokenName, string>;
+export interface ThemeFile {
+    theme: 1;
+    captured_at?: string;
+    source: ThemeSource;
+    tokens?: Partial<Record<TokenName, string>>;
+    font_files?: FontFile[];
+}
+export interface ThemeWarning {
+    code: 'invalid-primary' | 'invalid-accent' | 'primary-light' | 'primary-darkened-for-text';
+    message: string;
+}
+export declare const NEUTRAL_SOURCE: ThemeSource;
+type FontEntry = {
+    family: string;
+    files: ReadonlyArray<{
+        file: string;
+        weight: string;
+        style: 'normal';
+    }>;
+};
+export declare const FONTS: Readonly<Record<Exclude<FontId, 'system'>, FontEntry>>;
+export declare function contrastRatio(a: string, b: string): number;
+export declare function deriveTheme(source: ThemeSource): {
+    tokens: ThemeTokens;
+    warnings: ThemeWarning[];
+};
+export interface ResolvedTheme {
+    tokens: ThemeTokens;
+    logo: string | null;
+    logoDark: string | null;
+    fontFamily: string | null;
+    fontFiles: FontFile[];
+    warnings: ThemeWarning[];
+}
+export declare function resolveTheme(input: ThemeFile | ThemeSource | null, baseUrl: string): ResolvedTheme;
+export declare function themeCss(theme: ResolvedTheme): string;
+export declare function currentTheme(): ResolvedTheme;
+export declare function setTheme(theme: ResolvedTheme): void;
+export declare function onTheme(listener: (theme: ResolvedTheme) => void): () => void;
+export {};