lintje 0.3.0 → 0.5.0

package/dist-elements/types/components/shared/charts/map-chart/map-chart.d.ts

@@ -6,7 +6,7 @@
 import { type TemplateResult } from 'lit';
 import type { ChartOptions } from '../shared/controller.js';
 import type { MapArea, MapSpec, MapValue } from '../shared/types.js';
-import '../../../../primitives/popover/popover.js';
+import '../../../overlays/popover/popover.js';
 /** The map's own height in a tile: on a phone taller, so all its buttons fit on the touch size. */
 export declare const MAP_HEIGHT: {
     readonly desktop: 400;

package/dist-elements/types/components/shared/charts/radar-chart/radar-chart.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Radar chart: the profile of one to three variables over five to eight axes that share one
+ * scale, from 0 in the centre to `max` on the outer ring, with a grey comparison and a norm.
+ * Dashed is the norm only: a dashed comparison over it would read as a second norm.
+ * Overlapping areas mix into a colour no variable has, so of more layers only the one the
+ * reader points at in the legend fills. Below 768 px each axis becomes a row of bars (rule 9).
+ */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type RadarSpec = Extract<ChartSpec, {
+    kind: 'radar';
+}>;
+/**
+ * The runs of known values around the circle, as axis indices. Without a gap the one run closes
+ * on itself; a gap breaks the line there, as nothing is known to bridge it (rule 15).
+ */
+export declare function radarRuns(values: (number | null)[]): {
+    closed: boolean;
+    runs: number[][];
+};
+/** The rings: every `step` up to `max`, and `max` itself as the outer one. */
+export declare function radarTicks(max: number, step?: number): number[];
+/** Which layers fill: one alone does; of more, the emphasised one (`emphasis`), all or none. */
+export declare function radarFills(spec: Pick<RadarSpec, 'area'>, shown: {
+    label: string;
+    comparison: boolean;
+    complete: boolean;
+}[], emphasis: string | null): Set<string>;
+export declare function renderRadarChart(spec: RadarSpec, options: ChartOptions): TemplateResult;
+export {};

package/dist-elements/types/components/shared/charts/shared/axes.d.ts

@@ -5,6 +5,9 @@ import type { PlotKeys } from './plot-keys.js';
 import { type SeriesKey } from './series-shapes.js';
 /** Anything that may go inside the `<svg>`; built with lit's `svg`, since `html` draws nothing. */
 export type SvgSlot = SVGTemplateResult | typeof nothing | false | null | undefined | readonly SvgSlot[];
+/** The legend keys of a chart's references, apart from any series a host calls "Norm". */
+export declare const THRESHOLD_KEY = "reference:threshold";
+export declare const MEDIAN_KEY = "reference:median";
 export interface LegendItem {
     label: string;
     color?: string;
@@ -13,7 +16,10 @@ export interface LegendItem {
     /** The shape the line carries at its end, drawn on its line marker (rule 13). */
     symbol?: SeriesKey;
     hidden?: boolean;
-    /** Not a series but a reference, such as a norm: never a toggle. */
+    /**
+     * Never a switch: a key such as "geen gegevens", or a lone series with nothing beside it, which
+     * switched off would leave an empty frame. A reference such as a norm is a switch.
+     */
     fixed?: boolean;
     /** What `onToggle` receives; without it the label. */
     key?: string;
@@ -23,9 +29,11 @@ export interface LegendItem {
  * dark-yellow one with the edge of its text colour (`lineCasing`).
  */
 export declare function renderSymbol(symbol: SeriesKey, color: string | undefined, centre: number): SVGTemplateResult;
-export declare function renderLegend({ items, onToggle, position, }: {
+export declare function renderLegend({ items, onToggle, onEmphasis, position, }: {
     items: LegendItem[];
     onToggle?: (label: string) => void;
+    /** A series pointed at or focused, and `null` once it is left. */
+    onEmphasis?: (label: string | null) => void;
     position?: 'top' | 'bottom' | 'right';
 }): TemplateResult;
 type XAnchor = 'start' | 'middle' | 'end';

package/dist-elements/types/components/shared/charts/shared/controller.d.ts

@@ -35,6 +35,8 @@ export interface TooltipRow {
     divider?: boolean;
     /** The series' shape instead of a square swatch, as its legend draws it. */
     symbol?: SeriesKey;
+    /** A line instead of a square swatch, plain or dashed (a norm), as its legend draws it. */
+    marker?: 'line' | 'dashed';
 }
 export interface TooltipContent {
     title: string;
@@ -71,6 +73,8 @@ export declare class ChartController {
     /** What the keyboard's tooltip says, for the chart's status region; empty otherwise. */
     status: string;
     hiddenSeries: string[];
+    /** The series the reader points at or focuses in the legend; `null` for none. */
+    emphasis: string | null;
     /** The layers of a stacked map switched off in its legend, by their place in the stack. */
     hiddenLayers: number[];
     hoverSegment: number | null;
@@ -78,7 +82,6 @@ export declare class ChartController {
         row: number;
         column: number;
     } | null;
-    dimmedClass: number | null;
     /** What a wheel without its modifier shows, until its timer clears it. */
     mapHint: string | null;
     mapHintTimer: ReturnType<typeof setTimeout> | null;
@@ -147,6 +150,7 @@ export declare class ChartController {
     private watchEscape;
     private unwatchEscape;
     toggleLayer(index: number): void;
+    emphasise(label: string | null): void;
     toggleSeries(label: string): void;
     private read;
     /**

package/dist-elements/types/components/shared/charts/shared/layer-motion.d.ts

@@ -0,0 +1,21 @@
+import type { ChartController } from './controller.js';
+/**
+ * The weight each part is drawn with, 0 (off) to 1 (on), eased between the two over `--dur-layer`
+ * after a legend switch. Points and `d` do not transition in every engine, so the edges are
+ * worked out per frame.
+ */
+export interface LayerMotion {
+    key: string;
+    from: number[];
+    to: number[];
+    start: number;
+    duration: number;
+    ease: (t: number) => number;
+    frame?: number;
+    element?: Element;
+    attach: (element: Element | undefined) => void;
+}
+/** The weights to draw now; a new switch starts from where a running one stands. */
+export declare function layerWeights(controller: ChartController, key: string, target: number[]): number[];
+/** The motion of a chart, after `layerWeights`; its `attach` goes on the drawing, for the tokens. */
+export declare function layerMotion(controller: ChartController): LayerMotion;

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

@@ -238,7 +238,40 @@ export type ChartSpec = {
     /** The text beside the threshold line; default "norm" with its value and unit. */
     thresholdLabel?: string;
     small?: boolean;
+} | {
+    kind: 'radar';
+    /** The axes' names, five to eight, clockwise from the top. All share one scale. */
+    axes: string[];
+    /** The layers: at most three variables and one comparison. */
+    series: RadarSeriesData[];
+    /** The outer ring. The scale starts at 0 in the centre: the area carries the value. */
+    max: number;
+    /** The distance between the rings; without it five rings. */
+    step?: number;
+    unit?: string;
+    /** A norm on every axis: a dashed polygon in the emphasis colour. */
+    threshold?: number;
+    thresholdLabel?: string;
+    /**
+     * Which layer fills. `emphasis` (the default): one layer always does, of more only the
+     * one the reader points at in the legend, as overlapping areas mix into a colour no
+     * variable has. `always` fills every layer, `never` none.
+     */
+    area?: 'emphasis' | 'always' | 'never';
+    /** The value under each axis name; with one layer only (all or nothing). Default true. */
+    dataLabels?: boolean;
+    small?: boolean;
 };
+/**
+ * A layer of a radar chart: one value per axis, `null` for no data (rule 15). Without a colour
+ * the layers take the data colours in their order; a comparison is grey and dashed.
+ */
+export interface RadarSeriesData {
+    label: string;
+    values: (number | null)[];
+    color?: ChartColor;
+    comparison?: boolean;
+}
 export type ChartKind = ChartSpec['kind'];
 /**
  * What a map draws. `polygons` are areas that carry their own outline (`MapValue.polygon`);

package/dist-elements/types/components/shared/content-tile.d.ts

@@ -4,7 +4,7 @@
  * data. The modal's events stop here, like the tile's own, so one action is one line in a log.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from './grid-item-element.js';
 import '../overlays/modal/modal.js';
 export interface ExpandModalOptions {
     heading?: string;

package/dist-elements/types/components/{forms/form → shared}/controls.d.ts

@@ -1,6 +1,7 @@
 /**
- * What `lintje-form`, `lintje-form-section` and `lintje-form-actions` share: finding the controls
- * in their light DOM, and setting a property on them that can be handed back.
+ * What the holders of controls (`lintje-form`, `lintje-form-section`, `lintje-form-actions`,
+ * `lintje-dialog`) and the controls themselves share: finding the controls in a light DOM,
+ * reading and writing their values, and setting a property on them that can be handed back.
  *
  * A `<fieldset disabled>` in a shadow root disables nothing slotted into it, so each holder
  * disables controls itself and hands back the state it found, or a control the host had

package/dist-elements/types/components/shared/download.d.ts

@@ -5,6 +5,8 @@
  */
 export type CsvCell = string | number | null | undefined;
 export declare function toCsv(rows: CsvCell[][]): string;
+/** Any other text, as a file of its own type (`text/plain`, `application/json`). */
+export declare function downloadText(name: string, text: string, type: string): void;
 export declare function downloadCsv(filename: string, rows: CsvCell[][]): void;
 /** The surface a PNG is drawn on; an empty string leaves the PNG transparent. */
 export declare function surfaceColour(svg: Element): string;

package/dist-elements/types/components/shared/overflow.d.ts

@@ -10,7 +10,7 @@
  * action goes first, the last never goes, and a menu of one row does not exist.
  */
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { LintjeButton } from '../../primitives/button/button.js';
+import type { LintjeButton } from '../actions/button/button.js';
 import type { MenuEntry } from '../actions/menu-button/menu-button.js';
 export interface OverflowItem {
     width: number;

package/dist-elements/types/components/tables/activity-log/activity-log.d.ts

@@ -6,7 +6,7 @@
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 export interface ActivityEntry {
     /** A name, or "Systeem". */
     who: string;

package/dist-elements/types/components/tables/card/card.d.ts

@@ -13,10 +13,10 @@
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import { type Tone } from '../../../primitives/shared/tone.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/icon-button/icon-button.js';
-import '../../../primitives/skeleton/skeleton.js';
+import { type Tone } from '../../shared/tone.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../feedback/skeleton/skeleton.js';
 export type CardStatusTone = Tone;
 export interface CardStatus {
     /** The word that carries the status: "Je hebt toegang". */

package/dist-elements/types/components/tables/data-table/actions.d.ts

@@ -7,7 +7,7 @@
  */
 import { type TemplateResult } from 'lit';
 import '../../actions/menu-button/menu-button.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import type { TableAction } from '../../../types.js';
 /** The rows a Shift+click checks: `anchor` to `target` inclusive; only `target` without an anchor. */
 export declare function rangeIds(order: readonly string[], anchor: string | null, target: string): string[];

package/dist-elements/types/components/tables/data-table/data-table.d.ts

@@ -19,9 +19,9 @@ import '../../feedback/empty-state/empty-state.js';
 import '../description-list/description-list.js';
 import '../../actions/menu-button/menu-button.js';
 import '../pagination/pagination.js';
-import '../../../primitives/status-dot/status-dot.js';
-import '../../../primitives/skeleton/skeleton.js';
-import '../../../primitives/tile/tile.js';
+import '../../feedback/status-dot/status-dot.js';
+import '../../feedback/skeleton/skeleton.js';
+import '../../layout/tile/tile.js';
 import type { DataTableData, SortState } from '../../../types.js';
 import { type FilterValue } from './filters.js';
 type Panel = {

package/dist-elements/types/components/tables/data-table/editing.d.ts

@@ -7,7 +7,7 @@
  * never keeps the value. Only the desktop table edits.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/spinner/spinner.js';
+import '../../feedback/spinner/spinner.js';
 import type { CellValue, DataTableData, TableCellRef, TableColumnData } from '../../../types.js';
 export interface CellPosition {
     row: number;

package/dist-elements/types/components/tables/data-table/filters.d.ts

@@ -6,9 +6,9 @@
  * stays first and shown. Range and period filters are not here.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/popover/popover.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/tooltip/tooltip.js';
+import '../../overlays/popover/popover.js';
+import '../../actions/button/button.js';
+import '../../overlays/tooltip/tooltip.js';
 import '../../overlays/drawer/drawer.js';
 import '../sortable-list/sortable-list.js';
 import type { SortableItem } from '../sortable-list/sortable-list.js';

package/dist-elements/types/components/tables/description-list/description-list.d.ts

@@ -7,8 +7,8 @@
  * Events: `lintje-navigate` `{ href }`.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
-import { type Tone } from '../../../primitives/shared/tone.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import { type Tone } from '../../shared/tone.js';
 /** A link on the right of the value, for changing it ("Locatie wijzigen" as accessible name). */
 export interface DescriptionAction {
     href: string;

package/dist-elements/types/components/tables/list/list.d.ts

@@ -16,11 +16,11 @@ import { LintjeElement } from '../../../core/element.js';
 import '../../feedback/empty-state/empty-state.js';
 import '../../actions/menu-button/menu-button.js';
 import '../../inputs/text-input/text-input.js';
-import '../../../primitives/badge/badge.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/progress-bar/progress-bar.js';
+import '../../feedback/badge/badge.js';
+import '../../actions/button/button.js';
+import '../../feedback/progress-bar/progress-bar.js';
 import type { MenuEntry } from '../../actions/menu-button/menu-button.js';
-import type { BadgeTone } from '../../../primitives/badge/badge.js';
+import type { BadgeTone } from '../../feedback/badge/badge.js';
 export interface ListItem {
     id: string;
     title: string;

package/dist-elements/types/components/tables/tree-view/tree-view.d.ts

@@ -9,7 +9,7 @@
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/spinner/spinner.js';
+import '../../feedback/spinner/spinner.js';
 export interface TreeNode {
     id: string;
     label: string;

package/dist-elements/types/core/focus.d.ts

@@ -1,6 +1,6 @@
 /**
  * Where the focus is, through every shadow root, and whether a modal dialog stands around a
- * node. In `core/` because primitives and components both need it.
+ * node. In `core/` because tags in every category need it.
  */
 /** The element that really has focus, through every shadow root below it. */
 export declare function deepActiveElement(): HTMLElement | null;

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

@@ -5,15 +5,15 @@
  * names come from their one list, `tokens/colors.ts`.
  */
 import type { DataColor } from './tokens/colors.js';
-import type { ContentStateKind, Tone } from './primitives/shared/tone.js';
-import type { StatusTone } from './primitives/status-dot/status-dot.js';
-import type { AnnouncementKind } from './primitives/shared/announcement-block.js';
+import type { ContentStateKind, Tone } from './components/shared/tone.js';
+import type { StatusTone } from './components/feedback/status-dot/status-dot.js';
+import type { AnnouncementKind } from './components/shared/announcement-block.js';
 import type { ChartSpec, MapSpec } from './components/shared/charts/shared/types.js';
 import type { MenuEntry } from './components/actions/menu-button/menu-button.js';
 import type { NotificationItem } from './components/frame/notifications/notifications.js';
-export type { BarSeriesData, ChartColor, ChartEvent, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, } from './components/shared/charts/shared/types.js';
+export type { BarSeriesData, ChartColor, ChartEvent, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, RadarSeriesData, } from './components/shared/charts/shared/types.js';
 export type { DataColor } from './tokens/colors.js';
-export type { Tone, WorkState, ContentStateKind } from './primitives/shared/tone.js';
+export type { Tone, WorkState, ContentStateKind } from './components/shared/tone.js';
 /** Settings every view receives, taken from the URL by the host. */
 export interface FrameSettings {
     mode?: 'light' | 'dark';
@@ -26,7 +26,7 @@ export interface ContentState {
     lastKnown?: string;
 }
 /** A source's delivery status: the status column's and `lintje-status-dot`'s own words, each a `Tone`. */
-export type { StatusTone } from './primitives/status-dot/status-dot.js';
+export type { StatusTone } from './components/feedback/status-dot/status-dot.js';
 export type TrendDirection = 'up' | 'down' | 'flat';
 /**
  * One colour per variable, named after the Rijkshuisstijl colour it is: a `DataColor`, the
@@ -334,7 +334,7 @@ export interface TableDetailField {
     unit?: string;
 }
 /** `outage` interrupts and cannot be closed; `error` is a failure the reader may put away. */
-export type { AnnouncementKind } from './primitives/shared/announcement-block.js';
+export type { AnnouncementKind } from './components/shared/announcement-block.js';
 export interface AnnouncementData {
     kind?: AnnouncementKind;
     title?: string;
@@ -556,6 +556,50 @@ export interface ShellData extends FrameSettings {
     search?: boolean;
     notifications?: NotificationItem[];
 }
+export type LogLevel = 'error' | 'warning' | 'info' | 'debug';
+/** One line of a log. Everything but `id` and `message` may be missing: it is then left out, never guessed. */
+export interface LogEntry {
+    id: string;
+    /** The text, over more lines where the source wrote them (a stack trace). */
+    message: string;
+    /** The moment as ISO 8601. */
+    at?: string;
+    /** The moment as the host writes it: `14:03:27.118`. */
+    time?: string;
+    level?: LogLevel;
+    /** Where it came from: `import`, `api`. */
+    source?: string;
+    /** The line number in the source, for output without time or level. */
+    line?: number;
+    /** A longer text or JSON the host has laid out, shown when the line opens. */
+    details?: string;
+}
+/** What the reader filters on; the host keeps it in the URL and sends only matching lines. */
+export interface LogFilter {
+    level?: LogLevel | 'all';
+    /** The term `lintje-find` looks for. Finding marks; it filters only with `onlyHits`. */
+    search?: string;
+    onlyHits?: boolean;
+}
+/**
+ * Events: `lintje-log-filter-change` `LogFilter`, `lintje-log-select` `string | null` (the chosen
+ * line), `lintje-log-action` `string` (one of `actions`), `lintje-log-retry`.
+ */
+export interface LogViewerData extends FrameSettings, TileData, ContentState {
+    /** Oldest first. */
+    entries: LogEntry[];
+    /** The source still writes: the live badge, and the view follows the newest line. */
+    live?: boolean;
+    filter?: LogFilter;
+    /** Lines per level in the whole log, for the counts in the level filter. */
+    counts?: Partial<Record<LogLevel | 'all', number>>;
+    /** How many older lines the host no longer sends. */
+    truncated?: number;
+    /** The chosen line's `id`. */
+    selected?: string | null;
+    /** The host's own actions, in the "Meer" menu after the view's own. */
+    actions?: MenuEntry[];
+}
 /**
  * A stretch of a message read as a term: character offsets, end exclusive. `kind` is the Dutch
  * caption ("Periode"). `certain: false`: ambiguous or outside the chosen sources, drawn dashed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lintje",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Lintje: the Rijkshuisstijl design system as Lit web components",
   "license": "EUPL-1.2",