@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/value/ValuePanel.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'react';
+import type { GridColumn } from '../grid/types.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+export interface ValuePanelProps {
+    column: GridColumn | null;
+    value: Value | undefined;
+    loading: boolean;
+    editable: boolean;
+    onCommit?(value: EditValue): void;
+    onClose(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ValuePanel({ column, value, loading, editable, onCommit, onClose, className, ref }: ValuePanelProps): import("react").JSX.Element;

package/dist/value/ValuePanel.js

@@ -0,0 +1,103 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { Copy, Ellipsis, MousePointerClick, WrapText, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, copyText, EmptyState, FormError, IconButton, isApplePlatform, KEY_SHORTCUTS, matchesShortcut, Menu, PanelHeader, Segmented, TextArea, Tooltip } from '@adecore/ui';
+import { formatBytes, formatNumber } from '@adecore/ui/format';
+import { editValueOf, sameDraft, sameSource, sourceOf } from './draft.js';
+import { hexDumpLines, parseHex } from './hex.js';
+import { renderView, sizeOf, viewsOf } from './views.js';
+const WRAPPING_VIEWS = new Set(['text', 'formatted', 'utf8']);
+const READING = 'min-h-0 flex-1 overflow-auto rounded-lg border border-border bg-surface p-2 font-mono text-code text-text';
+/* The whole value of the focused cell beside the grid, to read and edit what a cell is too small for. */
+export function ValuePanel({ column, value, loading, editable, onCommit, onClose, className, ref }) {
+    const { t } = useTranslation('database');
+    const ready = column !== null && !loading && value !== undefined;
+    return (_jsxs("div", { ref: ref, className: clsx('flex h-full min-h-0 min-w-0 flex-col', className), children: [_jsxs(PanelHeader, { title: column === null ? t('value.title') : undefined, children: [column !== null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate text-sm font-medium text-text", children: column.name }), column.type !== '' && _jsx("span", { className: "min-w-0 shrink-0 truncate text-xs text-text-faint", children: column.type })] })), _jsx(IconButton, { icon: X, size: "sm", label: t('value.close'), className: "ml-auto", onClick: onClose })] }), ready ? (_jsx(ValueEditor, { column: column, value: value, editable: editable, onCommit: onCommit })) : (_jsx("div", { className: "grid min-h-0 grow place-items-center", children: _jsx(EmptyState, { icon: column === null ? MousePointerClick : undefined, busy: column !== null && loading, children: column === null ? t('value.selectCell') : loading ? t('value.loading') : t('value.notLoaded') }) }))] }));
+}
+function ValueEditor({ column, value, editable, onCommit }) {
+    const { t } = useTranslation('database');
+    const { name, type, kind } = column;
+    const source = useMemo(() => sourceOf({ name, type, kind }, value), [name, type, kind, value]);
+    const [seen, setSeen] = useState(source);
+    const [draft, setDraft] = useState(source.original);
+    const [choice, setChoice] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const [wrap, setWrap] = useState(true);
+    // A new cell, or the same cell with a new value, starts over from that value.
+    if (!sameSource(seen, source)) {
+        setSeen(source);
+        setDraft(source.original);
+        setChoice(null);
+        setProblem(null);
+    }
+    const views = viewsOf(source, draft);
+    const view = choice !== null && views.includes(choice) ? choice : views[0];
+    const dirty = !sameDraft(draft, source.original);
+    const rendered = useMemo(() => (view === 'text' ? null : renderView(view, draft)), [view, draft]);
+    const hex = source.binary && draft.mode === 'value' ? parseHex(draft.text) : null;
+    const shownProblem = problem ?? (hex !== null && !hex.ok ? { kind: 'hex', problem: hex.problem } : null);
+    const size = sizeOf(source, draft);
+    const placeholder = draft.mode === 'null' ? 'NULL' : draft.mode === 'default' ? 'DEFAULT' : undefined;
+    const change = (next) => {
+        setDraft(next);
+        setProblem(null);
+    };
+    const apply = () => {
+        if (!editable || onCommit === undefined || !dirty) {
+            return;
+        }
+        const conversion = editValueOf(draft, source);
+        if (conversion.ok) {
+            onCommit(conversion.value);
+        }
+        else {
+            setProblem(conversion.problem);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!event.nativeEvent.isComposing && matchesShortcut(KEY_SHORTCUTS.modEnter, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            apply();
+        }
+    };
+    const copy = () => {
+        if (view === 'hex' && hex !== null && hex.ok) {
+            copyText(hexDumpLines(hex.hex).join('\n'));
+        }
+        else if (rendered !== null && rendered.kind === 'text') {
+            copyText(rendered.text);
+        }
+        else {
+            copyText(draft.mode === 'value' ? draft.text : draft.mode === 'null' ? 'NULL' : 'DEFAULT');
+        }
+    };
+    const editor = (extra) => (_jsx(TextArea, { mono: true, "aria-label": t(source.binary ? 'value.hexEditor' : 'value.editor', { column: column.name }), wrap: wrap || source.binary ? 'soft' : 'off', spellCheck: false, readOnly: !editable, placeholder: placeholder, value: draft.mode === 'value' ? draft.text : '', className: extra, onChange: (event) => change({ text: event.target.value, mode: 'value' }), onKeyDown: handleKeyDown }));
+    const problemText = (found) => found.kind === 'json'
+        ? t('value.invalidJson', { reason: found.reason })
+        : t(found.problem === 'odd' ? 'value.invalidHexOdd' : 'value.invalidHexCharacters');
+    const reading = (content, wrapped) => {
+        if (content.kind === 'empty') {
+            return _jsx(Faint, { children: placeholder });
+        }
+        if (content.kind === 'problem') {
+            return _jsx(Faint, { children: problemText(content.problem) });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("pre", { className: clsx(READING, wrapped ? 'break-words whitespace-pre-wrap' : 'whitespace-pre'), children: content.text }), content.truncated && (_jsx("p", { className: "shrink-0 text-xs text-text-faint", children: t('value.dumpTruncated', { shown: formatNumber(content.truncated.shown), total: formatNumber(content.truncated.total) }) }))] }));
+    };
+    const body = () => {
+        if (view === 'text') {
+            return editor('min-h-0 flex-1');
+        }
+        if (view === 'hex' && editable) {
+            return (_jsxs(_Fragment, { children: [draft.mode === 'value' && rendered !== null && reading(rendered, false), editor(draft.mode === 'value' ? 'flex-none' : 'min-h-0 flex-1')] }));
+        }
+        return rendered === null ? null : reading(rendered, wrap && WRAPPING_VIEWS.has(view));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 px-2", children: [views.length > 1 && (_jsx(Segmented, { value: view, onValueChange: (id) => setChoice(id), label: t('value.views'), options: views.map((id) => ({ id, label: t(`value.view.${id}`) })) })), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [WRAPPING_VIEWS.has(view) && (_jsx(IconButton, { icon: WrapText, size: "sm", label: t('value.wrap'), "aria-pressed": wrap, active: wrap, onClick: () => setWrap(!wrap) })), _jsx(IconButton, { icon: Copy, size: "sm", label: t('value.copy'), onClick: copy })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-2 pb-2", children: body() }), shownProblem !== null && _jsx(FormError, { className: "shrink-0 px-3 pb-2 text-xs", children: problemText(shownProblem) }), editable && (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-t border-border p-2", children: [_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('value.more'), render: _jsx(Menu.Trigger, {}) }), _jsxs(Menu.Popup, { children: [column.nullable !== false && (_jsx(Menu.Item, { disabled: draft.mode === 'null', onClick: () => change({ text: '', mode: 'null' }), children: t('value.setNull') })), _jsx(Menu.Item, { disabled: draft.mode === 'default', onClick: () => change({ text: '', mode: 'default' }), children: t('value.setDefault') })] })] }), _jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx(Button, { size: "xs", disabled: !dirty, onClick: () => change(source.original), children: t('value.revert') }), _jsx(Tooltip, { label: t('value.applyHint'), kbd: KEY_SHORTCUTS.modEnter, children: _jsx(Button, { size: "xs", variant: "primary", disabled: !dirty || onCommit === undefined, onClick: apply, children: t('value.apply') }) })] })] })), _jsx("footer", { className: "flex h-8 shrink-0 items-center border-t border-border px-3 text-xs text-text-muted tabular-nums", children: size !== null &&
+                    (size.unit === 'bytes' ? formatBytes(size.count) : t('value.characters', { count: size.count, formatted: formatNumber(size.count) })) })] }));
+}
+function Faint({ children }) {
+    return _jsx("div", { className: "grid min-h-0 flex-1 place-items-center font-mono text-code text-text-faint", children: children });
+}

package/dist/value/draft.d.ts

@@ -0,0 +1,33 @@
+import type { GridColumn } from '../grid/types.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+import { type HexProblem } from './hex.ts';
+export interface Draft {
+    readonly text: string;
+    readonly mode: 'value' | 'null' | 'default';
+}
+export interface Source {
+    readonly name: string;
+    readonly type: string;
+    readonly kind: GridColumn['kind'];
+    readonly binary: boolean;
+    readonly json: boolean;
+    readonly original: Draft;
+}
+export type DraftProblem = {
+    readonly kind: 'json';
+    readonly reason: string;
+} | {
+    readonly kind: 'hex';
+    readonly problem: HexProblem;
+};
+export type Conversion = {
+    readonly ok: true;
+    readonly value: EditValue;
+} | {
+    readonly ok: false;
+    readonly problem: DraftProblem;
+};
+export declare const sourceOf: (column: Pick<GridColumn, 'name' | 'type' | 'kind'>, value: Value) => Source;
+export declare const sameSource: (a: Source, b: Source) => boolean;
+export declare const sameDraft: (a: Draft, b: Draft) => boolean;
+export declare const editValueOf: (draft: Draft, source: Source) => Conversion;

package/dist/value/draft.js

@@ -0,0 +1,44 @@
+import { parseDraft } from '../grid/edit-value.js';
+import { parseHex } from './hex.js';
+import { checkJson, isJsonDocument } from './json.js';
+/* The text a value is edited as: a binary value as its hex, everything else as it is written. */
+const textOf = (value) => {
+    if (typeof value === 'object') {
+        return value.hex;
+    }
+    return String(value);
+};
+export const sourceOf = (column, value) => {
+    const binary = column.kind === 'binary' || (value !== null && typeof value === 'object');
+    const original = value === null ? { text: '', mode: 'null' } : { text: textOf(value), mode: 'value' };
+    return {
+        name: column.name,
+        type: column.type,
+        kind: column.kind,
+        binary,
+        json: !binary && (column.kind === 'json' ? value !== null : typeof value === 'string' && isJsonDocument(value)),
+        original
+    };
+};
+export const sameSource = (a, b) => a.name === b.name && a.type === b.type && a.kind === b.kind && a.binary === b.binary && a.json === b.json && sameDraft(a.original, b.original);
+export const sameDraft = (a, b) => a.mode === b.mode && (a.mode !== 'value' || a.text === b.text);
+/* A draft becomes the value to send. Text goes as text, and a number only where the column holds numbers and the text spells one. */
+export const editValueOf = (draft, source) => {
+    if (draft.mode === 'null') {
+        return { ok: true, value: null };
+    }
+    if (draft.mode === 'default') {
+        return { ok: true, value: { kind: 'default' } };
+    }
+    if (source.binary) {
+        const parsed = parseHex(draft.text);
+        return parsed.ok ? { ok: true, value: { kind: 'binary', hex: parsed.hex } } : { ok: false, problem: { kind: 'hex', problem: parsed.problem } };
+    }
+    if (source.json) {
+        const checked = checkJson(draft.text);
+        if (!checked.ok) {
+            return { ok: false, problem: { kind: 'json', reason: checked.reason } };
+        }
+    }
+    return { ok: true, value: parseDraft(draft.text, source.kind) };
+};

package/dist/value/hex.d.ts

@@ -0,0 +1,14 @@
+export type HexProblem = 'characters' | 'odd';
+export type ParsedHex = {
+    readonly ok: true;
+    readonly hex: string;
+} | {
+    readonly ok: false;
+    readonly problem: HexProblem;
+};
+export declare const BYTES_PER_LINE = 16;
+export declare const parseHex: (text: string) => ParsedHex;
+export declare const bytesOf: (hex: string) => Uint8Array;
+export declare const decodeUtf8: (hex: string) => string;
+export declare const formatUuid: (hex: string) => string | null;
+export declare const hexDumpLines: (hex: string, maxBytes?: number) => string[];

package/dist/value/hex.js

@@ -0,0 +1,46 @@
+/* Binary values cross as lowercase hex; these turn it into what a person reads and back. */
+export const BYTES_PER_LINE = 16;
+const GROUP = 8;
+const GROUP_WIDTH = GROUP * 3 - 1;
+const NOT_HEX = /[^0-9a-f]/;
+const UUID_BYTES = 16;
+/* Spaces and newlines may separate the digits, and a leading `0x` is the way the grid writes a binary value. */
+export const parseHex = (text) => {
+    const stripped = text.replace(/\s+/g, '').toLowerCase();
+    const hex = stripped.startsWith('0x') ? stripped.slice(2) : stripped;
+    if (NOT_HEX.test(hex)) {
+        return { ok: false, problem: 'characters' };
+    }
+    return hex.length % 2 === 0 ? { ok: true, hex } : { ok: false, problem: 'odd' };
+};
+export const bytesOf = (hex) => {
+    const bytes = new Uint8Array(hex.length / 2);
+    for (let i = 0; i < bytes.length; i++) {
+        bytes[i] = Number.parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+    }
+    return bytes;
+};
+/* Bytes that are not valid UTF-8 become replacement characters rather than an error. */
+export const decodeUtf8 = (hex) => new TextDecoder('utf-8').decode(bytesOf(hex));
+/* A UUID is exactly 16 bytes; anything else has no UUID form. */
+export const formatUuid = (hex) => {
+    if (hex.length !== UUID_BYTES * 2) {
+        return null;
+    }
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+};
+const isPrintable = (byte) => byte >= 0x20 && byte <= 0x7e;
+const slotsOf = (bytes, from, to) => Array.from(bytes.subarray(from, to), (byte) => byte.toString(16).padStart(2, '0'))
+    .join(' ')
+    .padEnd(GROUP_WIDTH);
+/* One line per 16 bytes: the offset, the bytes in two groups of eight, and the same bytes as ASCII with `.` for what does not print. */
+export const hexDumpLines = (hex, maxBytes = Number.POSITIVE_INFINITY) => {
+    const bytes = bytesOf(hex.slice(0, Math.min(hex.length, maxBytes * 2)));
+    const lines = [];
+    for (let offset = 0; offset < bytes.length; offset += BYTES_PER_LINE) {
+        const line = bytes.subarray(offset, offset + BYTES_PER_LINE);
+        const ascii = Array.from(line, (byte) => (isPrintable(byte) ? String.fromCharCode(byte) : '.')).join('');
+        lines.push(`${offset.toString(16).padStart(8, '0')}  ${slotsOf(bytes, offset, offset + GROUP)}  ${slotsOf(bytes, offset + GROUP, offset + BYTES_PER_LINE)}  |${ascii}|`);
+    }
+    return lines;
+};

package/dist/value/json.d.ts

@@ -0,0 +1,9 @@
+export type JsonCheck = {
+    readonly ok: true;
+} | {
+    readonly ok: false;
+    readonly reason: string;
+};
+export declare const checkJson: (text: string) => JsonCheck;
+export declare const isJsonDocument: (text: string) => boolean;
+export declare const prettyJson: (text: string) => string | null;

package/dist/value/json.js

@@ -0,0 +1,71 @@
+/* JSON detection and layout. Numbers stay as the text the server wrote, so a 64-bit integer is not rounded by a parse. */
+const INDENT = '  ';
+export const checkJson = (text) => {
+    try {
+        JSON.parse(text);
+        return { ok: true };
+    }
+    catch (error) {
+        return { ok: false, reason: error instanceof Error ? error.message : String(error) };
+    }
+};
+/* Whether a string is a JSON object or array. A scalar such as `42` or `"x"` is a plain value, not a document. */
+export const isJsonDocument = (text) => {
+    const start = text.trimStart()[0];
+    return (start === '{' || start === '[') && checkJson(text).ok;
+};
+/* The text laid out with two spaces per level, or `null` when it is not JSON. */
+export const prettyJson = (text) => {
+    if (!checkJson(text).ok) {
+        return null;
+    }
+    let output = '';
+    let depth = 0;
+    let i = 0;
+    const lineBreak = () => `\n${INDENT.repeat(depth)}`;
+    const nextToken = (from) => {
+        let at = from;
+        while (/\s/.test(text[at] ?? '')) {
+            at++;
+        }
+        return text[at] ?? '';
+    };
+    while (i < text.length) {
+        const char = text[i];
+        if (char === '"') {
+            let end = i + 1;
+            while (text[end] !== '"') {
+                end += text[end] === '\\' ? 2 : 1;
+            }
+            output += text.slice(i, end + 1);
+            i = end + 1;
+            continue;
+        }
+        if (char === '{' || char === '[') {
+            const empty = nextToken(i + 1) === (char === '{' ? '}' : ']');
+            output += char;
+            if (empty) {
+                output += char === '{' ? '}' : ']';
+                i = text.indexOf(char === '{' ? '}' : ']', i + 1) + 1;
+                continue;
+            }
+            depth++;
+            output += lineBreak();
+        }
+        else if (char === '}' || char === ']') {
+            depth--;
+            output += `${lineBreak()}${char}`;
+        }
+        else if (char === ',') {
+            output += `,${lineBreak()}`;
+        }
+        else if (char === ':') {
+            output += ': ';
+        }
+        else if (!/\s/.test(char)) {
+            output += char;
+        }
+        i++;
+    }
+    return output.trim();
+};

package/dist/value/views.d.ts

@@ -0,0 +1,22 @@
+import type { Draft, DraftProblem, Source } from './draft.ts';
+export type ViewId = 'text' | 'formatted' | 'hex' | 'utf8' | 'uuid';
+export declare const viewsOf: (source: Source, draft: Draft) => ViewId[];
+export declare const sizeOf: (source: Source, draft: Draft) => {
+    unit: 'bytes' | 'characters';
+    count: number;
+} | null;
+export declare const DUMP_LIMIT_BYTES: number;
+export type Rendered = {
+    readonly kind: 'empty';
+} | {
+    readonly kind: 'text';
+    readonly text: string;
+    readonly truncated?: {
+        readonly shown: number;
+        readonly total: number;
+    };
+} | {
+    readonly kind: 'problem';
+    readonly problem: DraftProblem;
+};
+export declare const renderView: (view: Exclude<ViewId, 'text'>, draft: Draft) => Rendered;

package/dist/value/views.js

@@ -0,0 +1,54 @@
+import { decodeUtf8, formatUuid, hexDumpLines, parseHex } from './hex.js';
+import { checkJson, prettyJson } from './json.js';
+/* The views that make sense for this value, the first being the one it opens in. */
+export const viewsOf = (source, draft) => {
+    if (source.binary) {
+        const parsed = parseHex(draft.text);
+        const hex = parsed.ok ? parsed.hex : source.original.text;
+        return formatUuid(hex) === null ? ['hex', 'utf8'] : ['hex', 'utf8', 'uuid'];
+    }
+    return source.json ? ['formatted', 'text'] : ['text'];
+};
+/* What a draft is, in bytes for a binary value and in characters for the rest; `null` when there is nothing to measure. */
+export const sizeOf = (source, draft) => {
+    if (draft.mode !== 'value') {
+        return null;
+    }
+    if (!source.binary) {
+        return { unit: 'characters', count: draft.text.length };
+    }
+    const parsed = parseHex(draft.text);
+    return parsed.ok ? { unit: 'bytes', count: parsed.hex.length / 2 } : null;
+};
+/* A read only view stops its dump here; the text view and a copy are not limited. */
+export const DUMP_LIMIT_BYTES = 16 * 1024;
+/* What a read only view shows for the draft. The text view is not here, since it is the editor itself. */
+export const renderView = (view, draft) => {
+    if (draft.mode !== 'value') {
+        return { kind: 'empty' };
+    }
+    if (view === 'formatted') {
+        const pretty = prettyJson(draft.text);
+        if (pretty !== null) {
+            return { kind: 'text', text: pretty };
+        }
+        const checked = checkJson(draft.text);
+        return { kind: 'problem', problem: { kind: 'json', reason: checked.ok ? '' : checked.reason } };
+    }
+    const parsed = parseHex(draft.text);
+    if (!parsed.ok) {
+        return { kind: 'problem', problem: { kind: 'hex', problem: parsed.problem } };
+    }
+    if (view === 'utf8') {
+        return { kind: 'text', text: decodeUtf8(parsed.hex) };
+    }
+    if (view === 'uuid') {
+        return { kind: 'text', text: formatUuid(parsed.hex) ?? '' };
+    }
+    const total = parsed.hex.length / 2;
+    return {
+        kind: 'text',
+        text: hexDumpLines(parsed.hex, DUMP_LIMIT_BYTES).join('\n'),
+        truncated: total > DUMP_LIMIT_BYTES ? { shown: DUMP_LIMIT_BYTES, total } : undefined
+    };
+};

package/dist/workbench/DatabaseWorkbench.d.ts

@@ -0,0 +1,9 @@
+import { type Ref } from 'react';
+import type { Connection } from '../client/types.ts';
+export interface DatabaseWorkbenchProps {
+    connections: readonly Connection[];
+    onConnectionsChange?(next: readonly Connection[]): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DatabaseWorkbench({ connections, onConnectionsChange, className, ref }: DatabaseWorkbenchProps): import("react").JSX.Element;

package/dist/workbench/DatabaseWorkbench.js

@@ -0,0 +1,179 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { PencilRuler, Settings2, SquareTerminal, Table, TableProperties } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, ColumnResizeHandle, Dialog, EmptyState, Icon, IconButton, PromptDialog, Segmented, Tabs, isApplePlatform, matchesShortcut, shortcut, useColumnResize } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { DatabaseProvider } from '../DatabaseProvider.js';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage, useNumberNotation } from '../client-context.js';
+import { ConnectionManager } from '../connections/ConnectionManager.js';
+import { QueryConsole } from '../console/QueryConsole.js';
+import { DatabaseExplorer } from '../explorer/DatabaseExplorer.js';
+import { DesignerTab } from './DesignerTab.js';
+import { TableTab } from './TableTab.js';
+import { closeTab, connectionIdOf, focusTab, openConsole, openDesigner, openTable, parseState, pruneTabs, serializeState, setConsoleSql, setDesignerTable, setTableView, STORAGE_KEY } from './tabs.js';
+import { useStableCallback } from '../use-stable-callback.js';
+const DEFAULT_WIDTH = 280;
+const MIN_WIDTH = 200;
+/*
+ * The whole database view in one piece: the explorer beside closable tabs for the tables, consoles and
+ * designers a person opens. It answers the actions of the views below itself; an action it cannot place
+ * goes on to the `DatabaseProvider` above it. The open tabs are kept through the provider's `storage`.
+ */
+export function DatabaseWorkbench({ connections, onConnectionsChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const outer = useDatabaseAction();
+    const storage = useDatabaseStorage();
+    const files = useDatabaseFiles();
+    const numberNotation = useNumberNotation();
+    const column = useRef(null);
+    const [state, setState] = useState(() => parseState(storage?.get(STORAGE_KEY) ?? null));
+    const [selection, setSelection] = useState(null);
+    const [width, setWidth] = useState(DEFAULT_WIDTH);
+    const [managing, setManaging] = useState(false);
+    const [managed, setManaged] = useState(null);
+    /* Ids of the table tabs that hold changes nobody submitted, and the tab a person asked to close while it does. */
+    const [dirty, setDirty] = useState(() => new Set());
+    const [closing, setClosing] = useState(null);
+    const { startResize } = useColumnResize(column, { size: width, min: MIN_WIDTH, from: 'left', max: () => window.innerWidth / 2, onSize: setWidth });
+    const known = useMemo(() => new Set(connections.map((connection) => connection.id)), [connections]);
+    // While there are no connections they may still be loading, so nothing is dropped then.
+    const pruned = known.size > 0 ? pruneTabs(state, known) : state;
+    if (pruned !== state) {
+        setState(pruned);
+    }
+    if ([...dirty].some((id) => !state.tabs.some((tab) => tab.id === id))) {
+        setDirty(new Set([...dirty].filter((id) => state.tabs.some((tab) => tab.id === id))));
+    }
+    const tabs = state.tabs.filter((tab) => known.has(connectionIdOf(tab)));
+    const active = tabs.find((tab) => tab.id === state.activeId) ?? tabs.at(-1) ?? null;
+    const canManage = onConnectionsChange !== undefined;
+    useEffect(() => {
+        storage?.set(STORAGE_KEY, serializeState(state));
+    }, [storage, state]);
+    const onAction = useStableCallback((action) => {
+        const connectionId = action.kind === 'open-table' || action.kind === 'edit-table' ? action.ref.connectionId : action.connectionId;
+        if (!known.has(connectionId) || (action.kind === 'manage-connection' && !canManage)) {
+            outer?.(action);
+            return;
+        }
+        switch (action.kind) {
+            case 'open-table':
+                setSelection(action.ref);
+                setState((current) => openTable(current, action.ref, action.view, action.where));
+                break;
+            case 'open-console':
+                setState((current) => openConsole(current, action.connectionId, action.schema, action.sql));
+                break;
+            case 'new-table':
+                setState((current) => openDesigner(current, action.connectionId, action.schema));
+                break;
+            case 'edit-table':
+                setState((current) => openDesigner(current, action.ref.connectionId, action.ref.schema, action.ref.table));
+                break;
+            case 'manage-connection':
+                setManaged(action.connectionId);
+                setManaging(true);
+                break;
+        }
+    });
+    function newConsole() {
+        const context = consoleContext();
+        if (context !== null) {
+            setState((current) => openConsole(current, context.connectionId, context.schema));
+        }
+    }
+    /* Where a new console runs: the connection of the tab in front, else the one picked in the explorer, else the first. */
+    function consoleContext() {
+        if (active !== null) {
+            return { connectionId: connectionIdOf(active), schema: active.kind === 'table' ? active.ref.schema : active.schema };
+        }
+        if (selection !== null && known.has(selection.connectionId)) {
+            return { connectionId: selection.connectionId, schema: selection.schema };
+        }
+        const first = connections[0];
+        return first === undefined ? null : { connectionId: first.id };
+    }
+    function onKeyDown(e) {
+        // A dialog opened from here is a portal: its events reach this handler through React, not through the DOM.
+        if (active !== null &&
+            e.currentTarget.contains(e.target) &&
+            !e.nativeEvent.isComposing &&
+            matchesShortcut(shortcut('Mod+W'), e.nativeEvent, isApplePlatform())) {
+            e.preventDefault();
+            requestClose(active.id);
+        }
+    }
+    function closeById(id) {
+        setState((current) => closeTab(current, id));
+    }
+    /* A table tab with changes that are not submitted asks first. */
+    function requestClose(id) {
+        if (dirty.has(id)) {
+            setClosing(id);
+        }
+        else {
+            closeById(id);
+        }
+    }
+    function markDirty(id, isDirty) {
+        setDirty((current) => {
+            if (current.has(id) === isDirty) {
+                return current;
+            }
+            const next = new Set(current);
+            if (isDirty) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    }
+    const titleOf = (tab) => {
+        switch (tab.kind) {
+            case 'table':
+                return tab.where === undefined ? tab.ref.table : t('workbench.filtered', { table: tab.ref.table });
+            case 'console':
+                return t('workbench.console', { number: formatNumber(tab.number) });
+            case 'designer':
+                return tab.table === undefined ? t('workbench.newTable') : t('workbench.designer', { table: tab.table });
+        }
+    };
+    const viewOf = (tab) => {
+        const connection = connections.find((entry) => entry.id === connectionIdOf(tab));
+        if (connection === undefined) {
+            return null;
+        }
+        switch (tab.kind) {
+            case 'table':
+                return _jsx(TableTab, { connection: connection, tab: tab, onDirtyChange: (isDirty) => markDirty(tab.id, isDirty) });
+            case 'console':
+                return (_jsx(QueryConsole, { connection: connection, schema: tab.schema, value: tab.sql, onValueChange: (sql) => setState((current) => setConsoleSql(current, tab.id, sql)), autoFocus: tab.id === active?.id, className: "h-full" }));
+            case 'designer':
+                return (_jsx(DesignerTab, { connection: connection, tab: tab, onTableChange: (table) => setState((current) => setDesignerTable(current, tab.id, table)) }));
+        }
+    };
+    const canOpenConsole = consoleContext() !== null;
+    const closingTab = state.tabs.find((tab) => tab.id === closing);
+    const closingTable = closingTab?.kind === 'table' ? closingTab.ref.table : '';
+    return (_jsx(DatabaseProvider, { client: client, onAction: onAction, storage: storage, files: files, numberNotation: numberNotation, children: _jsxs("div", { ref: ref, className: clsx('flex h-full min-h-0 min-w-0 bg-surface text-text', className), onKeyDown: onKeyDown, children: [_jsxs("aside", { ref: column, className: "relative flex shrink-0 flex-col border-r border-border", style: { width }, children: [_jsxs("header", { className: "flex h-9 shrink-0 items-center justify-between border-b border-border pr-2 pl-3", children: [_jsx("h2", { className: "text-sm font-semibold text-text", children: t('workbench.title') }), canManage && (_jsx(IconButton, { icon: Settings2, size: "sm", label: t('workbench.manage'), onClick: () => {
+                                        setManaged(null);
+                                        setManaging(true);
+                                    } }))] }), _jsx(DatabaseExplorer, { connections: connections, value: selection, onValueChange: setSelection, className: "min-h-0 flex-1" }), _jsx(ColumnResizeHandle, { from: "left", onPointerDown: startResize })] }), _jsxs(Tabs.Root, { value: active?.id ?? null, onValueChange: (id) => setState((current) => focusTab(current, String(id))), className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { "aria-label": t('workbench.tabs'), className: "px-2", end: _jsxs(_Fragment, { children: [active?.kind === 'table' && (_jsx(Segmented, { label: t('workbench.views'), value: active.view, onValueChange: (view) => setState((current) => setTableView(current, active.id, view)), options: [
+                                            { id: 'data', label: t('workbench.data'), icon: Table },
+                                            { id: 'structure', label: t('workbench.structure'), icon: TableProperties }
+                                        ] })), _jsx(IconButton, { icon: SquareTerminal, size: "sm", label: t('workbench.newConsole'), tooltip: canOpenConsole ? undefined : t('workbench.noConnection'), disabled: !canOpenConsole, onClick: newConsole })] }), children: tabs.map((tab) => (_jsxs(Tabs.Tab, { value: tab.id, onClose: () => requestClose(tab.id), children: [_jsx(Icon, { icon: tab.kind === 'table' ? Table : tab.kind === 'console' ? SquareTerminal : PencilRuler, size: 14 }), titleOf(tab)] }, tab.id))) }), tabs.length === 0 ? (_jsx(EmptyState, { icon: SquareTerminal, title: t('workbench.empty.title'), className: "flex-1", action: _jsx(Button, { variant: "secondary", disabled: !canOpenConsole, onClick: newConsole, children: t('workbench.newConsole') }), children: t('workbench.empty.body') })) : (tabs.map((tab) => (_jsx(Tabs.Panel, { value: tab.id, keepMounted: true, className: "min-h-0 flex-1", children: viewOf(tab) }, tab.id))))] }), _jsx(PromptDialog, { open: closing !== null, danger: true, title: t('workbench.discard.title', { table: closingTable }), description: t('workbench.discard.description'), confirmLabel: t('workbench.discard.confirm'), onConfirm: () => {
+                        if (closing !== null) {
+                            closeById(closing);
+                        }
+                        setClosing(null);
+                    }, onOpenChange: (open) => {
+                        if (!open) {
+                            setClosing(null);
+                        }
+                    } }), onConnectionsChange !== undefined && (_jsx(Dialog.Root, { open: managing, onOpenChange: setManaging, children: _jsxs(Dialog.Popup, { className: "flex h-[560px] w-[900px] flex-col overflow-hidden", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsx(Dialog.Title, { children: t('workbench.connections') }) }), _jsx(ConnectionManager, { value: connections, onValueChange: onConnectionsChange, selected: managed, onSelectedChange: setManaged, className: "min-h-0 flex-1" }), _jsx(Dialog.Footer, { children: _jsx(Dialog.Close, { render: _jsx(Button, { variant: "secondary" }), children: t('workbench.close') }) })] }) }))] }) }));
+}

package/dist/workbench/DesignerTab.d.ts

@@ -0,0 +1,10 @@
+import type { Connection } from '../client/types.ts';
+import type { WorkbenchTab } from './tabs.ts';
+export interface DesignerTabProps {
+    connection: Connection;
+    tab: Extract<WorkbenchTab, {
+        kind: 'designer';
+    }>;
+    onTableChange(table: string): void;
+}
+export declare function DesignerTab({ connection, tab, onTableChange }: DesignerTabProps): import("react").JSX.Element;

package/dist/workbench/DesignerTab.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatabaseProvider } from '../DatabaseProvider.js';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage, useNumberNotation } from '../client-context.js';
+import { TableDesigner } from '../designer/TableDesigner.js';
+import { useStableCallback } from '../use-stable-callback.js';
+/* The designer answers a save with `edit-table`; in its own tab that is the same tab, not another one. Everything else goes on to the workbench. */
+export function DesignerTab({ connection, tab, onTableChange }) {
+    const client = useDatabaseClient();
+    const storage = useDatabaseStorage();
+    const files = useDatabaseFiles();
+    const outer = useDatabaseAction();
+    const numberNotation = useNumberNotation();
+    const onAction = useStableCallback((action) => {
+        if (action.kind === 'edit-table' && action.ref.connectionId === tab.connectionId && action.ref.schema === tab.schema) {
+            onTableChange(action.ref.table);
+        }
+        else {
+            outer?.(action);
+        }
+    });
+    return (_jsx(DatabaseProvider, { client: client, storage: storage, files: files, numberNotation: numberNotation, onAction: onAction, children: _jsx(TableDesigner, { connection: connection, schema: tab.schema, table: tab.table, className: "h-full" }) }));
+}