@crewlethq/ui 0.17.1 → 0.18.0

package/dist/SheetModel/index.js

@@ -0,0 +1,3 @@
+export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-YYZRLLLY.js';
+import '../chunk-S35G6PNC.js';
+import '../chunk-AYKXMIOR.js';

package/dist/SheetModel/labels.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Every string a sheet says, in one table both renderers read, so the React
+ * grid and the artifact kit's custom element say the same words and a host
+ * overrides them in one place.
+ */
+import type { SheetColumnType, SheetSyncState } from './types.js';
+export interface SheetLabels {
+    /** The row number column's header, read but not seen. */
+    rowHeader: string;
+    /** The add-row control. */
+    addRow: string;
+    /** An empty cell, read but not seen. */
+    empty: string;
+    checked: string;
+    unchecked: string;
+    /** A rating, read out: "3 of 5 stars". */
+    rating: (value: number, max: number) => string;
+    /** An option that was archived after a value chose it. */
+    archived: (label: string) => string;
+    /** A person value the host could not resolve to a name. */
+    unknownPerson: string;
+    /** A column type, for a header's description and a schema editor. */
+    types: Record<SheetColumnType, string>;
+    /** A pending cell, in its description (D23). */
+    saving: string;
+    /** The default refusal when the host gives no reason: the reader cannot edit. */
+    forbidden: string;
+    /** A refusal the engine gave no reason for. */
+    couldNotSave: string;
+    /** A value that does not fit its column. */
+    notANumber: (column: string) => string;
+    belowMin: (column: string, min: string) => string;
+    aboveMax: (column: string, max: string) => string;
+    tooLong: (column: string, max: number) => string;
+    required: (column: string) => string;
+    notAnOption: (column: string) => string;
+    tooManyItems: (column: string, max: number) => string;
+    notAPerson: (column: string) => string;
+    notADate: (column: string) => string;
+    notAUrl: (column: string) => string;
+    notARating: (column: string, max: number) => string;
+    notABoolean: (column: string) => string;
+    /** A read-only cell a person tried to change. */
+    readOnly: (column: string) => string;
+    /** A remote write landed on the cell being edited. */
+    conflict: (writer: string, value: string) => string;
+    keepMine: string;
+    useTheirs: (writer: string) => string;
+    /** The writer of a conflicting change, when the host could not name them. */
+    someone: string;
+    /** A change mark's words: "Changed by Maya Ortiz, 10:42. Was 6.8." */
+    changed: (by: string, at: string, previous: string | null) => string;
+    /** The per-cell history control and its shortcut's description. */
+    history: string;
+    /** The sync strip. */
+    sync: (state: SheetSyncState) => string;
+    retry: string;
+    /** The editor's filter box in an option list. */
+    filter: string;
+    /** An option list with nothing left to show. */
+    noOptions: string;
+    /** Clears a select or a person cell from its list. */
+    clear: string;
+    /** The keyboard help a grid is described by. */
+    keyboardHelp: string;
+    /** A sort, for the header's control. */
+    sortBy: (column: string) => string;
+}
+export declare const SHEET_LABELS: SheetLabels;
+/** Labels with a caller's overrides applied, the one way both renderers merge them. */
+export declare function sheetLabels(overrides?: Partial<SheetLabels>): SheetLabels;

package/dist/SheetModel/navigation.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The sheet's keyboard model and geometry, as plain arithmetic both renderers
+ * share: which cell a key moves to, which cells a range covers, which rows a
+ * scroll position shows, and which way an editor's list opens.
+ *
+ * Positions are indexes into what is drawn: `row` counts the drawn rows from 0
+ * (the header row is -1) and `col` counts the drawn columns from 0.
+ */
+import type { SheetColumn, SheetColumnType } from './types.js';
+export interface SheetPosition {
+    row: number;
+    col: number;
+}
+export interface SheetBounds {
+    /** Data rows drawn. */
+    rows: number;
+    /** Columns drawn. */
+    cols: number;
+    /** Rows a PageUp or a PageDown moves. */
+    page: number;
+}
+/** The modifier state a move reads, so a caller hands over a KeyboardEvent or anything shaped like one. */
+export interface SheetKey {
+    key: string;
+    shiftKey?: boolean | undefined;
+    ctrlKey?: boolean | undefined;
+    metaKey?: boolean | undefined;
+    altKey?: boolean | undefined;
+}
+/** Whether the platform's command modifier is held: Command on a Mac, Control elsewhere, either accepted. */
+export declare const isMod: (key: SheetKey) => boolean;
+/**
+ * Where a navigation key moves the active cell, or null for a key that is not
+ * one. The header row (-1) is reachable from the first row and moves along
+ * itself; Tab is not handled here, because at the row's edge it leaves the
+ * grid (the grid is one tab stop) rather than wrapping.
+ */
+export declare function moveFrom(at: SheetPosition, key: SheetKey, bounds: SheetBounds): SheetPosition | null;
+/** A rectangle of cells, as its inclusive corners. */
+export interface SheetRange {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+/** The range an anchor and the active cell span. A header position counts as the first row. */
+export declare function rangeOf(anchor: SheetPosition, active: SheetPosition): SheetRange;
+export declare const inRange: (range: SheetRange, row: number, col: number) => boolean;
+/** Whether a range is more than the one cell. */
+export declare const isMultiCell: (range: SheetRange) => boolean;
+/** The rows a scroll position shows, with an overscan either side, as [first, last] inclusive. */
+export declare function visibleRows(scrollTop: number, viewport: number, rowHeight: number, rows: number, overscan?: number): [number, number];
+/** The scrollTop that brings a row fully into view, or the current one when it already is. */
+export declare function scrollToRow(row: number, scrollTop: number, viewport: number, rowHeight: number, header: number): number;
+/**
+ * Which way an editor's list opens from its cell: below by default, above
+ * when there is not room below and more room above. Measured in the scroller's
+ * own coordinates, so a list never opens off the edge it would be clipped at.
+ */
+export declare function editorSide(cellTop: number, cellBottom: number, viewTop: number, viewBottom: number, panelHeight: number): 'below' | 'above';
+/** The width each type takes when its column declares none, in px. */
+export declare const SHEET_COLUMN_WIDTHS: Readonly<Record<SheetColumnType, number>>;
+/** The width of the row number column, in px. */
+export declare const SHEET_ROW_NUMBER_WIDTH = 52;
+/** The row height a sheet assumes until it has measured `--size-sheet-row`, in px. */
+export declare const SHEET_ROW_HEIGHT = 32;
+export declare const columnWidth: (column: Pick<SheetColumn, "type" | "width">) => number;
+/**
+ * Each column's offset from the leading edge, in px, after the row number
+ * column: what a frozen column's `inset-inline-start` is.
+ */
+export declare function columnOffsets(columns: readonly Pick<SheetColumn, 'type' | 'width'>[]): number[];
+/**
+ * The columns in drawing order: the frozen ones lead, in their own order, so
+ * a frozen column is never stranded behind a scrolled one.
+ */
+export declare function drawnColumns<C extends Pick<SheetColumn, 'frozen'>>(columns: readonly C[]): C[];
+/** Whether a key starts typing into a cell: one printable character with no command modifier. */
+export declare const isTypingKey: (key: SheetKey) => boolean;

package/dist/SheetModel/options.d.ts

@@ -0,0 +1,28 @@
+/**
+ * What an option's colour name means on the sheet.
+ *
+ * A SELECT CHIP is an author's category, drawn in one of the six node hues
+ * the author chose for it (or neutral): chosen, never derived, which is the
+ * one sense in which a hue may name a thing rather than a state.
+ *
+ * A STATUS is a state, so it is drawn in one of the five tones, never a hue:
+ * the dashboard's state colours keep their meaning on a sheet too. Its tone
+ * is the colour name when that names a tone or a hue a tone is drawn in, and
+ * otherwise follows its category.
+ *
+ * Colour is never the only carrier: every chip and every status carries its
+ * label, and a status carries its dot.
+ */
+import { type NodeHue } from '../utils/nodeHue.js';
+import type { Tone } from '../utils/tone.js';
+import type { SheetColumn, SheetOption } from './types.js';
+/** The hue a select chip is drawn in, or neutral for none, an unknown name or a grey. */
+export declare function optionHue(color: string | undefined): NodeHue | 'neutral';
+/** The tone a status option is drawn in. */
+export declare function statusTone(option: Pick<SheetOption, 'color' | 'category'>): Tone;
+/** The option an id names in a column, archived ones included, or undefined. */
+export declare function findOption(column: Pick<SheetColumn, 'options'>, id: string): SheetOption | undefined;
+/** The options a person may still choose: archived ones are drawn but never offered. */
+export declare function liveOptions(column: Pick<SheetColumn, 'options'>): SheetOption[];
+/** Parses the kit's `options` attribute: `Gold:amber,Silver:neutral,Bronze:rose`, ids derived from labels. */
+export declare function parseOptionList(text: string): SheetOption[];

package/dist/SheetModel/types.d.ts

@@ -0,0 +1,126 @@
+/**
+ * The shapes an editable sheet is drawn from.
+ *
+ * They mirror the engine's datastore schema (`artifacts.Column`,
+ * `artifacts.Option`) closely enough that a host maps a collection's schema
+ * onto them field for field, and loosely enough that a page can declare a
+ * sheet by hand. Values travel as the JSON the datastore holds: a sheet
+ * normalises what it is given (`normalizeValue`) rather than trusting it.
+ */
+import type { NodeHue } from '../utils/nodeHue.js';
+/** Every column type a sheet draws and edits: the engine's `artifacts.ColumnTypes`, in its order. */
+export declare const SHEET_COLUMN_TYPES: readonly ["text", "longtext", "number", "checkbox", "select", "multiselect", "status", "person", "date", "url", "rating"];
+export type SheetColumnType = (typeof SHEET_COLUMN_TYPES)[number];
+/** Whether a value read off the wire names a column type this build draws. */
+export declare const isSheetColumnType: (value: unknown) => value is SheetColumnType;
+/** A status option's category, which decides its tone when its colour names none. */
+export type SheetStatusCategory = 'todo' | 'in_progress' | 'done' | 'blocked';
+/** One option of a select, multi-select or status column. Ids are stable; labels and colours may change. */
+export interface SheetOption {
+    id: string;
+    label: string;
+    /** A design-token hue or tone name (`amber`, `neutral`, `success`), never a literal colour. */
+    color?: string | undefined;
+    category?: SheetStatusCategory | undefined;
+    /** An archived option still draws the values that name it ("Archived: Gold") and is offered to nobody. */
+    archived?: boolean | undefined;
+}
+/** How a number column writes its values. */
+export type SheetNumberStyle = 'plain' | 'percent' | 'currency';
+/** One column of a sheet. */
+export interface SheetColumn {
+    /** The document field the column edits. */
+    field: string;
+    /** The column's name, in the header and in every cell's accessible description. */
+    label: string;
+    type: SheetColumnType;
+    /** Width in px. Each type has a default. */
+    width?: number | undefined;
+    /** Stays in view while the sheet scrolls sideways. Frozen columns are the leading ones. */
+    frozen?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    /** Clearing a required cell is refused on the cell. */
+    required?: boolean | undefined;
+    options?: readonly SheetOption[] | undefined;
+    /** Number: the least value; rating: unused. */
+    min?: number | undefined;
+    /** Number: the greatest value; rating: the number of stars (1 to 10, 5 by default). */
+    max?: number | undefined;
+    /** Number: decimals drawn and kept. */
+    precision?: number | undefined;
+    numberStyle?: SheetNumberStyle | undefined;
+    /** An ISO 4217 code, for `numberStyle: 'currency'`. */
+    currency?: string | undefined;
+    /** Text and long text: the most characters a value may hold. */
+    maxLength?: number | undefined;
+    /** Multi-select: the most options a value may hold. */
+    maxItems?: number | undefined;
+    /** Date: the value carries a time of day, as RFC 3339 UTC, rather than a calendar date. */
+    time?: boolean | undefined;
+}
+/** A person or an agent a person cell can name, as the host resolved them. */
+export interface SheetPerson {
+    /** The value a person cell stores: the seat handle or principal reference. */
+    id: string;
+    name: string;
+    kind: 'human' | 'agent';
+    hue?: NodeHue | undefined;
+    character?: string | undefined;
+    src?: string | undefined;
+}
+/** What a cell holds once normalised. */
+export type SheetValue = string | number | boolean | readonly string[] | null;
+/** Who last changed a cell, for its change mark. */
+export interface SheetChange {
+    /** The writer's display name. */
+    by: string;
+    at: string | number | Date;
+    /** The value before the change, when it is worth saying. */
+    previous?: SheetValue | undefined;
+}
+/** One row of a sheet. */
+export interface SheetRow {
+    /** The document id. */
+    id: string;
+    /** The document's fields, as the datastore holds them. */
+    values: Readonly<Record<string, unknown>>;
+    /** Fields with an edit the engine has not confirmed yet: drawn as Saving (D23). */
+    pending?: readonly string[] | undefined;
+    /** Fields whose last edit the engine refused, with the reason said on the cell. */
+    refused?: Readonly<Record<string, string>> | undefined;
+    /** Fields changed since the reader last looked, with who changed them. */
+    changed?: Readonly<Record<string, SheetChange>> | undefined;
+}
+/** One cell edit a sheet asks its host to make. */
+export interface SheetEdit {
+    rowId: string;
+    field: string;
+    value: SheetValue;
+}
+/** A collaborator on a cell. */
+export interface SheetCellPresence {
+    rowId: string;
+    field: string;
+    /** The collaborator's session or seat, unique among the entries for one cell. */
+    id: string;
+    name: string;
+    kind: 'human' | 'agent';
+    hue: NodeHue;
+    /** Editing the cell rather than looking at it. */
+    editing?: boolean | undefined;
+    idle?: boolean | undefined;
+}
+/** A sort a sheet is drawn in. */
+export interface SheetSort {
+    field: string;
+    direction: 'ascending' | 'descending';
+}
+/** Where a host's writes stand, for the sheet's sync strip. */
+export interface SheetSyncState {
+    /** Edits sent and not yet confirmed. */
+    saving: number;
+    /** The connection is down; `saving` edits wait for it. */
+    offline?: boolean | undefined;
+    /** Edits that could not be saved and can be retried. */
+    failed?: number | undefined;
+}

package/dist/SheetModel/values.d.ts

@@ -0,0 +1,76 @@
+/**
+ * A cell's value in its three forms, and the rules that hold a value to its
+ * column.
+ *
+ *   normalizeValue  what the datastore holds, coerced to the column's type
+ *   displayText     what a reader sees, formatted for their locale
+ *   editText        what an editor starts with and a copy writes: locale
+ *                   free, so a value copied out pastes back as itself
+ *   parseText       the inverse of editText, tolerant of what people type
+ *                   and paste, and the one place a value is refused before
+ *                   it is sent
+ *
+ * The engine validates every write again (the real boundary); refusing here
+ * first is what lets the sheet say why on the cell without a round trip.
+ */
+import type { SheetLabels } from './labels.js';
+import type { SheetColumn, SheetPerson, SheetValue } from './types.js';
+/** What formatting and parsing need beyond the column itself. */
+export interface SheetValueContext {
+    /** The people a person cell may name. */
+    people?: readonly SheetPerson[] | undefined;
+    /** A BCP 47 tag; the reader's own locale when absent. */
+    locale?: string | undefined;
+    labels: SheetLabels;
+}
+/** The engine's default and ceiling lengths (`artifacts` limits), for a column that declares none. */
+export declare const TEXT_MAX_DEFAULT = 1000;
+export declare const LONGTEXT_MAX_DEFAULT = 20000;
+export declare const URL_MAX = 2048;
+export declare const RATING_MAX_DEFAULT = 5;
+export declare const RATING_MAX_CEILING = 10;
+/** The number of stars a rating column draws. */
+export declare function ratingMax(column: Pick<SheetColumn, 'max'>): number;
+/** The longest value a text or long text column takes. */
+export declare function textMax(column: Pick<SheetColumn, 'type' | 'maxLength'>): number;
+/**
+ * What the datastore holds, coerced to the column's type. A value of the wrong
+ * shape (a newer writer, a hand-edited document) is drawn as empty rather than
+ * thrown on, except where it has an obvious reading: a numeric string in a
+ * number column, a number in a text column.
+ */
+export declare function normalizeValue(column: Pick<SheetColumn, 'type'>, raw: unknown): SheetValue;
+/** Whether a value is nothing at all: null, an empty string or an empty list. A false checkbox is a value. */
+export declare function isEmptyValue(value: SheetValue): boolean;
+/** Whether two values are the same value. */
+export declare function sameValue(a: SheetValue, b: SheetValue): boolean;
+/** The person a value names, if the host resolved one. */
+export declare function findPerson(people: readonly SheetPerson[] | undefined, id: string): SheetPerson | undefined;
+/** What a reader sees in a cell, formatted for their locale. Empty for an empty value. */
+export declare function displayText(column: SheetColumn, value: SheetValue, context: SheetValueContext): string;
+/** What a cell says to a screen reader: its display text, or a word for the values that draw none. */
+export declare function spokenText(column: SheetColumn, value: SheetValue, context: SheetValueContext): string;
+/** What an editor starts with and a copy writes. Locale free, so it pastes back as itself. */
+export declare function editText(column: SheetColumn, value: SheetValue, context: SheetValueContext): string;
+/** A parsed value, or why the text does not fit the column. */
+export type SheetParse = {
+    ok: true;
+    value: SheetValue;
+} | {
+    ok: false;
+    error: string;
+};
+/**
+ * Text, as a person typed or pasted it, read as a value of the column, or the
+ * reason it cannot be. Empty text clears the cell, unless the column is
+ * required.
+ */
+export declare function parseText(column: SheetColumn, text: string, context: SheetValueContext): SheetParse;
+/**
+ * Why a value chosen in an editor (an option, a person, a checkbox) cannot be
+ * written, or null. The text path is held by `parseText`; this holds the
+ * values an editor hands over directly.
+ */
+export declare function checkValue(column: SheetColumn, value: SheetValue, context: SheetValueContext): string | null;
+/** Orders two values of a column: empty last, then by the column's own order. */
+export declare function compareValues(column: SheetColumn, a: SheetValue, b: SheetValue, context: SheetValueContext): number;

package/dist/SheetModel/view.d.ts

@@ -0,0 +1,32 @@
+/**
+ * What a sheet draws from its inputs, computed once for both renderers: the
+ * rows in their sorted order, the collaborators on each cell, and the words a
+ * focused cell is described by.
+ */
+import { type PresenceLabels } from '../PresenceModel/presence.js';
+import { type SheetValueContext } from './values.js';
+import type { SheetCellPresence, SheetColumn, SheetRow, SheetSort } from './types.js';
+/** The rows in a sort's order, stable for equal values. With no sort, the host's order. */
+export declare function sortRows(columns: readonly SheetColumn[], rows: readonly SheetRow[], sort: SheetSort | null | undefined, context: SheetValueContext): SheetRow[];
+/** The next sort a header press asks for: ascending, then descending, then none. */
+export declare function nextSort(current: SheetSort | null | undefined, field: string): SheetSort | null;
+export declare const cellKey: (rowId: string, field: string) => string;
+/** The collaborators on each cell, editors first, keyed by `cellKey`. */
+export declare function presenceByCell(presence: readonly SheetCellPresence[] | undefined): Map<string, SheetCellPresence[]>;
+/** The rows somebody has selected, with the first collaborator on each, for the row's leading bar. */
+export declare function presenceByRow(presence: readonly SheetCellPresence[] | undefined): Map<string, SheetCellPresence>;
+/** The collaborators in each column, at most two, for its header. */
+export declare function presenceByColumn(presence: readonly SheetCellPresence[] | undefined, max?: number): Map<string, SheetCellPresence[]>;
+/** The text on a cell's name flag: "Maya", or "Maya, @pm" when several are on it. */
+export declare function flagText(entries: readonly SheetCellPresence[]): string;
+/**
+ * Everything a focused cell is described by, after its own content: its
+ * column, whether it is saving or was refused, who else is on it and who
+ * changed it. "Score. Saving. Jane Founder is also here. Changed by Maya
+ * Ortiz, 10:42. Was 6.8."
+ */
+export declare function cellDescription(column: SheetColumn, row: SheetRow, others: readonly SheetCellPresence[], context: SheetValueContext, presenceLabels?: PresenceLabels): string;
+/** A row's name, for its row header and an announcement: the first text column's value, or its number. */
+export declare function rowName(columns: readonly SheetColumn[], row: SheetRow, index: number, context: SheetValueContext): string;
+/** A cell's spoken value, the one form both renderers put in a cell for a screen reader. */
+export declare function cellSpeech(column: SheetColumn, row: SheetRow, context: SheetValueContext): string;

package/dist/Switcher/index.js

@@ -1,16 +1,16 @@
-export { Switcher } from '../chunk-FA2V2VT6.js';
+export { Switcher } from '../chunk-NZY77ZDU.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-DEEVA6TV.js';
+import '../chunk-2TZATTIU.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4GB57WIT.js';
 import '../chunk-FYTIJM2T.js';
+import '../chunk-4GB57WIT.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
 import type { Tone } from '../utils/tone.js';
 /**
  * What a tag's colour says: a state, the accent, or nothing at all.
@@ -31,6 +32,18 @@ export type TagAppearance = 'soft' | 'outline';
 interface TagLook {
     /** The state this tag names. Neutral by default, which is what a category such as a phase takes. */
     variant?: TagVariant | undefined;
+    /**
+     * A hue an author CHOSE for this value, in place of a tone: a select
+     * option's colour on a sheet ("Gold" in amber). Drawn as the hue's fill
+     * under its ink, the steps a node is tinted with.
+     *
+     * CHOSEN, NEVER DERIVED, for the reason `NodeHue` gives: a hue somebody
+     * picked for a value names it the way its label does, where a hue hashed
+     * from the label would name nothing. It is never a state (a state is a
+     * `variant`), and the label is always drawn, so the hue is never the only
+     * carrier. With a hue the variant colours nothing, and `dot` draws neutral.
+     */
+    hue?: NodeHue | undefined;
     /** A tinted fill, or a boundary over the surface beneath. */
     appearance?: TagAppearance | undefined;
     /** Drawn before the label. A glyph component, not a name. */

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-LOECRMHA.js';
+export { Tag } from '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-4BRQS6GN.css → Tag-SRGTK5KI.css}

@@ -199,6 +199,48 @@
   --crewlet-tag-line: var(--color-brand-accent-soft-strong);
 }
 
+/*
+ * A HUE AN AUTHOR CHOSE for a value (a select option's colour), drawn in the
+ * node steps: the hue's fill under its ink, the line as the outline. Like a
+ * tinted tone, the pill needs no edge of its own at rest: the hue separates
+ * it from any neutral ground.
+ */
+.crewlet-tag--hue-purple {
+  --crewlet-tag-fill: var(--color-node-purple-fill);
+  --crewlet-tag-ink: var(--color-node-purple-ink);
+  --crewlet-tag-line: var(--color-node-purple-line);
+}
+
+.crewlet-tag--hue-cyan {
+  --crewlet-tag-fill: var(--color-node-cyan-fill);
+  --crewlet-tag-ink: var(--color-node-cyan-ink);
+  --crewlet-tag-line: var(--color-node-cyan-line);
+}
+
+.crewlet-tag--hue-green {
+  --crewlet-tag-fill: var(--color-node-green-fill);
+  --crewlet-tag-ink: var(--color-node-green-ink);
+  --crewlet-tag-line: var(--color-node-green-line);
+}
+
+.crewlet-tag--hue-amber {
+  --crewlet-tag-fill: var(--color-node-amber-fill);
+  --crewlet-tag-ink: var(--color-node-amber-ink);
+  --crewlet-tag-line: var(--color-node-amber-line);
+}
+
+.crewlet-tag--hue-rose {
+  --crewlet-tag-fill: var(--color-node-rose-fill);
+  --crewlet-tag-ink: var(--color-node-rose-ink);
+  --crewlet-tag-line: var(--color-node-rose-line);
+}
+
+.crewlet-tag--hue-blue {
+  --crewlet-tag-fill: var(--color-node-blue-fill);
+  --crewlet-tag-ink: var(--color-node-blue-ink);
+  --crewlet-tag-line: var(--color-node-blue-line);
+}
+
 /* ── appearance ────────────────────────────────────────────────────────── */
 
 /*

package/dist/TagsInput/index.js

@@ -1,5 +1,5 @@
-export { TagsInput } from '../chunk-JCO3SIST.js';
-import '../chunk-LOECRMHA.js';
+export { TagsInput } from '../chunk-AQCV62K6.js';
+import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ThemeSwitcher/apply.d.ts

@@ -0,0 +1,43 @@
+/** What a reader can ask the palette to be. `system` follows the platform. */
+export type ThemePreference = 'system' | 'light' | 'dark';
+/** How much room the interface gives itself. `normal` is the unscaled step. */
+export type DensityPreference = 'normal' | 'compact' | 'comfortable';
+/** Every theme preference, in the order a control offers them. */
+export declare const THEME_PREFERENCES: readonly ["system", "light", "dark"];
+/** Every density, in the order a control offers them. */
+export declare const DENSITY_PREFERENCES: readonly ["normal", "compact", "comfortable"];
+/**
+ * The shape a palette id has: the theme's folder name in `@crewlethq/tokens`,
+ * which a stylesheet quotes as an attribute value without escaping. A value
+ * outside it is refused rather than written, because it arrives from storage
+ * or from another document, and the attribute is read by a selector.
+ */
+export declare const PALETTE_ID: RegExp;
+export declare function isThemePreference(value: unknown): value is ThemePreference;
+export declare function isDensityPreference(value: unknown): value is DensityPreference;
+export declare function isPaletteId(value: unknown): value is string;
+/**
+ * Puts the theme on the root element.
+ *
+ * `system` REMOVES the attribute rather than writing a third value, because
+ * following the system IS the absence of a choice, and the stylesheet's own
+ * default is the system's: a document with no attribute is dark, or light
+ * where the platform asks for light. What beats the system is an explicit
+ * value, in both directions: `light` by a block of its own, `dark` by keeping
+ * the light media block from matching. A `data-theme="system"` names no
+ * palette, so it would be a choice only to the code that asks whether the
+ * attribute is there at all, which is the wrong answer to give it.
+ */
+export declare function applyTheme(theme: ThemePreference, root?: Element | null): void;
+/** Puts the density on the root element. `normal` removes the attribute. */
+export declare function applyDensity(density: DensityPreference, root?: Element | null): void;
+/**
+ * Puts a named theme on the root element.
+ *
+ * The default theme REMOVES the attribute, for the reason `system` does: the
+ * default paints the bare root and has no block of its own under the
+ * attribute, so writing its id would select nothing. An id that is not the
+ * shape of one is refused with an error rather than written, because the
+ * caller handed over something that was never a palette.
+ */
+export declare function applyPalette(palette: string, root?: Element | null): void;

package/dist/ThemeSwitcher/index.d.ts

@@ -1,4 +1,6 @@
 export { DensitySwitcher, ThemeSwitcher } from './ThemeSwitcher.js';
 export type { DensitySwitcherProps, PreferenceControl, ThemeSwitcherProps } from './ThemeSwitcher.js';
-export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference, } from './preferences.js';
-export type { DensityPreference, PreferenceOptions, ResolvedTheme, StoredPreferences, ThemePreference, } from './preferences.js';
+export { applyDensity, applyPalette, applyTheme, DENSITY_PREFERENCES, isDensityPreference, isPaletteId, isThemePreference, PALETTE_ID, THEME_PREFERENCES, } from './apply.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference, } from './preferences.js';
+export type { DensityPreference, ThemePreference } from './apply.js';
+export type { PreferenceOptions, ResolvedTheme, StoredPreferences } from './preferences.js';

package/dist/ThemeSwitcher/index.js

@@ -1,6 +1,7 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-SBRE7IML.js';
-export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-2ONWEDQT.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 import '../chunk-VYY56AMX.js';
+export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';

package/dist/ThemeSwitcher/preferences.d.ts

@@ -1,22 +1,5 @@
-/** What a reader can ask the palette to be. `system` follows the platform. */
-export type ThemePreference = 'system' | 'light' | 'dark';
-/** How much room the interface gives itself. `normal` is the unscaled step. */
-export type DensityPreference = 'normal' | 'compact' | 'comfortable';
-/**
- * Puts the theme on the root element.
- *
- * `system` REMOVES the attribute rather than writing a third value, because
- * following the system IS the absence of a choice, and the stylesheet's own
- * default is the system's: a document with no attribute is dark, or light
- * where the platform asks for light. What beats the system is an explicit
- * value, in both directions: `light` by a block of its own, `dark` by keeping
- * the light media block from matching. A `data-theme="system"` names no
- * palette, so it would be a choice only to the code that asks whether the
- * attribute is there at all, which is the wrong answer to give it.
- */
-export declare function applyTheme(theme: ThemePreference): void;
-/** Puts the density on the root element. `normal` removes the attribute. */
-export declare function applyDensity(density: DensityPreference): void;
+import { type DensityPreference, type ThemePreference } from './apply.js';
+export type { DensityPreference, ThemePreference } from './apply.js';
 export interface PreferenceOptions {
     /** Where the choice is kept. An application picks its own name. */
     storageKey: string;

package/dist/ThemeToggle/index.js

@@ -1,5 +1,6 @@
-export { ThemeToggle } from '../chunk-6TSZCBID.js';
-import '../chunk-K3OWD7BJ.js';
+export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
+import '../chunk-Z24ZUSTX.js';
+import '../chunk-ZXXDZJQN.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';