@contraagent/elements 0.0.0-stage → 0.1.0

package/dist/table/types.d.ts

@@ -0,0 +1,48 @@
+/** A column: its header, its width, and what a cell shows for a row. */
+export interface DataColumn<R> {
+    /** Unique among the columns: `data-col` on its cells, the `id` of `cae-sort`. */
+    id: string;
+    header: string;
+    /** The header's tooltip. */
+    tip?: string;
+    /** `end` for numbers: right-aligned, tabular figures. */
+    align?: 'start' | 'end';
+    /** A CSS grid track: '72px', 'minmax(0, 1fr)' (the default). */
+    width?: string;
+    /** The cell: a template, a string or a number. */
+    cell: (row: R, index: number) => unknown;
+    /** The cell as plain text: what `sortRows` orders by when the column has no `compare`. */
+    text?: (row: R) => string;
+    /** The order of two rows by this column, ascending. */
+    compare?: (a: R, b: R) => number;
+    /**
+     * The header is a button that sends `cae-sort` (true when the column has `compare`).
+     * Without `compare` and `text`, `sortRows` orders by the cell when it is a string or a number.
+     */
+    sortable?: boolean;
+    /** The cell names its row (`<th scope="row">`): the first such column does. */
+    rowHeader?: boolean;
+}
+/** The column the rows are ordered by. */
+export interface SortState {
+    id: string;
+    direction: 'asc' | 'desc';
+}
+export interface DataTableStrings {
+    /** The table has no rows. */
+    empty: string;
+    /** A sortable header's tooltip: the click orders the rows ascending. */
+    sortAscending: string;
+    /** A sortable header's tooltip: the click orders the rows descending. */
+    sortDescending: string;
+}
+export declare const DEFAULT_DATA_TABLE_STRINGS: Readonly<DataTableStrings>;
+/** Whether a column's header sorts. */
+export declare const isSortable: <R>(c: DataColumn<R>) => boolean;
+/**
+ * `rows` ordered by the column `sort` names: by its `compare`, else its `text`, else
+ * its cell when that is a string or a number; equal rows keep their order. The rows
+ * as they are when no column matches.
+ */
+export declare function sortRows<R>(rows: readonly R[], columns: readonly DataColumn<R>[], sort: SortState | null): R[];
+//# sourceMappingURL=types.d.ts.map

package/dist/table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAGA,wEAAwE;AACxE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,iFAAiF;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,0FAA0F;IAC1F,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,aAAa,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAIjE,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,UAAU,GAAI,CAAC,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,KAAG,OAAoC,CAAC;AAEtF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,CAAC,EAAE,CAc9G"}

package/dist/table/types.js

@@ -0,0 +1,30 @@
+// The data a `<cae-data-table>` shows: its columns, each a function of a row,
+// and its words.
+export const DEFAULT_DATA_TABLE_STRINGS = {
+    empty: 'No rows',
+    sortAscending: 'Sort ascending',
+    sortDescending: 'Sort descending',
+};
+/** Whether a column's header sorts. */
+export const isSortable = (c) => c.sortable ?? !!c.compare;
+/**
+ * `rows` ordered by the column `sort` names: by its `compare`, else its `text`, else
+ * its cell when that is a string or a number; equal rows keep their order. The rows
+ * as they are when no column matches.
+ */
+export function sortRows(rows, columns, sort) {
+    const c = sort && columns.find((x) => x.id === sort.id);
+    if (!sort || !c)
+        return [...rows];
+    const sign = sort.direction === 'desc' ? -1 : 1;
+    const { compare, text } = c;
+    // A cell that is neither a string nor a number (a template) keeps its place.
+    const value = (r, i) => {
+        const v = text ? text(r) : c.cell(r, i);
+        return typeof v === 'number' || typeof v === 'string' ? v : '';
+    };
+    const keyed = rows.map((r, i) => ({ r, i, v: compare ? 0 : value(r, i) }));
+    const cmp = (a, b) => compare ? compare(a.r, b.r) : typeof a.v === 'number' && typeof b.v === 'number' ? a.v - b.v : String(a.v).localeCompare(String(b.v), undefined, { numeric: true });
+    return keyed.sort((a, b) => sign * cmp(a, b) || a.i - b.i).map((x) => x.r);
+}
+//# sourceMappingURL=types.js.map

package/dist/table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,iBAAiB;AA2CjB,MAAM,CAAC,MAAM,0BAA0B,GAA+B;IACpE,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;CAClC,CAAC;AAEF,uCAAuC;AACvC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,CAAgB,EAAW,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAEtF;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAI,IAAkB,EAAE,OAAiC,EAAE,IAAsB;IACvG,MAAM,CAAC,GAAG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IAC5B,6EAA6E;IAC7E,MAAM,KAAK,GAAG,CAAC,CAAI,EAAE,CAAS,EAAE,EAAE;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACxC,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,CAAC,CAAC;IACF,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,GAAG,GAAG,CAAC,CAAyB,EAAE,CAAyB,EAAE,EAAE,CACnE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACtK,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,CAAC"}

package/dist/themes/boot.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A script for a page's `<head>`: it sets `data-ca-theme` on `<html>` from the
+ * reader's choice before the first paint, as `resolveTheme(preferredTheme(), prefersLight())`
+ * does. With `themeRules` in a `<style>` beside it, the page opens in its theme.
+ */
+export declare const themeBootScript: string;
+//# sourceMappingURL=boot.d.ts.map

package/dist/themes/boot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.d.ts","sourceRoot":"","sources":["../../src/themes/boot.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAI0D,CAAC"}

package/dist/themes/boot.js

@@ -0,0 +1,14 @@
+// The page's theme before the first paint.
+import { THEME_STORE_KEY } from './choice.js';
+import { DEFAULT_THEME, SYSTEM_THEMES, THEME_CHOICES, THEME_NAMES } from './data.js';
+/**
+ * A script for a page's `<head>`: it sets `data-ca-theme` on `<html>` from the
+ * reader's choice before the first paint, as `resolveTheme(preferredTheme(), prefersLight())`
+ * does. With `themeRules` in a `<style>` beside it, the page opens in its theme.
+ */
+export const themeBootScript = `(function(){var c=null;try{c=localStorage.getItem(${JSON.stringify(THEME_STORE_KEY)})}catch(e){}
+var names=${JSON.stringify(THEME_NAMES)},choices=${JSON.stringify(THEME_CHOICES)};
+if(choices.indexOf(c)<0)c=${JSON.stringify(DEFAULT_THEME)};
+if(c==="system")c=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?${JSON.stringify(SYSTEM_THEMES.light)}:${JSON.stringify(SYSTEM_THEMES.dark)};
+if(names.indexOf(c)>=0)document.documentElement.setAttribute("data-ca-theme",c);})();`;
+//# sourceMappingURL=boot.js.map

package/dist/themes/boot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.js","sourceRoot":"","sources":["../../src/themes/boot.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAErF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,qDAAqD,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC;YACvG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,YAAY,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;4BACpD,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;2FACkC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC;sFAC9E,CAAC"}

package/dist/themes/choice.d.ts

@@ -0,0 +1,16 @@
+import { type ThemeChoice, type ThemeName } from './data.js';
+export declare const isThemeName: (x: unknown) => x is ThemeName;
+export declare const isThemeChoice: (x: unknown) => x is ThemeChoice;
+/** The theme a choice shows: `system` by the system's colour scheme; anything else not a theme, the default. */
+export declare function resolveTheme(choice: unknown, prefersLight: boolean): ThemeName;
+/** Where the reader's choice is kept (this browser only). */
+export declare const THEME_STORE_KEY = "contraagent:theme";
+type Store = Pick<Storage, 'getItem' | 'setItem'>;
+/** The reader's choice from an earlier visit, else the default theme. */
+export declare function preferredTheme(store?: Store | undefined): ThemeChoice;
+/** Remember the reader's choice for the next visit. */
+export declare function rememberTheme(choice: ThemeChoice, store?: Store | undefined): void;
+/** Whether the system asks for a light colour scheme. */
+export declare const prefersLight: () => boolean;
+export {};
+//# sourceMappingURL=choice.d.ts.map

package/dist/themes/choice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.d.ts","sourceRoot":"","sources":["../../src/themes/choice.ts"],"names":[],"mappings":"AAEA,OAAO,EAA4D,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAEvH,eAAO,MAAM,WAAW,GAAI,GAAG,OAAO,KAAG,CAAC,IAAI,SAA4D,CAAC;AAC3G,eAAO,MAAM,aAAa,GAAI,GAAG,OAAO,KAAG,CAAC,IAAI,WAAgE,CAAC;AAEjH,gHAAgH;AAChH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,GAAG,SAAS,CAG9E;AAED,6DAA6D;AAC7D,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAEnD,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AASlD,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,KAAK,GAAE,KAAK,GAAG,SAAqB,GAAG,WAAW,CAQhF;AAED,uDAAuD;AACvD,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,KAAK,GAAG,SAAqB,GAAG,IAAI,CAM7F;AAED,yDAAyD;AACzD,eAAO,MAAM,YAAY,QAAO,OAAoF,CAAC"}

package/dist/themes/choice.js

@@ -0,0 +1,45 @@
+// The reader's choice of a theme: which theme it shows, and remembering it in
+// this browser.
+import { DEFAULT_THEME, SYSTEM_THEMES, THEME_CHOICES, THEME_NAMES } from './data.js';
+export const isThemeName = (x) => THEME_NAMES.includes(x);
+export const isThemeChoice = (x) => THEME_CHOICES.includes(x);
+/** The theme a choice shows: `system` by the system's colour scheme; anything else not a theme, the default. */
+export function resolveTheme(choice, prefersLight) {
+    if (choice === 'system')
+        return prefersLight ? SYSTEM_THEMES.light : SYSTEM_THEMES.dark;
+    return isThemeName(choice) ? choice : DEFAULT_THEME;
+}
+/** Where the reader's choice is kept (this browser only). */
+export const THEME_STORE_KEY = 'contraagent:theme';
+const storage = () => {
+    try {
+        return globalThis.localStorage;
+    }
+    catch {
+        return undefined;
+    }
+};
+/** The reader's choice from an earlier visit, else the default theme. */
+export function preferredTheme(store = storage()) {
+    try {
+        const saved = store?.getItem(THEME_STORE_KEY);
+        if (isThemeChoice(saved))
+            return saved;
+    }
+    catch {
+        /* storage blocked: the default */
+    }
+    return DEFAULT_THEME;
+}
+/** Remember the reader's choice for the next visit. */
+export function rememberTheme(choice, store = storage()) {
+    try {
+        store?.setItem(THEME_STORE_KEY, choice);
+    }
+    catch {
+        /* storage blocked: the choice lasts for this page */
+    }
+}
+/** Whether the system asks for a light colour scheme. */
+export const prefersLight = () => globalThis.matchMedia?.('(prefers-color-scheme: light)').matches ?? false;
+//# sourceMappingURL=choice.js.map

package/dist/themes/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","sourceRoot":"","sources":["../../src/themes/choice.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gBAAgB;AAChB,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAoC,MAAM,WAAW,CAAC;AAEvH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAU,EAAkB,EAAE,CAAE,WAAkC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC3G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,CAAU,EAAoB,EAAE,CAAE,aAAoC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEjH,gHAAgH;AAChH,MAAM,UAAU,YAAY,CAAC,MAAe,EAAE,YAAqB;IACjE,IAAI,MAAM,KAAK,QAAQ;QAAE,OAAO,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;IACxF,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;AACtD,CAAC;AAED,6DAA6D;AAC7D,MAAM,CAAC,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAGnD,MAAM,OAAO,GAAG,GAAsB,EAAE;IACtC,IAAI,CAAC;QACH,OAAO,UAAU,CAAC,YAAY,CAAC;IACjC,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC,CAAC;AAEF,yEAAyE;AACzE,MAAM,UAAU,cAAc,CAAC,QAA2B,OAAO,EAAE;IACjE,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,aAAa,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;IACzC,CAAC;IAAC,MAAM,CAAC;QACP,kCAAkC;IACpC,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,uDAAuD;AACvD,MAAM,UAAU,aAAa,CAAC,MAAmB,EAAE,QAA2B,OAAO,EAAE;IACrF,IAAI,CAAC;QACH,KAAK,EAAE,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,qDAAqD;IACvD,CAAC;AACH,CAAC;AAED,yDAAyD;AACzD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC,+BAA+B,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC"}

package/dist/themes/data.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The built-in themes, in the order of the monitor's theme control. Each is a
+ * full set of tokens. Sources (all MIT-licensed):
+ * - `contraagent-dark`, `contraagent-light`: this package's own palette, MIT.
+ * - `github-dark`, `github-light`, `high-contrast`: GitHub Primer primitives
+ *   (dark, light and dark high contrast), https://github.com/primer/primitives, MIT, (c) GitHub Inc.
+ * - `one-dark`: Atom One Dark, https://github.com/atom/atom/tree/master/packages/one-dark-syntax, MIT, (c) GitHub Inc.
+ * - `nord`: Nord, https://www.nordtheme.com, MIT, (c) Arctic Ice Studio and Sven Greb.
+ */
+export declare const THEME_NAMES: readonly ["contraagent-dark", "contraagent-light", "github-dark", "github-light", "one-dark", "nord", "high-contrast"];
+export type ThemeName = (typeof THEME_NAMES)[number];
+/** A reader's choice: a theme, or `system` (contraagent Dark or contraagent Light, as the system's colour scheme). */
+export type ThemeChoice = ThemeName | 'system';
+/** The choices in the monitor's control, in order. */
+export declare const THEME_CHOICES: readonly ThemeChoice[];
+/** The themes after the first divider of the control: palettes of code editors. */
+export declare const EDITOR_THEMES: readonly ThemeName[];
+/** The theme for a reader who has not chosen. */
+export declare const DEFAULT_THEME: ThemeName;
+/** What `system` shows, by the system's colour scheme. */
+export declare const SYSTEM_THEMES: {
+    readonly dark: "contraagent-dark";
+    readonly light: "contraagent-light";
+};
+/** The name of every token a theme sets (every token without `derive`). */
+export type ThemeToken = 'backdrop' | 'bg' | 'card' | 'panel' | 'panel2' | 'raise' | 'well' | 'track' | 'line' | 'line2' | 'shadow' | 'text' | 'text-2' | 'text-muted' | 'accent' | 'focus' | 'focus-width' | 'selection' | 'status-failed' | 'status-attention' | 'status-done' | 'status-running' | 'status-muted' | 'tint' | 'agent' | 'meter' | 'tok-input' | 'tok-cache-read' | 'tok-cache-write' | 'tok-output' | 'series-1' | 'series-2' | 'series-3' | 'series-4' | 'series-5' | 'series-6' | 'code-keyword' | 'code-string' | 'code-number' | 'code-constant' | 'code-comment' | 'code-function' | 'code-type' | 'code-name';
+export interface Theme {
+    /** The name the theme control shows; a theme's own name, the same in every language. */
+    label: string;
+    /** Light or dark: the `color-scheme` (native controls, scrollbars) and what `system` picks by. */
+    scheme: 'dark' | 'light';
+    tokens: Record<ThemeToken, string>;
+}
+export declare const THEMES: Record<ThemeName, Theme>;
+/** A theme's selector on a page: `:where()` gives it no specificity, so any rule of the page that sets a `--ca-*` property wins. */
+export declare const pageThemeSelector: (name: ThemeName) => string;
+/**
+ * The rules that apply each theme: each sets `color-scheme`, `--ca-color-scheme`
+ * and the theme's `--ca-*` properties. The selector per theme name is
+ * `pageThemeSelector` unless given; inside a shadow root, `n => `:host([data-ca-theme="${n}"])``.
+ */
+export declare function themeRules(selector?: (name: ThemeName) => string): string;
+//# sourceMappingURL=data.d.ts.map

package/dist/themes/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/themes/data.ts"],"names":[],"mappings":"AAaA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,wHAAyH,CAAC;AAClJ,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,sHAAsH;AACtH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,sDAAsD;AACtD,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EAA4H,CAAC;AAC7K,mFAAmF;AACnF,eAAO,MAAM,aAAa,EAAE,SAAS,SAAS,EAAyE,CAAC;AACxH,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,SAA8B,CAAC;AAC3D,0DAA0D;AAC1D,eAAO,MAAM,aAAa;;;CAAwG,CAAC;AAGnI,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAClB,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAC1G,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,WAAW,GACnF,eAAe,GAAG,kBAAkB,GAAG,aAAa,GAAG,gBAAgB,GAAG,cAAc,GAAG,MAAM,GACjG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,YAAY,GACrF,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAC3E,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,GAAG,WAAW,GAAG,WAAW,CAAC;AAEpI,MAAM,WAAW,KAAK;IACpB,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;CACpC;AAUD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,CAiW3C,CAAC;AAIF,oIAAoI;AACpI,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAA6C,CAAC;AAElG;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,QAAQ,GAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAA0B,GAAG,MAAM,CAM5F"}

package/dist/themes/data.js

@@ -0,0 +1,408 @@
+// The built-in themes: one value for every colour token, per theme, and the
+// rules that apply them. Plain data and plain functions (no Lit, no DOM at
+// import), so a page, a build script and the documentation site can read them
+// too (`@contraagent/elements/themes`).
+//
+// A theme is a value for each `--ca-*` property (TOKENS, tokens-list.ts) that
+// has no `derive`: `data-ca-theme="<name>"` on an element sets them there (the
+// rules below), so that element, everything inside it (the page's own CSS too)
+// and every element's shadow root read the same properties. A `--ca-*` property
+// set on that element or inside it wins over the theme. With neither, an element
+// shows the contraagent theme (the fallbacks in `tokenStyles`, styles/tokens.ts).
+import { TOKENS } from './tokens-list.js';
+/**
+ * The built-in themes, in the order of the monitor's theme control. Each is a
+ * full set of tokens. Sources (all MIT-licensed):
+ * - `contraagent-dark`, `contraagent-light`: this package's own palette, MIT.
+ * - `github-dark`, `github-light`, `high-contrast`: GitHub Primer primitives
+ *   (dark, light and dark high contrast), https://github.com/primer/primitives, MIT, (c) GitHub Inc.
+ * - `one-dark`: Atom One Dark, https://github.com/atom/atom/tree/master/packages/one-dark-syntax, MIT, (c) GitHub Inc.
+ * - `nord`: Nord, https://www.nordtheme.com, MIT, (c) Arctic Ice Studio and Sven Greb.
+ */
+export const THEME_NAMES = ['contraagent-dark', 'contraagent-light', 'github-dark', 'github-light', 'one-dark', 'nord', 'high-contrast'];
+/** The choices in the monitor's control, in order. */
+export const THEME_CHOICES = ['contraagent-dark', 'contraagent-light', 'system', 'github-dark', 'github-light', 'one-dark', 'nord', 'high-contrast'];
+/** The themes after the first divider of the control: palettes of code editors. */
+export const EDITOR_THEMES = ['github-dark', 'github-light', 'one-dark', 'nord', 'high-contrast'];
+/** The theme for a reader who has not chosen. */
+export const DEFAULT_THEME = 'contraagent-dark';
+/** What `system` shows, by the system's colour scheme. */
+export const SYSTEM_THEMES = { dark: 'contraagent-dark', light: 'contraagent-light' };
+// Where a value differs from its source palette, the comment says so and why
+// (the contrast rules: text 4.5:1 on every surface and tint, 7:1 in high contrast).
+// The series colours are one categorical palette in a fixed order (blue, orange,
+// aqua, yellow, magenta, green), its light steps in a light theme and its dark
+// steps in a dark one. In that order every adjacent pair stays apart for the
+// colour-blind (CVD ΔE ≥ 8.4) and for everyone (ΔE ≥ 19) on each theme's card;
+// some sit under 3:1 against a card, so an element that uses them names each
+// series in words too (a legend, a table). They are never a status.
+export const THEMES = {
+    'contraagent-dark': {
+        label: 'contraagent Dark',
+        scheme: 'dark',
+        tokens: {
+            backdrop: 'radial-gradient(1100px 520px at 8% -12%, #10203a 0%, transparent 62%), radial-gradient(900px 480px at 108% 4%, #1b1238 0%, transparent 58%), #060a11',
+            bg: '#060a11',
+            card: '#0f1724',
+            panel: '#0f1724',
+            panel2: '#142034',
+            raise: '#1a2740',
+            well: '#0a111c',
+            track: '#1b273b',
+            line: '#1d2940',
+            line2: '#2b3c58',
+            shadow: '#060a11',
+            text: '#e7edf5',
+            'text-2': '#bcc7d6',
+            'text-muted': '#909db2',
+            accent: '#7aa2ff',
+            focus: '#7aa2ff',
+            'focus-width': '2px',
+            selection: '#7aa2ff4d',
+            'status-failed': '#f87171',
+            'status-attention': '#fbbf24',
+            'status-done': '#34d399',
+            'status-running': '#22d3ee',
+            'status-muted': '#94a3b8',
+            tint: '13%',
+            agent: '#b597fb',
+            meter: '#7d8ba3',
+            'tok-input': '#7c86f5',
+            'tok-cache-read': '#3f4d63',
+            'tok-cache-write': '#8796ad',
+            'tok-output': '#d6b8ff',
+            'series-1': '#3987e5',
+            'series-2': '#d95926',
+            'series-3': '#199e70',
+            'series-4': '#c98500',
+            'series-5': '#d55181',
+            'series-6': '#008300',
+            'code-keyword': '#c4a5ff',
+            'code-string': '#7ee2a8',
+            'code-number': '#f5c26b',
+            'code-constant': '#ff9e64',
+            'code-comment': '#74839a',
+            'code-function': '#7dd3fc',
+            'code-type': '#ffd479',
+            'code-name': '#79b8ff',
+        },
+    },
+    // The same hues as contraagent Dark (accent, statuses, identity, code), with
+    // the lightness and saturation set for a light page.
+    'contraagent-light': {
+        label: 'contraagent Light',
+        scheme: 'light',
+        tokens: {
+            backdrop: 'radial-gradient(1100px 520px at 8% -12%, #dde7fb 0%, transparent 62%), radial-gradient(900px 480px at 108% 4%, #ebe3fa 0%, transparent 58%), #eef2f8',
+            bg: '#eef2f8',
+            card: '#ffffff',
+            panel: '#ffffff',
+            panel2: '#f7f9fc',
+            raise: '#e6ecf5',
+            well: '#f3f6fa',
+            track: '#e1e7f0',
+            line: '#d6dde8',
+            line2: '#b6c2d3',
+            shadow: '#0f172438',
+            text: '#0f1724',
+            'text-2': '#34415a',
+            'text-muted': '#556279',
+            accent: '#2f58d4',
+            focus: '#2f58d4',
+            'focus-width': '2px',
+            selection: '#2f58d42e',
+            'status-failed': '#b8132d',
+            'status-attention': '#6c4801',
+            'status-done': '#026b49',
+            'status-running': '#01525f',
+            'status-muted': '#56637a',
+            tint: '11%',
+            agent: '#6f45c0',
+            meter: '#8a97ab',
+            'tok-input': '#4d4cc8',
+            'tok-cache-read': '#cdd6e3',
+            'tok-cache-write': '#7d8aa0',
+            'tok-output': '#a07ad9',
+            'series-1': '#2a78d6',
+            'series-2': '#eb6834',
+            'series-3': '#1baf7a',
+            'series-4': '#eda100',
+            'series-5': '#e87ba4',
+            'series-6': '#008300',
+            'code-keyword': '#6f49a8',
+            'code-string': '#076b40',
+            'code-number': '#7b5605',
+            'code-constant': '#964605',
+            'code-comment': '#5d6b80',
+            'code-function': '#086586',
+            'code-type': '#785902',
+            'code-name': '#095ea8',
+        },
+    },
+    'github-dark': {
+        label: 'GitHub Dark',
+        scheme: 'dark',
+        tokens: {
+            backdrop: '#010409',
+            bg: '#010409',
+            card: '#0d1117',
+            panel: '#0d1117',
+            panel2: '#151b23',
+            raise: '#212830',
+            well: '#010409',
+            track: '#262c36',
+            line: '#262c36',
+            line2: '#3d444d',
+            shadow: '#010409',
+            text: '#f0f6fc',
+            'text-2': '#d1d7e0',
+            'text-muted': '#9299a2',
+            accent: '#4796fb',
+            focus: '#1f6feb',
+            'focus-width': '2px',
+            selection: '#388bfd4d',
+            'status-failed': '#fc554d',
+            'status-attention': '#d29922',
+            'status-done': '#3fb950',
+            'status-running': '#39c5cf',
+            'status-muted': '#9198a1',
+            tint: '15%',
+            agent: '#ab7df8',
+            meter: '#656c76',
+            'tok-input': '#58a6ff',
+            'tok-cache-read': '#2f3742',
+            'tok-cache-write': '#656c76',
+            'tok-output': '#d2a8ff',
+            'series-1': '#3987e5',
+            'series-2': '#d95926',
+            'series-3': '#199e70',
+            'series-4': '#c98500',
+            'series-5': '#d55181',
+            'series-6': '#008300',
+            'code-keyword': '#ff7b72',
+            'code-string': '#a5d6ff',
+            'code-number': '#79c0ff',
+            'code-constant': '#79c0ff',
+            'code-comment': '#9198a1',
+            'code-function': '#d2a8ff',
+            'code-type': '#ffa657',
+            'code-name': '#7ee787',
+        },
+    },
+    'github-light': {
+        label: 'GitHub Light',
+        scheme: 'light',
+        tokens: {
+            backdrop: '#f6f8fa',
+            bg: '#f6f8fa',
+            card: '#ffffff',
+            panel: '#ffffff',
+            panel2: '#ffffff',
+            raise: '#eff2f5',
+            well: '#f6f8fa',
+            track: '#e6eaef',
+            line: '#d1d9e0',
+            line2: '#b7c0ca',
+            shadow: '#1f232833',
+            text: '#1f2328',
+            'text-2': '#393f46',
+            'text-muted': '#59636e',
+            accent: '#0165d6',
+            focus: '#0165d6',
+            'focus-width': '2px',
+            selection: '#0969da33',
+            'status-failed': '#cd1e2b',
+            'status-attention': '#916103',
+            'status-done': '#147b33',
+            'status-running': '#10767d',
+            'status-muted': '#59636e',
+            tint: '8%',
+            agent: '#804ddc',
+            meter: '#818b98',
+            'tok-input': '#54aeff',
+            'tok-cache-read': '#d1d9e0',
+            'tok-cache-write': '#818b98',
+            'tok-output': '#a475f9',
+            'series-1': '#2a78d6',
+            'series-2': '#eb6834',
+            'series-3': '#1baf7a',
+            'series-4': '#eda100',
+            'series-5': '#e87ba4',
+            'series-6': '#008300',
+            'code-keyword': '#cf222e',
+            'code-string': '#0a3069',
+            'code-number': '#0550ae',
+            'code-constant': '#0550ae',
+            'code-comment': '#59636e',
+            'code-function': '#6639ba',
+            'code-type': '#953800',
+            'code-name': '#116329',
+        },
+    },
+    'one-dark': {
+        label: 'One Dark',
+        scheme: 'dark',
+        tokens: {
+            backdrop: '#21252b',
+            bg: '#21252b',
+            card: '#282c34',
+            panel: '#282c34',
+            panel2: '#2c313a',
+            raise: '#2c313a',
+            well: '#21252b',
+            track: '#3a3f4b',
+            line: '#181a1f',
+            line2: '#4b5263',
+            shadow: '#0e1013',
+            text: '#d7dae0',
+            'text-2': '#abb2bf',
+            'text-muted': '#a7afbe',
+            accent: '#64b2f2',
+            focus: '#528bff',
+            'focus-width': '2px',
+            selection: '#3e4451',
+            'status-failed': '#fc858d',
+            'status-attention': '#e5c07b',
+            'status-done': '#98c379',
+            'status-running': '#57b7c3',
+            'status-muted': '#a7afbe',
+            tint: '12%',
+            agent: '#d788ee',
+            meter: '#5c6370',
+            'tok-input': '#61afef',
+            'tok-cache-read': '#3e4451',
+            'tok-cache-write': '#5c6370',
+            'tok-output': '#c678dd',
+            'series-1': '#3987e5',
+            'series-2': '#d95926',
+            'series-3': '#199e70',
+            'series-4': '#c98500',
+            'series-5': '#d55181',
+            'series-6': '#008300',
+            'code-keyword': '#c678dd',
+            'code-string': '#98c379',
+            'code-number': '#d19a66',
+            'code-constant': '#d19a66',
+            'code-comment': '#8f949e',
+            'code-function': '#61afef',
+            'code-type': '#e5c07b',
+            'code-name': '#e36e77',
+        },
+    },
+    nord: {
+        label: 'Nord',
+        scheme: 'dark',
+        tokens: {
+            backdrop: '#2e3440',
+            bg: '#242933',
+            card: '#2e3440',
+            panel: '#2e3440',
+            panel2: '#323946',
+            raise: '#3b4252',
+            well: '#272c36',
+            track: '#3b4252',
+            line: '#3b4252',
+            line2: '#4c566a',
+            shadow: '#1d2129',
+            text: '#eceff4',
+            'text-2': '#d8dee9',
+            'text-muted': '#adbcd9',
+            accent: '#9dbedf',
+            focus: '#88c0d0',
+            'focus-width': '2px',
+            selection: '#4c566a',
+            'status-failed': '#fe9aa1',
+            'status-attention': '#ebcb8b',
+            'status-done': '#a5c18e',
+            'status-running': '#89c1d1',
+            'status-muted': '#adbcd9',
+            tint: '13%',
+            agent: '#d0a9c9',
+            meter: '#7b88a1',
+            'tok-input': '#5e81ac',
+            'tok-cache-read': '#4c566a',
+            'tok-cache-write': '#7b88a1',
+            'tok-output': '#b48ead',
+            'series-1': '#3987e5',
+            'series-2': '#d95926',
+            'series-3': '#199e70',
+            'series-4': '#c98500',
+            'series-5': '#d55181',
+            'series-6': '#008300',
+            'code-keyword': '#81a1c1',
+            'code-string': '#a3be8c',
+            'code-number': '#b790b0',
+            'code-constant': '#d38972',
+            'code-comment': '#8f9db8',
+            'code-function': '#88c0d0',
+            'code-type': '#8fbcbb',
+            'code-name': '#8fbcbb',
+        },
+    },
+    'high-contrast': {
+        label: 'High contrast',
+        scheme: 'dark',
+        tokens: {
+            backdrop: '#010409',
+            bg: '#010409',
+            card: '#0a0c10',
+            panel: '#0a0c10',
+            panel2: '#0a0c10',
+            raise: '#1c2128',
+            well: '#010409',
+            track: '#272b33',
+            line: '#7a828e',
+            line2: '#9ea7b3',
+            shadow: '#000000',
+            text: '#ffffff',
+            'text-2': '#f0f3f6',
+            'text-muted': '#bdc4cc',
+            accent: '#7abbfe',
+            focus: '#7abbfe',
+            'focus-width': '3px',
+            selection: '#409eff66',
+            'status-failed': '#ffacb8',
+            'status-attention': '#fad209',
+            'status-done': '#0ef38e',
+            'status-running': '#62ceff',
+            'status-muted': '#bdc4cc',
+            tint: '12%',
+            agent: '#c299fe',
+            meter: '#9ea7b3',
+            'tok-input': '#409eff',
+            'tok-cache-read': '#525964',
+            'tok-cache-write': '#9ea7b3',
+            'tok-output': '#dbb7ff',
+            'series-1': '#3987e5',
+            'series-2': '#d95926',
+            'series-3': '#199e70',
+            'series-4': '#c98500',
+            'series-5': '#d55181',
+            'series-6': '#008300',
+            'code-keyword': '#ff9492',
+            'code-string': '#addcff',
+            'code-number': '#91cbff',
+            'code-constant': '#91cbff',
+            'code-comment': '#bdc4cc',
+            'code-function': '#dbb7ff',
+            'code-type': '#ffb757',
+            'code-name': '#72f088',
+        },
+    },
+};
+const propOf = Object.fromEntries(TOKENS.map((t) => [t.name, t.prop]));
+/** A theme's selector on a page: `:where()` gives it no specificity, so any rule of the page that sets a `--ca-*` property wins. */
+export const pageThemeSelector = (name) => `:where([data-ca-theme="${name}"])`;
+/**
+ * The rules that apply each theme: each sets `color-scheme`, `--ca-color-scheme`
+ * and the theme's `--ca-*` properties. The selector per theme name is
+ * `pageThemeSelector` unless given; inside a shadow root, `n => `:host([data-ca-theme="${n}"])``.
+ */
+export function themeRules(selector = pageThemeSelector) {
+    return THEME_NAMES.map((n) => {
+        const t = THEMES[n];
+        const decls = Object.entries(t.tokens).map(([k, v]) => `${propOf[k]}: ${v};`);
+        return `${selector(n)} { color-scheme: ${t.scheme}; --ca-color-scheme: ${t.scheme}; ${decls.join(' ')} }`;
+    }).join('\n');
+}
+//# sourceMappingURL=data.js.map