@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/grid/ValueDock.tsx

@@ -0,0 +1,52 @@
+import { useRef, useState, type ReactNode, type Ref } from 'react';
+import clsx from 'clsx';
+import { ColumnResizeHandle, useColumnResize } from '@adecore/ui';
+
+export const VALUE_PANEL_WIDTH = 320;
+export const VALUE_PANEL_MIN_WIDTH = 240;
+
+export interface ValueDockProps {
+    open: boolean;
+    /* Drawn on the right of the children while the dock is open. */
+    panel: ReactNode;
+    /* The grid and whatever shares its column. */
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* A grid with a panel along its right edge that a person can widen by its left edge. */
+export function ValueDock({ open, panel, children, className, ref }: ValueDockProps) {
+    const root = useRef<HTMLDivElement | null>(null);
+    const dock = useRef<HTMLDivElement>(null);
+    const [width, setWidth] = useState(VALUE_PANEL_WIDTH);
+    const { startResize } = useColumnResize(dock, {
+        size: width,
+        min: VALUE_PANEL_MIN_WIDTH,
+        from: 'right',
+        max: () => (root.current?.clientWidth ?? 960) - VALUE_PANEL_MIN_WIDTH,
+        onSize: setWidth
+    });
+
+    return (
+        <div
+            ref={(node) => {
+                root.current = node;
+                if (typeof ref === 'function') {
+                    ref(node);
+                } else if (ref) {
+                    ref.current = node;
+                }
+            }}
+            className={clsx('flex min-h-0 min-w-0 flex-1', className)}
+        >
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col">{children}</div>
+            {open && (
+                <div ref={dock} className="relative flex min-h-0 shrink-0 border-l border-border" style={{ width }}>
+                    <ColumnResizeHandle from="right" onPointerDown={startResize} className="hover:bg-border-strong" />
+                    {panel}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/grid/aggregates.ts

@@ -0,0 +1,94 @@
+import type { ValueKind } from '../protocol/index.ts';
+import type { Shown } from './display.ts';
+
+const NUMERIC_KINDS: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float']);
+const NUMERIC_TEXT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
+
+/* A block of rows, and the columns (indexes into the columns of the grid) it spans. */
+export interface RangeBlock {
+    readonly top: number;
+    readonly bottom: number;
+    readonly columns: readonly number[];
+}
+
+export interface NumericAggregates {
+    /* The cells that held a number; NULLs and the cells of other columns do not count. */
+    readonly count: number;
+    readonly sum: number;
+    readonly average: number;
+    readonly minimum: number;
+    readonly maximum: number;
+    /* The extremes as the cells spell them, which a decimal or a big integer keeps in full. */
+    readonly minimumText: string;
+    readonly maximumText: string;
+}
+
+export interface Aggregates {
+    /* Every cell of the block. */
+    readonly count: number;
+    /* `null` when no cell of the block held a number. */
+    readonly numeric: NumericAggregates | null;
+}
+
+const numberOf = (cell: Shown): { value: number; text: string } | null => {
+    if (typeof cell === 'number') {
+        return Number.isFinite(cell) ? { value: cell, text: String(cell) } : null;
+    }
+    if (typeof cell === 'string') {
+        const text = cell.trim();
+        return NUMERIC_TEXT.test(text) ? { value: Number(text), text } : null;
+    }
+    return null;
+};
+
+/* The size of a block in cells, which a footer shows aggregates for once it passes one. */
+export const blockSize = (block: RangeBlock): number => Math.max(0, block.bottom - block.top + 1) * block.columns.length;
+
+/*
+ * The count of a block, and for the cells in numeric columns their sum, average, minimum and maximum.
+ * Only the rows the grid has are counted, which is the loaded page.
+ */
+export const aggregateBlock = (rows: readonly (readonly Shown[])[], kinds: readonly ValueKind[], block: RangeBlock): Aggregates => {
+    let count = 0;
+    let numbers = 0;
+    let sum = 0;
+    let minimum: { value: number; text: string } | null = null;
+    let maximum: { value: number; text: string } | null = null;
+    for (let row = block.top; row <= block.bottom; row++) {
+        const cells = rows[row];
+        if (cells === undefined) {
+            continue;
+        }
+        for (const column of block.columns) {
+            count++;
+            const kind = kinds[column];
+            const found = kind !== undefined && NUMERIC_KINDS.has(kind) ? numberOf(cells[column] ?? null) : null;
+            if (found === null) {
+                continue;
+            }
+            numbers++;
+            sum += found.value;
+            if (minimum === null || found.value < minimum.value) {
+                minimum = found;
+            }
+            if (maximum === null || found.value > maximum.value) {
+                maximum = found;
+            }
+        }
+    }
+    if (numbers === 0 || minimum === null || maximum === null) {
+        return { count, numeric: null };
+    }
+    return {
+        count,
+        numeric: {
+            count: numbers,
+            sum,
+            average: sum / numbers,
+            minimum: minimum.value,
+            maximum: maximum.value,
+            minimumText: minimum.text,
+            maximumText: maximum.text
+        }
+    };
+};

package/src/grid/cell-range.ts

@@ -0,0 +1,26 @@
+import type { CellPosition } from './navigation.ts';
+
+/* A block of cells, both ends included. Columns are positions as drawn, so a block stays rectangular on screen. */
+export interface CellRect {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+
+/* The block between two cells, whichever corner each one is. */
+export const rectBetween = (from: CellPosition, to: CellPosition): CellRect => ({
+    top: Math.min(from.row, to.row),
+    bottom: Math.max(from.row, to.row),
+    left: Math.min(from.column, to.column),
+    right: Math.max(from.column, to.column)
+});
+
+export const rectContains = (rect: CellRect | null, row: number, column: number): boolean =>
+    rect !== null && row >= rect.top && row <= rect.bottom && column >= rect.left && column <= rect.right;
+
+/* Every cell of a grid, or `null` when it has none. */
+export const fullRect = (rows: number, columns: number): CellRect | null =>
+    rows === 0 || columns === 0 ? null : { top: 0, bottom: rows - 1, left: 0, right: columns - 1 };
+
+export const rectSize = (rect: CellRect): { rows: number; columns: number } => ({ rows: rect.bottom - rect.top + 1, columns: rect.right - rect.left + 1 });

package/src/grid/column-layout.ts

@@ -0,0 +1,71 @@
+import type { ColumnView } from './column-view.ts';
+import { MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.ts';
+
+/* What a person did to the columns of a grid, by column name so it outlives a change of the column order. */
+export interface GridLayout {
+    /* Only the widths a person set by dragging or fitting. */
+    readonly widths: Readonly<Record<string, number>>;
+    readonly hidden: readonly string[];
+    /* In the order they were pinned. */
+    readonly pinned: readonly string[];
+}
+
+export const NO_GRID_LAYOUT: GridLayout = { widths: {}, hidden: [], pinned: [] };
+
+export interface ColumnState {
+    readonly resized: Readonly<Record<number, number>>;
+    readonly view: ColumnView;
+}
+
+/* The state of a grid for columns it has, from a layout. Names it does not have are skipped; a layout that would hide every column hides none. */
+export const restoreLayout = (columns: readonly { readonly name: string }[], layout: GridLayout | undefined): ColumnState => {
+    const resized: Record<number, number> = {};
+    const hidden = new Set<number>();
+    const pinned: number[] = [];
+    if (layout !== undefined) {
+        columns.forEach((column, index) => {
+            const width = layout.widths[column.name];
+            if (width !== undefined) {
+                resized[index] = Math.max(MIN_COLUMN_WIDTH, Math.min(Math.round(width), MAX_RESIZED_WIDTH));
+            }
+            if (layout.hidden.includes(column.name)) {
+                hidden.add(index);
+            }
+        });
+        for (const name of layout.pinned) {
+            const index = columns.findIndex((column) => column.name === name);
+            if (index >= 0 && !hidden.has(index) && !pinned.includes(index)) {
+                pinned.push(index);
+            }
+        }
+    }
+    return { resized, view: { hidden: hidden.size >= columns.length ? new Set() : hidden, pinned } };
+};
+
+/* The layout of a grid's state, with the columns by name. */
+export const captureLayout = (columns: readonly { readonly name: string }[], state: ColumnState): GridLayout => {
+    const widths: Record<string, number> = {};
+    for (const [index, width] of Object.entries(state.resized)) {
+        const column = columns[Number(index)];
+        if (column !== undefined) {
+            widths[column.name] = width;
+        }
+    }
+    return {
+        widths,
+        hidden: [...state.view.hidden].sort((a, b) => a - b).flatMap((index) => (columns[index] === undefined ? [] : [columns[index]!.name])),
+        pinned: state.view.pinned.flatMap((index) => (columns[index] === undefined ? [] : [columns[index]!.name]))
+    };
+};
+
+const sameList = (a: readonly string[], b: readonly string[]): boolean => a.length === b.length && a.every((item, index) => item === b[index]);
+
+export const sameLayout = (a: GridLayout, b: GridLayout): boolean => {
+    const names = Object.keys(a.widths);
+    return (
+        names.length === Object.keys(b.widths).length &&
+        names.every((name) => a.widths[name] === b.widths[name]) &&
+        sameList(a.hidden, b.hidden) &&
+        sameList(a.pinned, b.pinned)
+    );
+};

package/src/grid/column-selection.ts

@@ -0,0 +1,42 @@
+/* The columns picked by a click on their headers, by index in the columns the grid was given. */
+export interface ColumnSelection {
+    readonly columns: ReadonlySet<number>;
+    /* The column a Shift-click extends from; `null` when nothing is picked. */
+    readonly anchor: number | null;
+}
+
+export interface ColumnClick {
+    readonly shiftKey: boolean;
+    readonly mod: boolean;
+}
+
+export const NO_COLUMN_SELECTION: ColumnSelection = { columns: new Set(), anchor: null };
+
+/*
+ * The selection after a click on the header of `index`. A plain click picks that column alone, Mod
+ * toggles it, and Shift picks every column drawn between the anchor and it (added to the others with Mod).
+ * `order` is the columns as drawn, so a range follows what the person sees.
+ */
+export const selectColumn = (current: ColumnSelection, order: readonly number[], index: number, click: ColumnClick): ColumnSelection => {
+    const at = order.indexOf(index);
+    if (at < 0) {
+        return current;
+    }
+    const anchorAt = current.anchor === null ? -1 : order.indexOf(current.anchor);
+    if (click.shiftKey && anchorAt >= 0) {
+        const range = order.slice(Math.min(anchorAt, at), Math.max(anchorAt, at) + 1);
+        return { columns: new Set(click.mod ? [...current.columns, ...range] : range), anchor: current.anchor };
+    }
+    if (click.mod) {
+        const next = new Set(current.columns);
+        if (next.delete(index)) {
+            return { columns: next, anchor: next.size === 0 ? null : current.anchor };
+        }
+        next.add(index);
+        return { columns: next, anchor: index };
+    }
+    return { columns: new Set([index]), anchor: index };
+};
+
+/* The picked columns that are drawn, in the order they are drawn. */
+export const shownSelection = (current: ColumnSelection, order: readonly number[]): number[] => order.filter((index) => current.columns.has(index));

package/src/grid/column-view.ts

@@ -0,0 +1,35 @@
+/* Which columns of a grid are hidden and which are pinned, by their index in the columns the grid was given. */
+export interface ColumnView {
+    readonly hidden: ReadonlySet<number>;
+    /* In the order they were pinned, which is the order they sit in. */
+    readonly pinned: readonly number[];
+}
+
+export const NO_COLUMN_VIEW: ColumnView = { hidden: new Set(), pinned: [] };
+
+/* The columns to draw as indexes: the pinned ones first in pin order, then the rest as they come, hidden ones left out. */
+export const displayOrder = (count: number, view: ColumnView): number[] => {
+    const pinned = view.pinned.filter((index) => index < count && !view.hidden.has(index));
+    const rest: number[] = [];
+    for (let i = 0; i < count; i++) {
+        if (!view.hidden.has(i) && !pinned.includes(i)) {
+            rest.push(i);
+        }
+    }
+    return [...pinned, ...rest];
+};
+
+export const hideColumn = (view: ColumnView, index: number): ColumnView => ({
+    hidden: new Set([...view.hidden, index]),
+    pinned: view.pinned.filter((pinned) => pinned !== index)
+});
+
+export const showAllColumns = (view: ColumnView): ColumnView => ({ ...view, hidden: new Set() });
+
+export const togglePin = (view: ColumnView, index: number): ColumnView => ({
+    ...view,
+    pinned: view.pinned.includes(index) ? view.pinned.filter((pinned) => pinned !== index) : [...view.pinned, index]
+});
+
+/* How many of the first columns of `displayOrder` are pinned. */
+export const pinnedCount = (count: number, view: ColumnView): number => view.pinned.filter((index) => index < count && !view.hidden.has(index)).length;

package/src/grid/copy-formats.ts

@@ -0,0 +1,108 @@
+import type { ValueKind } from '../protocol/index.ts';
+import { qualifiedName, quoteIdentifier, sqlLiteral, type SqlTarget } from '../sql.ts';
+import { copyTextOf, type Shown } from './display.ts';
+
+export type CopyFormat = 'tsv' | 'csv' | 'json' | 'sql';
+
+export const COPY_FORMATS: readonly CopyFormat[] = ['tsv', 'csv', 'json', 'sql'];
+
+export interface CopyColumn {
+    readonly name: string;
+    readonly kind: ValueKind;
+}
+
+export interface CopyInput {
+    readonly columns: readonly CopyColumn[];
+    /* One array per row, one cell per column. A preview copies as the preview. */
+    readonly rows: readonly (readonly Shown[])[];
+    /* Needed for `sql`. */
+    readonly target?: SqlTarget;
+}
+
+const NUMERIC_KINDS: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float']);
+const JSON_NUMBER = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;
+
+const quoteField = (text: string): string => `"${text.replaceAll('"', '""')}"`;
+
+/* Tabs and line breaks would split a cell on paste, so a cell that holds one is quoted the way a spreadsheet does. */
+const tsvField = (text: string): string => (/[\t\r\n"]/.test(text) ? quoteField(text) : text);
+
+const csvField = (text: string): string => (/[",\r\n]/.test(text) ? quoteField(text) : text);
+
+const csvText = (cell: Shown): string => (cell === null ? '' : copyTextOf(cell));
+
+const jsonOf = (cell: Shown, kind: ValueKind): string => {
+    if (cell === null) {
+        return 'null';
+    }
+    if (typeof cell === 'boolean') {
+        return String(cell);
+    }
+    if (typeof cell === 'number') {
+        if (kind === 'boolean' && (cell === 0 || cell === 1)) {
+            return String(cell === 1);
+        }
+        return Number.isFinite(cell) ? String(cell) : 'null';
+    }
+    if (typeof cell === 'string') {
+        if (NUMERIC_KINDS.has(kind) && JSON_NUMBER.test(cell)) {
+            return cell;
+        }
+        if (kind === 'json') {
+            try {
+                return JSON.stringify(JSON.parse(cell));
+            } catch {
+                return JSON.stringify(cell);
+            }
+        }
+        return JSON.stringify(cell);
+    }
+    return cell.kind === 'default' ? 'null' : JSON.stringify(copyTextOf(cell));
+};
+
+const toTsv = ({ rows }: CopyInput): string => rows.map((row) => row.map((cell) => tsvField(copyTextOf(cell))).join('\t')).join('\n');
+
+const toCsv = ({ columns, rows }: CopyInput): string =>
+    [columns.map((column) => csvField(column.name)), ...rows.map((row) => row.map((cell) => csvField(csvText(cell))))]
+        .map((line) => line.join(','))
+        .join('\r\n');
+
+const toJson = ({ columns, rows }: CopyInput): string => {
+    if (rows.length === 0) {
+        return '[]';
+    }
+    const objects = rows.map((row) => {
+        if (columns.length === 0) {
+            return '  {}';
+        }
+        const fields = columns.map((column, index) => `    ${JSON.stringify(column.name)}: ${jsonOf(row[index] ?? null, column.kind)}`);
+        return `  {\n${fields.join(',\n')}\n  }`;
+    });
+    return `[\n${objects.join(',\n')}\n]`;
+};
+
+const toSql = ({ columns, rows, target }: CopyInput): string => {
+    if (target === undefined) {
+        throw new Error('Copying as SQL needs the table the rows belong to.');
+    }
+    const head = `INSERT INTO ${qualifiedName(target)} (${columns.map((column) => quoteIdentifier(target.engine, column.name)).join(', ')}) VALUES`;
+    return rows.map((row) => `${head} (${columns.map((column, index) => sqlLiteral(target.engine, row[index] ?? null, column.kind)).join(', ')});`).join('\n');
+};
+
+/*
+ * A block of cells as text. TSV is what a spreadsheet pastes and has no header; CSV follows RFC 4180
+ * with a header and leaves NULL empty; JSON is an array of objects that keeps numbers, booleans and
+ * NULL as what they are; SQL is one INSERT per row.
+ */
+export const formatCopy = (format: CopyFormat, input: CopyInput): string => {
+    switch (format) {
+        case 'tsv':
+            return toTsv(input);
+        case 'csv':
+            return toCsv(input);
+        case 'json':
+            return toJson(input);
+        case 'sql':
+            return toSql(input);
+    }
+};

package/src/grid/display.ts

@@ -0,0 +1,109 @@
+import { formatBytes, formatNumeral } from '@adecore/ui/format';
+import type { BinaryValue, Cell, EditValue, ValueKind } from '../protocol/index.ts';
+
+/* What a cell shows: a cell of a result, or the column's default for a value an edit set to `DEFAULT`. */
+export type Shown = Cell | { readonly kind: 'default' };
+
+export type CellTone = 'value' | 'null' | 'default';
+
+export interface CellView {
+    readonly text: string;
+    readonly tone: CellTone;
+    readonly align: 'start' | 'end';
+    /* Faint text after the value, such as the size of a binary value. */
+    readonly suffix?: string;
+}
+
+/* How a numeric cell is drawn: as the server wrote it, or in the notation of the person's region. */
+export type NumberNotation = 'database' | 'region';
+
+/* A cell never draws more than this, however long the text: the DOM stays small and the cell is one line anyway. */
+export const DISPLAY_LIMIT = 200;
+/* How many bytes of a binary value the cell spells out. */
+export const BINARY_PREVIEW_BYTES = 8;
+
+const NUMERIC_KINDS: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float']);
+
+/* Whether the cells of a column of this kind sit against the end of their cell, as numbers do. */
+export const isNumericKind = (kind: ValueKind): boolean => NUMERIC_KINDS.has(kind);
+
+const ELLIPSIS = '…';
+
+const isObject = (cell: Shown): cell is Exclude<Shown, null | boolean | number | string> => cell !== null && typeof cell === 'object';
+
+/* Whether a cell is only the start of its value, so editing it needs the whole value first. */
+export const isPreview = (cell: Shown): boolean => {
+    if (!isObject(cell)) {
+        return false;
+    }
+    if (cell.kind === 'longText') {
+        return true;
+    }
+    return cell.kind === 'binary' && cell.hex.length < cell.length * 2;
+};
+
+/* A numeral in the notation asked for; text that is no numeral stays as it is. */
+export const numeralText = (numeral: string | number, notation: NumberNotation): string => {
+    if (notation === 'database') {
+        return String(numeral);
+    }
+    const formatted = formatNumeral(numeral);
+    return formatted === String(numeral).trim() ? String(numeral) : formatted;
+};
+
+const cut = (text: string): string => (text.length > DISPLAY_LIMIT ? `${text.slice(0, DISPLAY_LIMIT)}${ELLIPSIS}` : text);
+
+export const cellView = (cell: Shown, kind: ValueKind, notation: NumberNotation = 'database'): CellView => {
+    const numeric = isNumericKind(kind);
+    const align = numeric ? 'end' : 'start';
+    if (cell === null) {
+        return { text: 'NULL', tone: 'null', align };
+    }
+    if (typeof cell === 'boolean') {
+        return { text: cell ? 'true' : 'false', tone: 'value', align };
+    }
+    if (typeof cell === 'number') {
+        return { text: numeric ? numeralText(cell, notation) : String(cell), tone: 'value', align };
+    }
+    if (typeof cell === 'string') {
+        return { text: cut(numeric ? numeralText(cell, notation) : cell), tone: 'value', align };
+    }
+    switch (cell.kind) {
+        case 'default':
+            return { text: 'DEFAULT', tone: 'default', align };
+        case 'longText':
+            return { text: `${cut(cell.preview)}${cell.preview.length <= DISPLAY_LIMIT ? ELLIPSIS : ''}`, tone: 'value', align: 'start' };
+        case 'binary': {
+            const shown = cell.hex.slice(0, BINARY_PREVIEW_BYTES * 2);
+            const truncated = shown.length < cell.length * 2;
+            return { text: `0x${shown}${truncated ? ELLIPSIS : ''}`, tone: 'value', align: 'start', suffix: formatBytes(cell.length) };
+        }
+    }
+};
+
+/* The text a copy puts on the clipboard: the value as the cell has it, a preview as far as it goes. */
+export const copyTextOf = (cell: Shown): string => {
+    if (cell === null) {
+        return 'NULL';
+    }
+    if (typeof cell !== 'object') {
+        return String(cell);
+    }
+    switch (cell.kind) {
+        case 'default':
+            return 'DEFAULT';
+        case 'longText':
+            return cell.preview;
+        case 'binary':
+            return `0x${cell.hex}`;
+    }
+};
+
+/* An edit as a cell, so the grid draws a pending value the way it draws a loaded one. */
+export const shownOfEdit = (value: EditValue): Shown => {
+    if (value !== null && typeof value === 'object' && value.kind === 'binary') {
+        const binary = value as BinaryValue;
+        return { kind: 'binary', hex: binary.hex, length: binary.hex.length / 2 };
+    }
+    return value as Shown;
+};

package/src/grid/edit-value.ts

@@ -0,0 +1,60 @@
+import type { Cell, EditValue, Value, ValueKind } from '../protocol/index.ts';
+
+/* An empty field means NULL where an empty string cannot be a value of the column. */
+const EMPTY_IS_NULL: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float', 'boolean', 'date', 'time', 'datetime', 'binary']);
+
+const INTEGER = /^[+-]?\d+$/;
+const HEX = /^0x([0-9a-f]*)$/i;
+
+/* The text an editor starts with for a value that is whole (a preview has to be loaded first). */
+export const draftOf = (value: Cell | Value | { readonly kind: 'default' }): string => {
+    if (value === null) {
+        return '';
+    }
+    if (typeof value !== 'object') {
+        return String(value);
+    }
+    if (value.kind === 'binary') {
+        return `0x${value.hex}`;
+    }
+    if (value.kind === 'longText') {
+        return value.preview;
+    }
+    return '';
+};
+
+/* What a person typed, as the value to send. A number the text spells exactly stays a number; anything else goes as text and the server decides. */
+export const parseDraft = (text: string, kind: ValueKind): EditValue => {
+    const trimmed = text.trim();
+    if (trimmed === '' && EMPTY_IS_NULL.has(kind)) {
+        return null;
+    }
+    switch (kind) {
+        case 'integer': {
+            const number = Number(trimmed);
+            return INTEGER.test(trimmed) && Number.isSafeInteger(number) ? number : trimmed;
+        }
+        case 'float': {
+            const number = Number(trimmed);
+            return Number.isFinite(number) ? number : trimmed;
+        }
+        case 'boolean': {
+            const lower = trimmed.toLowerCase();
+            if (lower === 'true' || lower === '1') {
+                return true;
+            }
+            return lower === 'false' || lower === '0' ? false : trimmed;
+        }
+        case 'binary': {
+            const match = HEX.exec(trimmed);
+            return match !== null && match[1]!.length % 2 === 0 ? { kind: 'binary', hex: match[1]!.toLowerCase() } : trimmed;
+        }
+        case 'decimal':
+        case 'date':
+        case 'time':
+        case 'datetime':
+            return trimmed;
+        default:
+            return text;
+    }
+};

package/src/grid/enum-type.ts

@@ -0,0 +1,62 @@
+export interface EnumType {
+    readonly kind: 'enum' | 'set';
+    readonly values: readonly string[];
+}
+
+const DECLARATION = /^(enum|set)\s*\(/i;
+
+/*
+ * The values of a MySQL `enum('a','b')` or `set('a','b')` column type, or `null` for any other type
+ * or a list that does not parse. A quote inside a value is written doubled (`'it''s'`).
+ */
+export const parseEnumType = (type: string): EnumType | null => {
+    const head = DECLARATION.exec(type.trim());
+    if (head === null) {
+        return null;
+    }
+    const source = type.trim().slice(head[0].length);
+    const values: string[] = [];
+    let position = 0;
+    while (position < source.length) {
+        if (source[position] !== "'") {
+            return null;
+        }
+        position++;
+        let value = '';
+        for (;;) {
+            if (position >= source.length) {
+                return null;
+            }
+            if (source[position] === "'") {
+                if (source[position + 1] === "'") {
+                    value += "'";
+                    position += 2;
+                    continue;
+                }
+                position++;
+                break;
+            }
+            value += source[position];
+            position++;
+        }
+        values.push(value);
+        const next = source[position];
+        if (next === ')') {
+            return source.slice(position + 1).trim() === '' ? tidy(head[1]!, values) : null;
+        }
+        if (next !== ',') {
+            return null;
+        }
+        position++;
+    }
+    return null;
+};
+
+const tidy = (kind: string, values: string[]): EnumType | null =>
+    values.length === 0 ? null : { kind: kind.toLowerCase() === 'set' ? 'set' : 'enum', values };
+
+/* The members a SET value holds: the text split on commas, empty for the empty set. */
+export const membersOf = (value: string): string[] => (value === '' ? [] : value.split(','));
+
+/* A SET value in the order of the column's values, which is the order the server writes it in. */
+export const joinMembers = (type: EnumType, members: ReadonlySet<string>): string => type.values.filter((value) => members.has(value)).join(',');