@adecore/database 0.17.0-beta.2 → 0.18.0

package/dist/console/result-keys.js

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from 'react';
+import { foreignKeyOf, referenceOf } from '../table/references.js';
+const tableKey = ({ schema, table }) => `${schema}\u0000${table}`;
+/* The tables the columns of a result come from, each once, in the order they first appear. */
+export const sourceTablesOf = (columns) => {
+    const tables = new Map();
+    for (const { source } of columns) {
+        if (source !== undefined && !tables.has(tableKey(source))) {
+            tables.set(tableKey(source), { schema: source.schema, table: source.table });
+        }
+    }
+    return [...tables.values()];
+};
+/*
+ * The keys of a result's columns, from the structures of the tables they come from by key (`schema`, NUL,
+ * `table`). A column without a source, or of a table with no structure, is marked as nothing.
+ */
+export const resultKeysOf = (engine, columns, structures) => {
+    const structureOf = (column) => column?.source === undefined ? undefined : structures.get(tableKey(column.source));
+    const foreignKeyAt = (column) => {
+        const source = columns[column]?.source;
+        const structure = structureOf(columns[column]);
+        return source === undefined || structure === undefined ? undefined : foreignKeyOf(structure.foreignKeys, source.column);
+    };
+    return {
+        columns: columns.map((column) => {
+            const structure = structureOf(column);
+            const name = column.source?.column;
+            if (structure === undefined || name === undefined) {
+                return column;
+            }
+            return {
+                ...column,
+                primaryKey: structure.primaryKey.includes(name),
+                foreignKey: structure.foreignKeys.some((key) => key.columns.includes(name))
+            };
+        }),
+        isReference: (column) => foreignKeyAt(column) !== undefined,
+        referenceAt: (column, cells) => {
+            const key = foreignKeyAt(column);
+            const source = columns[column]?.source;
+            if (key === undefined || source === undefined) {
+                return null;
+            }
+            // The columns of the result as the columns of that table, so a join names each key column of its own table only.
+            const asTable = columns.map((entry) => ({
+                name: entry.source !== undefined && tableKey(entry.source) === tableKey(source) ? entry.source.column : '',
+                kind: entry.kind
+            }));
+            return referenceOf(engine, key, asTable, cells);
+        }
+    };
+};
+/*
+ * The keys of a result set, once the structures of the tables its columns come from have loaded: each table
+ * once per result, through the console's session. `null` while they load and for what is no result set.
+ */
+export function useResultKeys(session, engine, result) {
+    const [loaded, setLoaded] = useState(null);
+    useEffect(() => {
+        if (session === null || result?.kind !== 'rows') {
+            return undefined;
+        }
+        const tables = sourceTablesOf(result.columns);
+        if (tables.length === 0) {
+            return undefined;
+        }
+        const controller = new AbortController();
+        // A table the server named but cannot describe, such as a derived one, marks no column.
+        const loads = tables.map((table) => session.structure(table.schema, table.table, { signal: controller.signal }).then((structure) => [tableKey(table), structure], () => null));
+        void Promise.all(loads).then((entries) => {
+            if (!controller.signal.aborted) {
+                setLoaded({ result, structures: new Map(entries.filter((entry) => entry !== null)) });
+            }
+        });
+        return () => controller.abort();
+    }, [session, result]);
+    return useMemo(() => (engine === undefined || result?.kind !== 'rows' || loaded?.result !== result ? null : resultKeysOf(engine, result.columns, loaded.structures)), [engine, result, loaded]);
+}

package/dist/designer/ColumnsEditor.js

@@ -3,7 +3,7 @@ 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 { Button, ButtonGroup, 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';
@@ -19,6 +19,6 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
                                     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));
+                                    return (_jsxs("tr", { children: [_jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs(ButtonGroup, { 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

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { Dialect, TableDraft } from '../ddl/index.ts';
 import { type Plan } from './plan.ts';
 export interface DesignerViewProps {
@@ -19,7 +19,8 @@ export interface DesignerViewProps {
     onCancelConfirm(): void;
     onRevert(): void;
     onDismissFailure(): void;
+    toolbarStart?: ReactNode;
     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;
+export declare function DesignerView({ dialect, schema, draft, isNew, changed, tables, plan, readOnlyReason, failure, confirming, referenceColumns, onChange, onRequestApply, onConfirm, onCancelConfirm, onRevert, onDismissFailure, toolbarStart, className, ref }: DesignerViewProps): import("react").JSX.Element;

package/dist/designer/DesignerView.js

@@ -2,8 +2,9 @@ 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 { Banner, Button, DisabledReason, Field, Icon, Input, PromptDialog, Separator, Tabs, isApplePlatform, matchesShortcut, shortcut } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
+import { CODE_TEXT } from '../code-text.js';
 import { ColumnsEditor } from './ColumnsEditor.js';
 import { ForeignKeysEditor } from './ForeignKeysEditor.js';
 import { IndexesEditor } from './IndexesEditor.js';
@@ -13,7 +14,7 @@ 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 }) {
+export function DesignerView({ dialect, schema, draft, isNew, changed, tables, plan, readOnlyReason, failure, confirming, referenceColumns, onChange, onRequestApply, onConfirm, onCancelConfirm, onRevert, onDismissFailure, toolbarStart, 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);
@@ -25,9 +26,9 @@ export function DesignerView({ dialect, schema, draft, isNew, changed, tables, p
             }
         }
     }
-    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) => {
+    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: [toolbarStart !== undefined && toolbarStart !== null && toolbarStart !== false && (_jsxs("span", { className: "flex h-8 shrink-0 items-center gap-3", children: [toolbarStart, _jsx(Separator, {})] })), _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) })] })] }));
+                }, children: [plan.destructive && _jsx("p", { className: "mt-3 text-xs text-status-error", children: t('designer.confirm.destructive') }), _jsx("pre", { className: clsx(CODE_TEXT, 'mt-3 max-h-64 overflow-auto rounded-md bg-surface-sunken p-2 whitespace-pre text-text select-text'), children: scriptOf(plan.statements) })] })] }));
 }

package/dist/designer/SqlPreview.js

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { Copy } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon, copyText } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.js';
 import { scriptOf } from './plan.js';
 /* The sentence a problem of the draft is read as. */
 export function ProblemText({ problem }) {
@@ -13,5 +14,5 @@ export function ProblemText({ problem }) {
 export function SqlPreview({ plan, className, ref }) {
     const { t } = useTranslation('database');
     const script = scriptOf(plan.statements);
-    return (_jsxs("section", { ref: ref, "aria-label": t('designer.sql'), className: clsx('relative flex min-h-0 flex-col border-t border-border-soft bg-surface-sunken', className), children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center justify-between pr-2 pl-3", children: [_jsx("span", { className: "text-xs font-medium text-text-faint", children: t('designer.sql') }), _jsxs(Button, { variant: "ghost", size: "xs", disabled: script === '', onClick: () => copyText(script), children: [_jsx(Icon, { icon: Copy, size: 12 }), t('designer.copy')] })] }), _jsx("div", { className: "max-h-48 min-h-12 overflow-auto px-3 pb-3 select-text", children: plan.problems.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1 text-xs text-status-error", children: plan.problems.map((problem, i) => (_jsx("li", { children: _jsx(ProblemText, { problem: problem }) }, `${problem.code}:${problem.subject}:${i}`))) })) : script === '' ? (_jsx("p", { className: "text-xs text-text-faint", children: t('designer.noChanges') })) : (_jsx("pre", { className: "font-mono text-code whitespace-pre text-text", children: script })) })] }));
+    return (_jsxs("section", { ref: ref, "aria-label": t('designer.sql'), className: clsx('relative flex min-h-0 flex-col border-t border-border-soft bg-surface-sunken', className), children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center justify-between pr-2 pl-3", children: [_jsx("span", { className: "text-xs font-medium text-text-faint", children: t('designer.sql') }), _jsxs(Button, { variant: "ghost", size: "xs", disabled: script === '', onClick: () => copyText(script), children: [_jsx(Icon, { icon: Copy, size: 12 }), t('designer.copy')] })] }), _jsx("div", { className: "max-h-48 min-h-12 overflow-auto px-3 pb-3 select-text", children: plan.problems.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1 text-xs text-status-error", children: plan.problems.map((problem, i) => (_jsx("li", { children: _jsx(ProblemText, { problem: problem }) }, `${problem.code}:${problem.subject}:${i}`))) })) : script === '' ? (_jsx("p", { className: "text-xs text-text-faint", children: t('designer.noChanges') })) : (_jsx("pre", { className: clsx(CODE_TEXT, 'whitespace-pre text-text'), children: script })) })] }));
 }

package/dist/designer/TableDesigner.d.ts

@@ -1,10 +1,11 @@
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { Connection } from '../client/types.ts';
 export interface TableDesignerProps {
     connection: Connection;
     schema: string;
     table?: string;
+    toolbarStart?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function TableDesigner({ connection, schema, table, className, ref }: TableDesignerProps): import("react").JSX.Element;
+export declare function TableDesigner({ connection, schema, table, toolbarStart, className, ref }: TableDesignerProps): import("react").JSX.Element;

package/dist/designer/TableDesigner.js

@@ -13,7 +13,7 @@ import { planOf } from './plan.js';
 import { recoverFrom } from './recover.js';
 import { useReferenceColumns } from './useReferenceColumns.js';
 /* Creates a table or modifies one: its columns, indexes, foreign keys and options, with the SQL it will run shown before it runs. */
-export function TableDesigner({ connection, schema, table, className, ref }) {
+export function TableDesigner({ connection, schema, table, toolbarStart, className, ref }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const onAction = useDatabaseAction();
@@ -99,5 +99,5 @@ export function TableDesigner({ connection, schema, table, className, ref }) {
     return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), children: [(loaded.loading || snapshot === null) && loaded.error === null && (_jsx("div", { className: "grid grow place-items-center py-8 text-text-muted", children: _jsx(Spinner, { size: 20, label: t('designer.loading') }) })), loaded.error !== null && snapshot === null && (_jsx("div", { className: "p-3", children: _jsx(Banner, { icon: CircleAlert, tone: "error", className: "w-full", message: loaded.error, children: _jsx(Button, { variant: "secondary", size: "sm", onClick: loaded.reload, children: t('designer.retry') }) }) })), shapeChanged && (_jsx("div", { className: "shrink-0 px-3 pt-3", children: _jsx(Banner, { icon: RefreshCw, tone: "neutral", className: "w-full", message: t('designer.changed'), children: _jsx(Button, { variant: "secondary", size: "sm", onClick: loaded.reload, children: t('designer.reload') }) }) })), !loaded.loading && snapshot !== null && plan !== null && (_jsx(DesignerView, { className: "grow", dialect: snapshot.dialect, schema: schema, draft: draft, isNew: snapshot.structure === null, changed: draft !== editing.baseline, tables: snapshot.tables, plan: plan, readOnlyReason: readOnlyReason, failure: failure, confirming: confirming, referenceColumns: referenceColumns, onChange: (next) => setEditing({ ...editing, draft: next }), onRequestApply: () => setConfirming(true), onConfirm: apply, onCancelConfirm: () => setConfirming(false), onRevert: () => {
                     setEditing({ ...editing, draft: editing.baseline });
                     setFailure(null);
-                }, onDismissFailure: () => setFailure(null) }))] }));
+                }, onDismissFailure: () => setFailure(null), toolbarStart: toolbarStart }))] }));
 }

package/dist/explorer/DatabaseExplorer.d.ts

@@ -1,13 +1,16 @@
 import { type Ref } from 'react';
 import type { ExplorerSelection } from '../actions.ts';
 import type { Connection } from '../client/types.ts';
+import type { ExplorerFolder } from './folders.ts';
 export interface DatabaseExplorerProps {
     connections: readonly Connection[];
     value?: ExplorerSelection | null;
     defaultValue?: ExplorerSelection | null;
     onValueChange?(selection: ExplorerSelection | null): void;
     showSystemSchemas?: boolean;
+    openOnClick?: boolean;
+    folders?: Readonly<Record<string, readonly ExplorerFolder[]>>;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function DatabaseExplorer({ connections, value, defaultValue, onValueChange, showSystemSchemas, className, ref }: DatabaseExplorerProps): import("react").JSX.Element;
+export declare function DatabaseExplorer({ connections, value, defaultValue, onValueChange, showSystemSchemas, openOnClick, folders, className, ref }: DatabaseExplorerProps): import("react").JSX.Element;

package/dist/explorer/DatabaseExplorer.js

@@ -1,23 +1,26 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { CircleAlert, Columns2, Database, Eye, Folder, KeyRound, ListOrdered, Lock, Search, ShieldCheck, Table, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip, Tree } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useDatabaseAction, useDatabaseClient } from '../client-context.js';
 import { EngineIcon } from '../connections/EngineIcon.js';
+import { keyLabelOf } from '../column-keys.js';
+import { KeyIcon } from '../KeyIcon.js';
 import { RowMenu } from './RowMenu.js';
 import { TableDialog } from './TableDialog.js';
-import { connectionKey, flattenTree, hasMenu, isExpandable, isFolderKey, isSelectable, navigate, neededLoads, selectionKey, selectionOf, tabStop, tableOf } from './tree.js';
+import { connectionKey, flattenTree, hasMenu, isExpandable, startsOpen, isSelectable, navigate, neededLoads, selectionKey, selectionOf, tabStop, openedTableOf, tableKindIn, tableOf } from './tree.js';
 import { useExplorerLoads } from './use-explorer-loads.js';
 import { usePopupPress } from '../use-popup-press.js';
 import { useStoredExpansion } from './use-stored-expansion.js';
 /*
  * The connections, their schemas and their tables as a tree, loaded as each node opens. Every row
- * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`.
+ * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`,
+ * and on an item of a folder the app added opens it through the item's own `onOpen`.
  */
-export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, className, ref }) {
+export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, openOnClick = false, folders, className, ref }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const act = useDatabaseAction();
@@ -40,7 +43,8 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         schemas: loads.schemas,
         tables: loads.tables,
         structures: loads.structures,
-        versions: loads.versions
+        versions: loads.versions,
+        folders: (connectionId) => folders?.[connectionId] ?? []
     };
     const rows = flattenTree({ ...input, filter });
     const stop = tabStop(rows, activeKey, selectedKey);
@@ -56,8 +60,7 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         }
     }, [activeKey]);
     const setOpen = (key, open) => {
-        // A folder is open until the person closes it, everything else is closed until they open it.
-        const folder = isFolderKey(key);
+        const folder = startsOpen(key);
         const toggle = (current) => {
             const next = new Set(current);
             if (open !== folder) {
@@ -85,22 +88,33 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
             select(selection);
         }
     };
-    const open = (row) => {
-        const ref = tableOf(row);
-        if (ref !== null) {
-            pick(row);
-            act?.({ kind: 'open-table', ref, view: 'data' });
+    /* `preview` says a click opened it, which only an explorer that opens on a click tells the app. */
+    const open = (row, preview = false) => {
+        if (row.kind === 'appItem') {
+            row.item.onOpen?.({ preview });
+            return;
+        }
+        const ref = openedTableOf(row);
+        if (ref === null) {
+            return;
         }
+        pick(row);
+        const tableKind = row.kind === 'table' && row.ref === ref ? row.table.kind : tableKindIn(loads.tables(ref.connectionId, ref.schema), ref.table);
+        act?.({ kind: 'open-table', ref, view: 'data', ...(tableKind === undefined ? {} : { tableKind }), ...(openOnClick ? { preview } : {}) });
     };
     const activate = (row) => {
         switch (row.kind) {
             case 'table':
             case 'column':
+            case 'entry':
+            case 'appItem':
                 open(row);
                 break;
             case 'connection':
             case 'schema':
             case 'folder':
+            case 'part':
+            case 'appFolder':
                 pick(row);
                 toggle(row);
                 break;
@@ -132,11 +146,18 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
             setOpen(action.key, action.type === 'expand');
         }
     };
-    const click = (row) => {
+    /* `count` is the click's `detail`: the second click of a double click leaves the opening to the double click. */
+    const click = (row, count) => {
         if (pressedInPopup()) {
             return;
         }
         setActiveKey(row.key);
+        if (openOnClick && (row.kind === 'table' || row.kind === 'appItem')) {
+            if (count <= 1) {
+                open(row, true);
+            }
+            return;
+        }
         pick(row);
         if (row.kind !== 'table' && isExpandable(row)) {
             toggle(row);
@@ -167,7 +188,7 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
     const isSelected = (row) => row !== undefined && isSelectable(row) && row.key === selectedKey;
     const renderRow = (row, index) => {
         const connection = connectionOf(row);
-        const menu = connection !== undefined && hasMenu(row) ? (_jsx(RowMenu, { row: row, connection: connection, onRefresh: refresh, onDisconnect: disconnect, onRequest: setRequest })) : null;
+        const menu = row.kind === 'appItem' ? ((row.item.menu ?? null)) : connection !== undefined && hasMenu(row) ? (_jsx(RowMenu, { row: row, connection: connection, onRefresh: refresh, onDisconnect: disconnect, onRequest: setRequest })) : null;
         const selectedRow = isSelected(row);
         const props = {
             level: row.level,
@@ -189,8 +210,8 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                     rowElements.current.set(row.key, element);
                 }
             },
-            onClick: () => click(row),
-            onDoubleClick: tableOf(row) === null ? undefined : () => open(row),
+            onClick: (event) => click(row, event.detail),
+            onDoubleClick: tableOf(row) === null && row.kind !== 'appItem' ? undefined : () => open(row),
             onFocus: () => {
                 if (row.focusable) {
                     setActiveKey(row.key);
@@ -207,21 +228,29 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                         if (e.key === 'Escape') {
                             setFilter('');
                         }
-                    } }) }), connections.length === 0 ? (_jsx(EmptyState, { icon: Database, children: t('explorer.noConnections') })) : rows.length === 0 ? (_jsx(EmptyState, { icon: Search, children: t('explorer.noMatches', { query: filter.trim() }) })) : (_jsx(Tree.Root, { "aria-label": t('explorer.label'), className: "min-h-0 grow overflow-y-auto py-2", onKeyDown: onKeyDown, children: rows.map(renderRow) })), request !== null && _jsx(TableDialog, { request: request, onClose: () => setRequest(null), onDone: finish })] }));
+                    } }) }), connections.length === 0 ? (_jsx(EmptyState, { icon: Database, children: t('explorer.noConnections') })) : rows.length === 0 ? (_jsx(EmptyState, { icon: Search, children: t('explorer.noMatches', { query: filter.trim() }) })) : (_jsx(Tree.Root, { "aria-label": t('explorer.label'), overflow: "scroll", className: "min-h-0 grow overflow-y-auto pt-2", onKeyDown: onKeyDown, children: rows.map(renderRow) })), request !== null && _jsx(TableDialog, { request: request, onClose: () => setRequest(null), onDone: finish })] }));
 }
 function RowContent({ row, onToggle }) {
     const { t } = useTranslation('database');
     switch (row.kind) {
         case 'connection':
-            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(EngineIcon, { engine: row.connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.connection.name || t('connections.untitled') }), row.connection.config.readOnly === true && (_jsx(Tooltip, { label: t('explorer.readOnly'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-faint", children: _jsx(Icon, { icon: Lock, size: 12 }) }) })), row.version !== null && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.version }), row.schemaCount !== null && _jsx(SchemaCount, { shown: row.schemaCount.shown, total: row.schemaCount.total })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(EngineIcon, { engine: row.connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.connection.name || t('connections.untitled') }), row.connection.config.readOnly === true && (_jsx(Tooltip, { label: t('explorer.readOnly'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-faint", children: _jsx(Icon, { icon: Lock, size: 12 }) }) })), row.version !== null && _jsx("span", { className: "text-text-faint", children: row.version }), row.schemaCount !== null && _jsx(SchemaCount, { shown: row.schemaCount.shown, total: row.schemaCount.total })] }));
         case 'schema':
             return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Database, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.schema })] }));
         case 'folder':
             return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: t(row.group === 'view' ? 'explorer.views' : 'explorer.tables') }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
         case 'table':
             return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: row.table.kind === 'view' ? Eye : Table, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.table.name })] }));
+        case 'part':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: t(`explorer.parts.${row.part}`) }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
+        case 'appFolder':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.folder.label }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
+        case 'appItem':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(Icon, { icon: row.item.icon, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.item.label })] }));
+        case 'entry':
+            return _jsx(EntryContent, { row: row });
         case 'column':
-            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(ColumnIcon, { primaryKey: row.primaryKey, foreignKey: row.foreignKey }), _jsx(Tree.Label, { children: row.column.name }), row.column.type !== '' && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.column.type })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(ColumnIcon, { primaryKey: row.primaryKey, foreignKey: row.foreignKey }), _jsx(Tree.Label, { children: row.column.name }), row.column.type !== '' && _jsx("span", { className: "text-text-faint", children: row.column.type })] }));
         case 'loading':
             return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(Spinner, { size: 12 }), _jsx("span", { className: "text-text-faint", children: t('explorer.loading') })] }));
         case 'error':
@@ -236,12 +265,39 @@ function SchemaCount({ shown, total }) {
     const counts = { shown: formatNumber(shown), total: formatNumber(total) };
     return (_jsx(Tooltip, { label: t('explorer.schemaCountHint', { count: total, ...counts }), children: _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: t('explorer.schemaCount', counts) }) }));
 }
-function ColumnIcon({ primaryKey, foreignKey }) {
+/* A step smaller than the icons of the rows above, in the same 16px slot, so the names stay in line. */
+const ENTRY_ICON_SLOT = 'inline-flex size-4 shrink-0 items-center justify-center';
+function ColumnIcon(keys) {
     const { t } = useTranslation('database');
-    if (!primaryKey && !foreignKey) {
-        return _jsx(Icon, { icon: RectangleVertical, size: 16, className: "shrink-0 text-text-faint" });
+    if (!keys.primaryKey && !keys.foreignKey) {
+        return (_jsx("span", { className: ENTRY_ICON_SLOT, children: _jsx(Icon, { icon: Columns2, size: 14, className: "text-text-faint" }) }));
+    }
+    return (_jsx(Tooltip, { label: t(keyLabelOf(keys)), children: _jsx("span", { className: ENTRY_ICON_SLOT, children: _jsx(KeyIcon, { ...keys, size: 14 }) }) }));
+}
+/* A key, a foreign key, an index, a check or a trigger of a table: its name, and what it covers in the quiet color of a column's type. */
+function EntryContent({ row }) {
+    const { t } = useTranslation('database');
+    const { entry } = row;
+    const icon = (glyph, className) => (_jsx("span", { className: ENTRY_ICON_SLOT, children: _jsx(Icon, { icon: glyph, size: 14, className: className }) }));
+    switch (entry.type) {
+        case 'key':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), icon(KeyRound, entry.primary ? 'text-(--file-icon-yellow)' : 'text-text-muted'), _jsx(Tree.Label, { children: entry.name ?? t('explorer.primaryKey') }), _jsx("span", { className: "text-text-faint", children: entry.columns.join(', ') })] }));
+        case 'foreignKey': {
+            const { foreignKey } = entry;
+            const columns = foreignKey.columns.join(', ');
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), icon(KeyRound, 'text-(--file-icon-blue)'), _jsx(Tree.Label, { children: foreignKey.name ?? columns }), _jsx("span", { className: "text-text-faint", children: t('explorer.references', {
+                            columns,
+                            table: foreignKey.referencedTable,
+                            referenced: foreignKey.referencedColumns.join(', ')
+                        }) })] }));
+        }
+        case 'index':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), icon(ListOrdered, 'text-text-faint'), _jsx(Tree.Label, { children: entry.index.name }), _jsx("span", { className: "text-text-faint", children: entry.index.columns.join(', ') }), entry.index.unique && _jsx("span", { className: "text-text-faint", children: t('explorer.unique') })] }));
+        case 'check':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), icon(ShieldCheck, 'text-text-faint'), _jsx(Tree.Label, { children: entry.check.name ?? t('explorer.check') }), _jsx("span", { className: "font-mono text-text-faint", children: entry.check.expression })] }));
+        case 'trigger':
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), icon(Zap, 'text-text-faint'), _jsx(Tree.Label, { children: entry.trigger.name }), _jsx("span", { className: "text-text-faint", children: `${entry.trigger.timing} ${entry.trigger.event}` })] }));
     }
-    return (_jsx(Tooltip, { label: t(primaryKey ? 'explorer.primaryKey' : 'explorer.foreignKey'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-muted", children: _jsx(Icon, { icon: primaryKey ? KeyRound : Link2, size: 16 }) }) }));
 }
 function ErrorContent({ row }) {
     const { t } = useTranslation('database');

package/dist/explorer/RowMenu.js

@@ -29,8 +29,8 @@ export function RowMenu({ row, connection, onRefresh, onDisconnect, onRequest })
         const request = (change) => () => onRequest({ change, connection, ref, kind });
         return [
             [
-                actionItem('open-data', Table, t('explorer.openData'), { kind: 'open-table', ref, view: 'data' }),
-                actionItem('open-structure', TableProperties, t('explorer.openStructure'), { kind: 'open-table', ref, view: 'structure' }),
+                actionItem('open-data', Table, t('explorer.openData'), { kind: 'open-table', ref, view: 'data', tableKind: kind }),
+                actionItem('open-structure', TableProperties, t('explorer.openStructure'), { kind: 'open-table', ref, view: 'structure', tableKind: kind }),
                 kind === 'table' && writable ? actionItem('edit-table', PencilRuler, t('explorer.editTable'), { kind: 'edit-table', ref }) : null,
                 actionItem('console', SquareTerminal, t('explorer.newConsoleHere'), consoleAction(ref.schema, selectAllSql(connection.config.engine, ref)))
             ],

package/dist/explorer/expansion.js

@@ -1,4 +1,4 @@
-import { connectionOfKey, isFolderKey } from './tree.js';
+import { connectionOfKey, startsOpen } from './tree.js';
 const VERSION = 1;
 export const expansionKey = (connectionId) => `database:explorer:${connectionId}`;
 /* Reads what `serializeExpansion` wrote. Anything that does not fit gives nothing open and no folder closed. */
@@ -14,7 +14,7 @@ export const parseExpansion = (raw, connectionId) => {
         }
         const { expanded, collapsed } = parsed;
         const own = (keys, folders) => new Set(Array.isArray(keys)
-            ? keys.filter((key) => typeof key === 'string' && key.length > 2 && isFolderKey(key) === folders && connectionOfKey(key) === connectionId)
+            ? keys.filter((key) => typeof key === 'string' && key.length > 2 && startsOpen(key) === folders && connectionOfKey(key) === connectionId)
             : []);
         return { expanded: own(expanded, false), collapsed: own(collapsed, true) };
     }

package/dist/explorer/folders.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface ExplorerItem {
+    readonly id: string;
+    readonly label: string;
+    readonly icon: LucideIcon;
+    onOpen?(options: {
+        readonly preview: boolean;
+    }): void;
+    menu?: ReactNode;
+}
+export interface ExplorerFolder {
+    readonly id: string;
+    readonly label: string;
+    readonly items: readonly ExplorerItem[];
+}

package/dist/explorer/folders.js

@@ -0,0 +1 @@
+export {};

package/dist/explorer/tree.d.ts

@@ -1,6 +1,7 @@
 import type { ExplorerSelection } from '../actions.ts';
 import type { Connection, TableRef } from '../client/types.ts';
-import type { ColumnInfo, Engine, SchemaInfo, TableInfo, TableKind, TableStructure } from '../protocol/index.ts';
+import type { CheckInfo, ColumnInfo, Engine, ForeignKeyInfo, IndexInfo, SchemaInfo, TableInfo, TableKind, TableStructure, TriggerInfo } from '../protocol/index.ts';
+import type { ExplorerFolder, ExplorerItem } from './folders.ts';
 export type Load<T> = {
     readonly status: 'idle';
 } | {
@@ -22,9 +23,13 @@ export declare const connectionKey: (connectionId: string) => string;
 export declare const schemaKey: (connectionId: string, schema: string) => string;
 export declare const folderKey: (connectionId: string, schema: string, group: TableKind) => string;
 export declare const tableKey: (ref: TableRef) => string;
-export declare const isFolderKey: (key: string) => boolean;
+export declare const PARTS: readonly ['columns', 'keys', 'foreignKeys', 'indexes', 'checks', 'triggers'];
+export type TablePart = (typeof PARTS)[number];
+export declare const partKey: (ref: TableRef, part: TablePart) => string;
+export declare const startsOpen: (key: string) => boolean;
 export declare const connectionOfKey: (key: string) => string;
 export declare const columnKey: (ref: TableRef, column: string) => string;
+export declare const appFolderKey: (connectionId: string, folder: string) => string;
 export declare const loadKey: (target: LoadTarget) => string;
 export declare const GROUPS: readonly TableKind[];
 interface RowBase {
@@ -72,6 +77,36 @@ export interface ColumnRow extends RowBase {
     readonly primaryKey: boolean;
     readonly foreignKey: boolean;
 }
+export interface PartRow extends RowBase {
+    readonly kind: 'part';
+    readonly ref: TableRef;
+    readonly part: TablePart;
+    readonly expanded: boolean;
+    readonly count: number;
+}
+export type TableEntry = {
+    readonly type: 'key';
+    readonly name: string | null;
+    readonly columns: readonly string[];
+    readonly primary: boolean;
+} | {
+    readonly type: 'foreignKey';
+    readonly foreignKey: ForeignKeyInfo;
+} | {
+    readonly type: 'index';
+    readonly index: IndexInfo;
+} | {
+    readonly type: 'check';
+    readonly check: CheckInfo;
+} | {
+    readonly type: 'trigger';
+    readonly trigger: TriggerInfo;
+};
+export interface EntryRow extends RowBase {
+    readonly kind: 'entry';
+    readonly ref: TableRef;
+    readonly entry: TableEntry;
+}
 export interface LoadingRow extends RowBase {
     readonly kind: 'loading';
 }
@@ -80,14 +115,28 @@ export interface ErrorRow extends RowBase {
     readonly message: string;
     readonly retry: LoadTarget;
 }
+export interface AppFolderRow extends RowBase {
+    readonly kind: 'appFolder';
+    readonly connection: Connection;
+    readonly folder: ExplorerFolder;
+    readonly expanded: boolean;
+    readonly count: number;
+}
+export interface AppItemRow extends RowBase {
+    readonly kind: 'appItem';
+    readonly connection: Connection;
+    readonly item: ExplorerItem;
+}
 export interface EmptyRow extends RowBase {
     readonly kind: 'empty';
     readonly of: 'schemas' | 'tables' | 'columns';
 }
-export type TreeRow = ConnectionRow | SchemaRow | FolderRow | TableRow | ColumnRow | LoadingRow | ErrorRow | EmptyRow;
-export type ExpandableRow = ConnectionRow | SchemaRow | FolderRow | TableRow;
+export type TreeRow = ConnectionRow | SchemaRow | FolderRow | TableRow | PartRow | ColumnRow | EntryRow | AppFolderRow | AppItemRow | LoadingRow | ErrorRow | EmptyRow;
+export type ExpandableRow = ConnectionRow | SchemaRow | FolderRow | TableRow | PartRow | AppFolderRow;
 export declare const isExpandable: (row: TreeRow) => row is ExpandableRow;
 export declare const tableOf: (row: TreeRow) => TableRef | null;
+export declare const openedTableOf: (row: TreeRow) => TableRef | null;
+export declare const tableKindIn: (tables: Load<readonly TableInfo[]>, name: string) => TableKind | undefined;
 export declare const selectionOf: (row: TreeRow) => ExplorerSelection | null;
 export declare const selectionKey: (selection: ExplorerSelection) => string;
 export declare const hasMenu: (row: TreeRow) => boolean;
@@ -103,8 +152,10 @@ export interface TreeInput {
     tables(connectionId: string, schema: string): Load<readonly TableInfo[]>;
     structures(connectionId: string, schema: string, table: string): Load<TableStructure>;
     versions(connectionId: string): string | null;
+    folders?(connectionId: string): readonly ExplorerFolder[];
 }
 export declare const visibleSchemas: (schemas: readonly SchemaInfo[], showSystemSchemas: boolean) => readonly SchemaInfo[];
+export declare const tableEntries: (structure: TableStructure) => Readonly<Record<Exclude<TablePart, 'columns'>, readonly TableEntry[]>>;
 export declare const flattenTree: (input: TreeInput) => TreeRow[];
 export declare const neededLoads: (input: Omit<TreeInput, 'filter'>) => LoadTarget[];
 export type TreeAction = {