@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/ddl/draft.d.ts

@@ -0,0 +1,46 @@
+import type { TableStructure } from '../protocol/index.ts';
+import { type TableOptions } from './parse.ts';
+export interface ColumnDraft {
+    readonly key: string;
+    readonly originalName: string | null;
+    readonly name: string;
+    readonly type: string;
+    readonly nullable: boolean;
+    readonly defaultValue: string | null;
+    readonly autoIncrement: boolean;
+    readonly comment: string;
+    readonly generated: boolean;
+    readonly generatedClause: string | null;
+}
+export interface IndexDraft {
+    readonly key: string;
+    readonly originalName: string | null;
+    readonly name: string;
+    readonly columns: readonly string[];
+    readonly unique: boolean;
+}
+export interface ForeignKeyDraft {
+    readonly key: string;
+    readonly originalName: string | null;
+    readonly name: string;
+    readonly columns: readonly string[];
+    readonly referencedSchema: string;
+    readonly referencedTable: string;
+    readonly referencedColumns: readonly string[];
+    readonly onUpdate: string | null;
+    readonly onDelete: string | null;
+}
+export interface TableDraft {
+    readonly originalName: string | null;
+    readonly name: string;
+    readonly columns: readonly ColumnDraft[];
+    readonly primaryKey: readonly string[];
+    readonly indexes: readonly IndexDraft[];
+    readonly foreignKeys: readonly ForeignKeyDraft[];
+    readonly options: TableOptions;
+}
+export declare const nextKey: () => string;
+export declare const emptyColumn: (name?: string) => ColumnDraft;
+export declare const emptyDraft: () => TableDraft;
+export declare const isAutoIndex: (name: string) => boolean;
+export declare const draftOf: (structure: TableStructure) => TableDraft;

package/dist/ddl/draft.js

@@ -0,0 +1,70 @@
+import { generatedClausesOf, NO_OPTIONS, optionsOf } from './parse.js';
+let counter = 0;
+/* A key no other item of this page has. */
+export const nextKey = () => `new-${++counter}`;
+export const emptyColumn = (name = '') => ({
+    key: nextKey(),
+    originalName: null,
+    name,
+    type: '',
+    nullable: true,
+    defaultValue: null,
+    autoIncrement: false,
+    comment: '',
+    generated: false,
+    generatedClause: null
+});
+export const emptyDraft = () => ({
+    originalName: null,
+    name: '',
+    columns: [],
+    primaryKey: [],
+    indexes: [],
+    foreignKeys: [],
+    options: NO_OPTIONS
+});
+/* SQLite names the index behind a `UNIQUE` or `PRIMARY KEY` constraint itself; such an index cannot be created or dropped by name. */
+export const isAutoIndex = (name) => name.startsWith('sqlite_autoindex_');
+const foreignKeyDraftOf = (foreignKey, at) => ({
+    key: `foreign-key:${at}`,
+    originalName: foreignKey.name ?? '',
+    name: foreignKey.name ?? '',
+    columns: foreignKey.columns,
+    referencedSchema: foreignKey.referencedSchema,
+    referencedTable: foreignKey.referencedTable,
+    referencedColumns: foreignKey.referencedColumns,
+    onUpdate: foreignKey.onUpdate,
+    onDelete: foreignKey.onDelete
+});
+/* The draft that changes nothing: what a structure already says. */
+export const draftOf = (structure) => {
+    const clauses = generatedClausesOf(structure.ddl);
+    return {
+        originalName: structure.name,
+        name: structure.name,
+        columns: structure.columns.map((column) => ({
+            key: `column:${column.name}`,
+            originalName: column.name,
+            name: column.name,
+            type: column.type,
+            nullable: column.nullable,
+            defaultValue: column.defaultValue,
+            autoIncrement: column.autoIncrement,
+            comment: column.comment ?? '',
+            generated: column.generated,
+            generatedClause: column.generated ? (clauses.get(column.name) ?? null) : null
+        })),
+        primaryKey: structure.primaryKey,
+        indexes: structure.indexes
+            .filter((index) => !index.primary)
+            .map((index) => ({
+            key: `index:${index.name}`,
+            originalName: index.name,
+            name: index.name,
+            columns: index.columns,
+            unique: index.unique
+        })),
+        foreignKeys: structure.foreignKeys.map(foreignKeyDraftOf),
+        options: optionsOf(structure)
+    };
+};

package/dist/ddl/index.d.ts

@@ -0,0 +1,10 @@
+export { alterTableSql } from './alter.ts';
+export { columnSpecSql, defaultClause } from './column.ts';
+export { createIndexSql, createTableSql } from './create.ts';
+export { atLeast, dialectOf, type Dialect } from './dialect.ts';
+export { diffOf, dropsColumns, type TableDiff } from './diff.ts';
+export { draftOf, emptyColumn, emptyDraft, isAutoIndex, nextKey, type ColumnDraft, type ForeignKeyDraft, type IndexDraft, type TableDraft } from './draft.ts';
+export { NO_OPTIONS, optionsOf, type TableOptions } from './parse.ts';
+export { dropIndexSql, dropTableSql, dropViewSql, renameTableSql, truncateTableSql } from './statements.ts';
+export { FOREIGN_KEY_ACTIONS, MYSQL_CHARSETS, MYSQL_ENGINES, collationSuggestionsOf, typeSuggestionsOf } from './types.ts';
+export { validateDraft, type DraftProblem } from './validate.ts';

package/dist/ddl/index.js

@@ -0,0 +1,10 @@
+export { alterTableSql } from './alter.js';
+export { columnSpecSql, defaultClause } from './column.js';
+export { createIndexSql, createTableSql } from './create.js';
+export { atLeast, dialectOf } from './dialect.js';
+export { diffOf, dropsColumns } from './diff.js';
+export { draftOf, emptyColumn, emptyDraft, isAutoIndex, nextKey } from './draft.js';
+export { NO_OPTIONS, optionsOf } from './parse.js';
+export { dropIndexSql, dropTableSql, dropViewSql, renameTableSql, truncateTableSql } from './statements.js';
+export { FOREIGN_KEY_ACTIONS, MYSQL_CHARSETS, MYSQL_ENGINES, collationSuggestionsOf, typeSuggestionsOf } from './types.js';
+export { validateDraft } from './validate.js';

package/dist/ddl/parse.d.ts

@@ -0,0 +1,17 @@
+import type { TableStructure } from '../protocol/index.ts';
+export interface Definition {
+    readonly items: readonly string[];
+    readonly tail: string;
+}
+export declare const definitionOf: (ddl: string | null) => Definition | null;
+export declare const generatedClausesOf: (ddl: string | null) => ReadonlyMap<string, string>;
+export interface TableOptions {
+    readonly engine: string;
+    readonly charset: string;
+    readonly collation: string;
+    readonly comment: string;
+    readonly withoutRowid: boolean;
+    readonly strict: boolean;
+}
+export declare const NO_OPTIONS: TableOptions;
+export declare const optionsOf: (structure: Pick<TableStructure, 'ddl'>) => TableOptions;

package/dist/ddl/parse.js

@@ -0,0 +1,131 @@
+const CLOSERS = { "'": "'", '"': '"', '`': '`', '[': ']' };
+/* The characters of SQL that are not inside a quote, for a scan that has to ignore a comma in a default or a comment. */
+function* unquoted(text, backslash) {
+    let depth = 0;
+    let closer = null;
+    for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        if (closer !== null) {
+            if (backslash && char === '\\' && closer === "'") {
+                i++;
+            }
+            else if (char === closer) {
+                if (closer !== ']' && text[i + 1] === closer) {
+                    i++;
+                }
+                else {
+                    closer = null;
+                }
+            }
+            continue;
+        }
+        if (char in CLOSERS) {
+            closer = CLOSERS[char];
+            continue;
+        }
+        if (char === ')') {
+            depth--;
+        }
+        yield { index: i, char, depth };
+        if (char === '(') {
+            depth++;
+        }
+    }
+}
+/* Splits a `CREATE TABLE` into its definitions and its table options, or `null` when it holds no parenthesis. */
+export const definitionOf = (ddl) => {
+    if (ddl === null) {
+        return null;
+    }
+    // Only a MySQL statement reads a backslash as an escape, and only a MySQL statement quotes with backticks.
+    const backslash = ddl.includes('`');
+    let open = -1;
+    let close = -1;
+    const commas = [];
+    for (const { index, char, depth } of unquoted(ddl, backslash)) {
+        if (open < 0) {
+            if (char === '(' && depth === 0) {
+                open = index;
+            }
+        }
+        else if (close < 0) {
+            if (char === ')' && depth === 0) {
+                close = index;
+            }
+            else if (char === ',' && depth === 1) {
+                commas.push(index);
+            }
+        }
+    }
+    if (open < 0 || close < 0) {
+        return null;
+    }
+    const bounds = [open, ...commas, close];
+    return {
+        items: bounds.slice(1).map((end, at) => ddl.slice(bounds[at] + 1, end).trim()),
+        tail: ddl.slice(close + 1)
+    };
+};
+/* The name a definition starts with, unquoted. */
+const leadingName = (item) => {
+    const mark = item[0];
+    if (mark === '`' || mark === '"') {
+        const end = item.indexOf(mark, 1);
+        return end < 0 ? null : item.slice(1, end).replaceAll(mark + mark, mark);
+    }
+    if (mark === '[') {
+        const end = item.indexOf(']');
+        return end < 0 ? null : item.slice(1, end);
+    }
+    return /^[^\s(]+/.exec(item)?.[0] ?? null;
+};
+const AS_OPEN = /\b(?:GENERATED\s+ALWAYS\s+)?AS\s*\(/i;
+const AS_SUFFIX = /^\s*(?:VIRTUAL|STORED|PERSISTENT)\b/i;
+/* The `GENERATED ALWAYS AS (...) STORED` clause of a column definition, or `null` when it has none. */
+const generatedClauseOf = (item) => {
+    // A default or a comment may hold the words, so the strings are blanked before the search.
+    const masked = item.replace(/'(?:[^']|'')*'/g, (text) => ' '.repeat(text.length));
+    const start = AS_OPEN.exec(masked);
+    if (start === null) {
+        return null;
+    }
+    const open = start.index + start[0].length - 1;
+    let end = -1;
+    for (const { index, char, depth } of unquoted(masked.slice(open), false)) {
+        if (char === ')' && depth === 0) {
+            end = open + index + 1;
+            break;
+        }
+    }
+    if (end < 0) {
+        return null;
+    }
+    const suffix = AS_SUFFIX.exec(masked.slice(end));
+    return item.slice(start.index, end + (suffix?.[0].length ?? 0)).trim();
+};
+/* The generated clause of every generated column in a table's DDL, by column name. */
+export const generatedClausesOf = (ddl) => {
+    const clauses = new Map();
+    for (const item of definitionOf(ddl)?.items ?? []) {
+        const name = leadingName(item);
+        const clause = name === null ? null : generatedClauseOf(item);
+        if (name !== null && clause !== null) {
+            clauses.set(name, clause);
+        }
+    }
+    return clauses;
+};
+export const NO_OPTIONS = { engine: '', charset: '', collation: '', comment: '', withoutRowid: false, strict: false };
+export const optionsOf = (structure) => {
+    const tail = definitionOf(structure.ddl)?.tail ?? '';
+    const word = (pattern) => pattern.exec(tail)?.[1] ?? '';
+    const comment = /\bCOMMENT\s*=?\s*'((?:[^'\\]|''|\\.)*)'/i.exec(tail)?.[1] ?? '';
+    return {
+        engine: word(/\bENGINE\s*=\s*(\w+)/i),
+        charset: word(/\b(?:DEFAULT\s+)?(?:CHARSET|CHARACTER\s+SET)\s*=?\s*(\w+)/i),
+        collation: word(/\bCOLLATE\s*=?\s*(\w+)/i),
+        comment: comment.replaceAll("''", "'").replace(/\\(.)/g, '$1'),
+        withoutRowid: /\bWITHOUT\s+ROWID\b/i.test(tail),
+        strict: /\bSTRICT\b/i.test(tail)
+    };
+};

package/dist/ddl/statements.d.ts

@@ -0,0 +1,6 @@
+import { type Dialect } from './dialect.ts';
+export declare const dropTableSql: (dialect: Dialect, schema: string, table: string) => string;
+export declare const dropViewSql: (dialect: Dialect, schema: string, view: string) => string;
+export declare const truncateTableSql: (dialect: Dialect, schema: string, table: string) => string;
+export declare const renameTableSql: (dialect: Dialect, schema: string, from: string, to: string) => string;
+export declare const dropIndexSql: (dialect: Dialect, schema: string, table: string, index: string) => string;

package/dist/ddl/statements.js

@@ -0,0 +1,12 @@
+import { quote, sqliteSchemaPrefix, tableName } from './dialect.js';
+export const dropTableSql = (dialect, schema, table) => `DROP TABLE ${tableName(dialect, schema, table)}`;
+export const dropViewSql = (dialect, schema, view) => `DROP VIEW ${tableName(dialect, schema, view)}`;
+/* SQLite has no `TRUNCATE`; deleting every row is what it does instead. */
+export const truncateTableSql = (dialect, schema, table) => dialect.engine === 'sqlite' ? `DELETE FROM ${tableName(dialect, schema, table)}` : `TRUNCATE TABLE ${tableName(dialect, schema, table)}`;
+export const renameTableSql = (dialect, schema, from, to) => dialect.engine === 'sqlite'
+    ? `ALTER TABLE ${tableName(dialect, schema, from)} RENAME TO ${quote(dialect, to)}`
+    : `RENAME TABLE ${tableName(dialect, schema, from)} TO ${tableName(dialect, schema, to)}`;
+/* MySQL drops an index from the table it is on; SQLite names it alone, in its schema. */
+export const dropIndexSql = (dialect, schema, table, index) => dialect.engine === 'sqlite'
+    ? `DROP INDEX ${sqliteSchemaPrefix(dialect, schema)}${quote(dialect, index)}`
+    : `DROP INDEX ${quote(dialect, index)} ON ${tableName(dialect, schema, table)}`;

package/dist/ddl/types.d.ts

@@ -0,0 +1,6 @@
+import type { Dialect } from './dialect.ts';
+export declare const typeSuggestionsOf: (dialect: Dialect) => readonly string[];
+export declare const MYSQL_ENGINES: readonly ['InnoDB', 'MyISAM', 'MEMORY', 'ARCHIVE', 'CSV'];
+export declare const MYSQL_CHARSETS: readonly ['utf8mb4', 'utf8mb3', 'latin1', 'ascii', 'binary'];
+export declare const collationSuggestionsOf: (charset: string) => readonly string[];
+export declare const FOREIGN_KEY_ACTIONS: readonly ['CASCADE', 'SET NULL', 'RESTRICT', 'NO ACTION', 'SET DEFAULT'];

package/dist/ddl/types.js

@@ -0,0 +1,52 @@
+const SQLITE_TYPES = ['INTEGER', 'TEXT', 'REAL', 'BLOB', 'NUMERIC'];
+const MYSQL_TYPES = [
+    'tinyint',
+    'smallint',
+    'mediumint',
+    'int',
+    'bigint',
+    'bigint unsigned',
+    'decimal(10,2)',
+    'float',
+    'double',
+    'bit(1)',
+    'char(36)',
+    'varchar(255)',
+    'varchar(64)',
+    'tinytext',
+    'text',
+    'mediumtext',
+    'longtext',
+    'binary(16)',
+    'varbinary(255)',
+    'tinyblob',
+    'blob',
+    'mediumblob',
+    'longblob',
+    'date',
+    'time',
+    'datetime',
+    'datetime(6)',
+    'timestamp',
+    'timestamp(6)',
+    'year',
+    'json',
+    "enum('a','b')",
+    "set('a','b')"
+];
+/* The types a type field offers; any other text is still allowed, since both engines accept more than a list holds. */
+export const typeSuggestionsOf = (dialect) => (dialect.engine === 'sqlite' ? SQLITE_TYPES : MYSQL_TYPES);
+export const MYSQL_ENGINES = ['InnoDB', 'MyISAM', 'MEMORY', 'ARCHIVE', 'CSV'];
+export const MYSQL_CHARSETS = ['utf8mb4', 'utf8mb3', 'latin1', 'ascii', 'binary'];
+/* Collations to offer for a character set, which is the family it is named after. */
+export const collationSuggestionsOf = (charset) => {
+    if (charset === '') {
+        return [];
+    }
+    if (charset === 'binary') {
+        return ['binary'];
+    }
+    const suggestions = [`${charset}_general_ci`, `${charset}_unicode_ci`, `${charset}_bin`];
+    return charset === 'utf8mb4' ? ['utf8mb4_0900_ai_ci', 'utf8mb4_unicode_520_ci', ...suggestions] : suggestions;
+};
+export const FOREIGN_KEY_ACTIONS = ['CASCADE', 'SET NULL', 'RESTRICT', 'NO ACTION', 'SET DEFAULT'];

package/dist/ddl/validate.d.ts

@@ -0,0 +1,7 @@
+import type { Dialect } from './dialect.ts';
+import type { TableDraft } from './draft.ts';
+export interface DraftProblem {
+    readonly code: 'tableName' | 'noColumns' | 'columnName' | 'columnDuplicate' | 'columnType' | 'indexName' | 'indexColumns' | 'foreignKey';
+    readonly subject: string;
+}
+export declare const validateDraft: (dialect: Dialect, draft: TableDraft) => DraftProblem[];

package/dist/ddl/validate.js

@@ -0,0 +1,38 @@
+export const validateDraft = (dialect, draft) => {
+    const problems = [];
+    if (draft.name.trim() === '') {
+        problems.push({ code: 'tableName', subject: '' });
+    }
+    if (draft.columns.length === 0) {
+        problems.push({ code: 'noColumns', subject: '' });
+    }
+    const seen = new Set();
+    for (const column of draft.columns) {
+        const folded = column.name.toLowerCase();
+        if (column.name.trim() === '') {
+            problems.push({ code: 'columnName', subject: '' });
+        }
+        else if (seen.has(folded)) {
+            problems.push({ code: 'columnDuplicate', subject: column.name });
+        }
+        seen.add(folded);
+        if (dialect.engine === 'mysql' && column.type.trim() === '' && column.name.trim() !== '') {
+            problems.push({ code: 'columnType', subject: column.name });
+        }
+    }
+    for (const index of draft.indexes) {
+        if (index.columns.length === 0) {
+            problems.push({ code: 'indexColumns', subject: index.name });
+        }
+        if (dialect.engine === 'sqlite' && index.name.trim() === '') {
+            problems.push({ code: 'indexName', subject: '' });
+        }
+    }
+    for (const foreignKey of draft.foreignKeys) {
+        const complete = foreignKey.columns.length > 0 && foreignKey.referencedTable !== '' && foreignKey.referencedColumns.length === foreignKey.columns.length;
+        if (!complete) {
+            problems.push({ code: 'foreignKey', subject: foreignKey.name });
+        }
+    }
+    return problems;
+};

package/dist/designer/ColumnsEditor.d.ts

@@ -0,0 +1,2 @@
+import type { EditorProps } from './editor-props.ts';
+export declare function ColumnsEditor({ draft, dialect, disabled, onChange, className, ref }: EditorProps): import("react").JSX.Element;

package/dist/designer/ColumnsEditor.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowUp, KeyRound, Plus, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, EmptyState, Icon, IconButton, Input, Pill } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { typeSuggestionsOf } from '../ddl/index.js';
+import { addColumn, moveColumn, patchColumn, removeColumn, togglePrimaryKey } from './edit.js';
+const TH = 'sticky top-0 z-10 h-7 bg-surface px-2 text-left text-xs font-medium whitespace-nowrap text-text-faint';
+const TD = 'border-t border-border-soft px-2 py-1 align-middle';
+/* The columns of the table as rows to edit: name, type, null, default, key, comment and where each one sits. */
+export function ColumnsEditor({ draft, dialect, disabled, onChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const listId = useId();
+    const mysql = dialect.engine === 'mysql';
+    const defaultType = typeSuggestionsOf(dialect)[0];
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [draft.columns.length === 0 ? (_jsx(EmptyState, { children: t('designer.columns.empty') })) : (_jsxs("div", { children: [_jsx("datalist", { id: listId, children: typeSuggestionsOf(dialect).map((type) => (_jsx("option", { value: type }, type))) }), _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.order') }) }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.name') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.type') }), _jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.notNull') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.default') }), mysql && (_jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.autoIncrement') })), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.primaryKey') }), mysql && (_jsx("th", { scope: "col", className: TH, children: t('designer.columns.comment') })), _jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.remove') }) })] }) }), _jsx("tbody", { children: draft.columns.map((column, at) => {
+                                    const keyAt = draft.primaryKey.indexOf(column.name);
+                                    const locked = disabled || column.generated;
+                                    const patch = (change) => onChange(patchColumn(draft, column.key, change));
+                                    return (_jsxs("tr", { children: [_jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs("span", { className: "flex", children: [_jsx(IconButton, { icon: ArrowUp, size: "xs", label: t('designer.columns.moveUp'), disabled: disabled || at === 0, onClick: () => onChange(moveColumn(draft, column.key, -1)) }), _jsx(IconButton, { icon: ArrowDown, size: "xs", label: t('designer.columns.moveDown'), disabled: disabled || at === draft.columns.length - 1, onClick: () => onChange(moveColumn(draft, column.key, 1)) })] }) }), _jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.name'), spellCheck: false, value: column.name, disabled: locked, onChange: (event) => patch({ name: event.target.value }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: _jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.type'), list: listId, spellCheck: false, value: column.type, disabled: locked, onChange: (event) => patch({ type: event.target.value }) }) }), _jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.notNullFor', { name: column.name }), checked: !column.nullable, disabled: locked, onCheckedChange: (checked) => patch({ nullable: !checked }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: column.generated ? (_jsx(Pill, { mono: true, children: column.generatedClause ?? t('designer.columns.generated') })) : (_jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.default'), placeholder: t('designer.columns.noDefault'), spellCheck: false, value: column.defaultValue ?? '', disabled: disabled, onChange: (event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value }) })) }), mysql && (_jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.autoIncrementFor', { name: column.name }), checked: column.autoIncrement, disabled: locked, onCheckedChange: (checked) => patch({ autoIncrement: checked }) }) })), _jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: KeyRound, size: "xs", label: keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey'), "aria-pressed": keyAt >= 0, disabled: locked, onClick: () => onChange(togglePrimaryKey(draft, column.key)) }), keyAt >= 0 && draft.primaryKey.length > 1 && (_jsx("span", { className: "text-xs text-text-muted", children: formatNumber(keyAt + 1) }))] }) }), mysql && (_jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.comment'), value: column.comment, disabled: locked, onChange: (event) => patch({ comment: event.target.value }) }) })), _jsx("td", { className: TD, children: _jsx(IconButton, { icon: Trash2, size: "xs", label: t('designer.columns.remove'), disabled: disabled, onClick: () => onChange(removeColumn(draft, column.key)) }) })] }, column.key));
+                                }) })] })] })), _jsx("div", { className: "shrink-0 border-t border-border-soft px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addColumn(draft, defaultType)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.columns.add')] }) })] }));
+}

package/dist/designer/DesignerView.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'react';
+import type { Dialect, TableDraft } from '../ddl/index.ts';
+import { type Plan } from './plan.ts';
+export interface DesignerViewProps {
+    dialect: Dialect;
+    schema: string;
+    draft: TableDraft;
+    isNew: boolean;
+    changed: boolean;
+    tables: readonly string[];
+    plan: Plan;
+    readOnlyReason: string | null;
+    failure: string | null;
+    confirming: boolean;
+    referenceColumns(table: string): readonly string[] | null;
+    onChange(draft: TableDraft): void;
+    onRequestApply(): void;
+    onConfirm(): Promise<void>;
+    onCancelConfirm(): void;
+    onRevert(): void;
+    onDismissFailure(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DesignerView({ dialect, schema, draft, isNew, changed, tables, plan, readOnlyReason, failure, confirming, referenceColumns, onChange, onRequestApply, onConfirm, onCancelConfirm, onRevert, onDismissFailure, className, ref }: DesignerViewProps): import("react").JSX.Element;

package/dist/designer/DesignerView.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { CircleAlert, Lock, Undo2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Banner, Button, DisabledReason, Field, Icon, Input, PromptDialog, Tabs, isApplePlatform, matchesShortcut, shortcut } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { ColumnsEditor } from './ColumnsEditor.js';
+import { ForeignKeysEditor } from './ForeignKeysEditor.js';
+import { IndexesEditor } from './IndexesEditor.js';
+import { OptionsEditor } from './OptionsEditor.js';
+import { renameTable } from './edit.js';
+import { scriptOf } from './plan.js';
+import { SqlPreview } from './SqlPreview.js';
+const APPLY_SHORTCUT = /* @__PURE__ */ shortcut('Mod+S');
+/* The designer with everything it needs handed in: the name, the four tabs, what Apply would run and the confirmation before it does. */
+export function DesignerView({ dialect, schema, draft, isNew, changed, tables, plan, readOnlyReason, failure, confirming, referenceColumns, onChange, onRequestApply, onConfirm, onCancelConfirm, onRevert, onDismissFailure, className, ref }) {
+    const { t } = useTranslation('database');
+    const disabled = readOnlyReason !== null;
+    const applyReason = readOnlyReason ?? (plan.problems.length > 0 ? t('designer.fixProblems') : plan.statements.length === 0 ? t('designer.noChanges') : null);
+    function handleKeyDown(event) {
+        if (matchesShortcut(APPLY_SHORTCUT, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            if (applyReason === null) {
+                onRequestApply();
+            }
+        }
+    }
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "flex shrink-0 items-end gap-3 border-b border-border-soft px-3 py-2", children: [_jsx(Field, { label: t('designer.tableName'), className: "w-80", children: _jsx(Input, { mono: true, spellCheck: false, placeholder: t('designer.tableNamePlaceholder'), value: draft.name, disabled: disabled, onChange: (event) => onChange(renameTable(draft, event.target.value)) }) }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsxs(Button, { variant: "secondary", disabled: !changed, onClick: onRevert, children: [_jsx(Icon, { icon: Undo2, size: 12 }), t('designer.revert')] }), _jsx(DisabledReason, { reason: applyReason, children: _jsx("span", { className: "inline-flex", children: _jsx(Button, { variant: "primary", disabled: applyReason !== null, onClick: onRequestApply, children: isNew ? t('designer.create') : t('designer.apply') }) }) })] })] }), readOnlyReason !== null && (_jsx("div", { className: "shrink-0 px-3 pt-3", children: _jsx(Banner, { icon: Lock, tone: "neutral", className: "w-full", message: readOnlyReason }) })), failure !== null && (_jsx("div", { className: "shrink-0 px-3 pt-3", children: _jsx(Banner, { icon: CircleAlert, tone: "error", className: "w-full", message: failure, children: _jsx(Button, { variant: "secondary", size: "sm", onClick: onDismissFailure, children: t('designer.dismiss') }) }) })), _jsxs(Tabs.Root, { defaultValue: "columns", className: "flex min-h-0 grow flex-col", children: [_jsxs(Tabs.List, { className: "shrink-0 px-3", children: [_jsxs(Tabs.Tab, { value: "columns", children: [t('designer.tabs.columns'), _jsx(Tabs.Count, { value: draft.columns.length })] }), _jsxs(Tabs.Tab, { value: "indexes", children: [t('designer.tabs.indexes'), _jsx(Tabs.Count, { value: draft.indexes.length })] }), _jsxs(Tabs.Tab, { value: "foreignKeys", children: [t('designer.tabs.foreignKeys'), _jsx(Tabs.Count, { value: draft.foreignKeys.length })] }), _jsx(Tabs.Tab, { value: "options", children: t('designer.tabs.options') })] }), _jsx(Tabs.Panel, { value: "columns", className: "min-h-0 grow overflow-auto", children: _jsx(ColumnsEditor, { draft: draft, dialect: dialect, disabled: disabled, onChange: onChange }) }), _jsx(Tabs.Panel, { value: "indexes", className: "min-h-0 grow overflow-auto", children: _jsx(IndexesEditor, { draft: draft, dialect: dialect, disabled: disabled, onChange: onChange }) }), _jsx(Tabs.Panel, { value: "foreignKeys", className: "min-h-0 grow overflow-auto", children: _jsx(ForeignKeysEditor, { draft: draft, dialect: dialect, disabled: disabled, schema: schema, tables: tables, referenceColumns: referenceColumns, onChange: onChange }) }), _jsx(Tabs.Panel, { value: "options", className: "min-h-0 grow overflow-auto", children: _jsx(OptionsEditor, { draft: draft, dialect: dialect, disabled: disabled, onChange: onChange }) })] }), _jsx(SqlPreview, { plan: plan, className: "shrink-0" }), _jsxs(PromptDialog, { open: confirming, danger: plan.destructive, title: t('designer.confirm.title', { count: plan.statements.length, formatted: formatNumber(plan.statements.length) }), description: isNew ? t('designer.confirm.create', { table: draft.name }) : t('designer.confirm.alter', { table: draft.originalName }), confirmLabel: isNew ? t('designer.create') : t('designer.apply'), confirmBusyLabel: t('designer.applying'), onConfirm: onConfirm, onOpenChange: (open) => {
+                    if (!open) {
+                        onCancelConfirm();
+                    }
+                }, children: [plan.destructive && _jsx("p", { className: "mt-3 text-xs text-status-error", children: t('designer.confirm.destructive') }), _jsx("pre", { className: "mt-3 max-h-64 overflow-auto rounded-md bg-surface-sunken p-2 font-mono text-code whitespace-pre text-text select-text", children: scriptOf(plan.statements) })] })] }));
+}

package/dist/designer/ForeignKeysEditor.d.ts

@@ -0,0 +1,7 @@
+import type { EditorProps } from './editor-props.ts';
+export interface ForeignKeysEditorProps extends EditorProps {
+    schema: string;
+    tables: readonly string[];
+    referenceColumns(table: string): readonly string[] | null;
+}
+export declare function ForeignKeysEditor({ draft, schema, tables, referenceColumns, disabled, onChange, className, ref }: ForeignKeysEditorProps): import("react").JSX.Element;

package/dist/designer/ForeignKeysEditor.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Plus, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, EmptyState, Field, Icon, IconButton, Input, Select, Spinner } from '@adecore/ui';
+import { FOREIGN_KEY_ACTIONS } from '../ddl/index.js';
+import { NamePicker } from './NamePicker.js';
+import { addForeignKey, patchForeignKey, removeForeignKey, setReferencedTable, toggleForeignKeyColumn } from './edit.js';
+/* The engine's own behavior, which a key has without a clause. */
+const DEFAULT_ACTION = 'default';
+/* The foreign keys of the table. Each points at a table of the same schema, picked from the list, and at columns of that table. */
+export function ForeignKeysEditor({ draft, schema, tables, referenceColumns, disabled, onChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const columns = draft.columns.map((column) => column.name);
+    const actions = [
+        { value: DEFAULT_ACTION, label: t('designer.foreignKeys.engineDefault') },
+        ...FOREIGN_KEY_ACTIONS.map((action) => ({ value: action, label: action }))
+    ];
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [_jsxs("div", { children: [draft.foreignKeys.length === 0 && _jsx(EmptyState, { children: t('designer.foreignKeys.empty') }), draft.foreignKeys.map((foreignKey) => {
+                        const referenced = foreignKey.referencedTable === '' ? [] : referenceColumns(foreignKey.referencedTable);
+                        const choices = tables.includes(foreignKey.referencedTable) || foreignKey.referencedTable === '' ? tables : [...tables, foreignKey.referencedTable];
+                        return (_jsxs("div", { className: "flex flex-col gap-3 border-b border-border-soft px-3 py-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.name'), className: "w-56", children: _jsx(Input, { size: "sm", spellCheck: false, value: foreignKey.name, disabled: disabled, onChange: (event) => onChange(patchForeignKey(draft, foreignKey.key, { name: event.target.value })) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedTable'), group: true, className: "w-56", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.referencedTable'), placeholder: t('designer.foreignKeys.pickTable'), value: foreignKey.referencedTable === '' ? null : foreignKey.referencedTable, disabled: disabled, items: choices.map((table) => ({ value: table, label: table })), onValueChange: (table) => onChange(setReferencedTable(draft, foreignKey.key, schema, table)) }) }), _jsx(Field, { label: t('designer.foreignKeys.onUpdate'), group: true, className: "w-40", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.onUpdate'), value: foreignKey.onUpdate ?? DEFAULT_ACTION, disabled: disabled, items: actions, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onUpdate: action === DEFAULT_ACTION ? null : action })) }) }), _jsx(Field, { label: t('designer.foreignKeys.onDelete'), group: true, className: "w-40", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.onDelete'), value: foreignKey.onDelete ?? DEFAULT_ACTION, disabled: disabled, items: actions, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onDelete: action === DEFAULT_ACTION ? null : action })) }) }), _jsx(IconButton, { icon: Trash2, size: "xs", className: "mb-1", label: t('designer.foreignKeys.remove'), disabled: disabled, onClick: () => onChange(removeForeignKey(draft, foreignKey.key)) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.columns'), group: true, children: _jsx(NamePicker, { label: t('designer.foreignKeys.columns'), options: columns, value: foreignKey.columns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'columns', name)) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedColumns'), group: true, children: referenced === null ? (_jsx(Spinner, { size: 14, label: t('designer.foreignKeys.loadingColumns') })) : (_jsx(NamePicker, { label: t('designer.foreignKeys.referencedColumns'), options: referenced, value: foreignKey.referencedColumns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'referencedColumns', name)) })) })] })] }, foreignKey.key));
+                    })] }), _jsx("div", { className: "shrink-0 px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addForeignKey(draft, schema)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.foreignKeys.add')] }) })] }));
+}

package/dist/designer/IndexesEditor.d.ts

@@ -0,0 +1,2 @@
+import type { EditorProps } from './editor-props.ts';
+export declare function IndexesEditor({ draft, disabled, onChange, className, ref }: EditorProps): import("react").JSX.Element;

package/dist/designer/IndexesEditor.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Plus, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, EmptyState, Icon, IconButton, Input } from '@adecore/ui';
+import { NamePicker } from './NamePicker.js';
+import { addIndex, patchIndex, removeIndex, toggleIndexColumn } from './edit.js';
+/* The indexes of the table other than its primary key, each over columns picked from the draft. */
+export function IndexesEditor({ draft, disabled, onChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const columns = draft.columns.map((column) => column.name);
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [_jsxs("div", { children: [draft.indexes.length === 0 && _jsx(EmptyState, { children: t('designer.indexes.empty') }), draft.indexes.map((index) => (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border-soft px-3 py-2", children: [_jsx(Input, { size: "sm", className: "w-56", "aria-label": t('designer.indexes.name'), spellCheck: false, value: index.name, disabled: disabled, onChange: (event) => onChange(patchIndex(draft, index.key, { name: event.target.value })) }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-text-muted", children: [_jsx(Checkbox, { label: t('designer.indexes.unique'), checked: index.unique, disabled: disabled, onCheckedChange: (checked) => onChange(patchIndex(draft, index.key, { unique: checked })) }), t('designer.indexes.unique')] }), _jsx(NamePicker, { className: "min-w-0 grow", label: t('designer.indexes.columns'), options: columns, value: index.columns, disabled: disabled, onToggle: (name) => onChange(toggleIndexColumn(draft, index.key, name)) }), _jsx(IconButton, { icon: Trash2, size: "xs", label: t('designer.indexes.remove'), disabled: disabled, onClick: () => onChange(removeIndex(draft, index.key)) })] }, index.key)))] }), _jsx("div", { className: "shrink-0 px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addIndex(draft)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.indexes.add')] }) })] }));
+}

package/dist/designer/NamePicker.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'react';
+export interface NamePickerProps {
+    options: readonly string[];
+    value: readonly string[];
+    onToggle(name: string): void;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function NamePicker({ options, value, onToggle, label, disabled, className, ref }: NamePickerProps): import("react").JSX.Element;

package/dist/designer/NamePicker.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+/* Picks some of a few names, such as the columns of an index, and numbers the picks once there is more than one. */
+export function NamePicker({ options, value, onToggle, label, disabled = false, className, ref }) {
+    const { t } = useTranslation('database');
+    return (_jsxs("div", { ref: ref, role: "group", "aria-label": label, className: clsx('flex flex-wrap items-center gap-1', className), children: [options.length === 0 && _jsx("span", { className: "text-xs text-text-faint", children: t('designer.noColumnsToPick') }), options.map((name) => {
+                const position = value.indexOf(name);
+                return (_jsxs(Button, { size: "xs", variant: position < 0 ? 'ghost' : 'secondary', "aria-pressed": position >= 0, disabled: disabled, onClick: () => onToggle(name), children: [position >= 0 && value.length > 1 && _jsx("span", { className: "text-text-faint", children: formatNumber(position + 1) }), name] }, name));
+            })] }));
+}

package/dist/designer/OptionsEditor.d.ts

@@ -0,0 +1,2 @@
+import type { EditorProps } from './editor-props.ts';
+export declare function OptionsEditor({ draft, dialect, disabled, onChange, className, ref }: EditorProps): import("react").JSX.Element;