@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/designer/DesignerView.tsx

@@ -0,0 +1,184 @@
+import type { KeyboardEvent, Ref } from 'react';
+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 type { Dialect, TableDraft } from '../ddl/index.ts';
+import { ColumnsEditor } from './ColumnsEditor.tsx';
+import { ForeignKeysEditor } from './ForeignKeysEditor.tsx';
+import { IndexesEditor } from './IndexesEditor.tsx';
+import { OptionsEditor } from './OptionsEditor.tsx';
+import { renameTable } from './edit.ts';
+import { scriptOf, type Plan } from './plan.ts';
+import { SqlPreview } from './SqlPreview.tsx';
+
+export interface DesignerViewProps {
+    dialect: Dialect;
+    schema: string;
+    draft: TableDraft;
+    /* The table does not exist yet. */
+    isNew: boolean;
+    /* The draft differs from what was loaded. */
+    changed: boolean;
+    /* The tables a foreign key can point at. */
+    tables: readonly string[];
+    plan: Plan;
+    /* Why nothing can be edited, or `null` when everything can. */
+    readOnlyReason: string | null;
+    /* What the last Apply answered with, kept until the next one. */
+    failure: string | null;
+    /* The confirmation of the statements is open. */
+    confirming: boolean;
+    /* The columns of a table a foreign key may point at, or `null` while they load. */
+    referenceColumns(table: string): readonly string[] | null;
+    onChange(draft: TableDraft): void;
+    /* Opens the confirmation. */
+    onRequestApply(): void;
+    onConfirm(): Promise<void>;
+    onCancelConfirm(): void;
+    onRevert(): void;
+    onDismissFailure(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+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
+}: DesignerViewProps) {
+    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: KeyboardEvent<HTMLDivElement>): void {
+        if (matchesShortcut(APPLY_SHORTCUT, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            if (applyReason === null) {
+                onRequestApply();
+            }
+        }
+    }
+
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 min-w-0 flex-col', className)} onKeyDown={handleKeyDown}>
+            <div className="flex shrink-0 items-end gap-3 border-b border-border-soft px-3 py-2">
+                <Field label={t('designer.tableName')} className="w-80">
+                    <Input
+                        mono
+                        spellCheck={false}
+                        placeholder={t('designer.tableNamePlaceholder')}
+                        value={draft.name}
+                        disabled={disabled}
+                        onChange={(event) => onChange(renameTable(draft, event.target.value))}
+                    />
+                </Field>
+                <div className="ml-auto flex items-center gap-2">
+                    <Button variant="secondary" disabled={!changed} onClick={onRevert}>
+                        <Icon icon={Undo2} size={12} />
+                        {t('designer.revert')}
+                    </Button>
+                    <DisabledReason reason={applyReason}>
+                        <span className="inline-flex">
+                            <Button variant="primary" disabled={applyReason !== null} onClick={onRequestApply}>
+                                {isNew ? t('designer.create') : t('designer.apply')}
+                            </Button>
+                        </span>
+                    </DisabledReason>
+                </div>
+            </div>
+            {readOnlyReason !== null && (
+                <div className="shrink-0 px-3 pt-3">
+                    <Banner icon={Lock} tone="neutral" className="w-full" message={readOnlyReason} />
+                </div>
+            )}
+            {failure !== null && (
+                <div className="shrink-0 px-3 pt-3">
+                    <Banner icon={CircleAlert} tone="error" className="w-full" message={failure}>
+                        <Button variant="secondary" size="sm" onClick={onDismissFailure}>
+                            {t('designer.dismiss')}
+                        </Button>
+                    </Banner>
+                </div>
+            )}
+            <Tabs.Root defaultValue="columns" className="flex min-h-0 grow flex-col">
+                <Tabs.List className="shrink-0 px-3">
+                    <Tabs.Tab value="columns">
+                        {t('designer.tabs.columns')}
+                        <Tabs.Count value={draft.columns.length} />
+                    </Tabs.Tab>
+                    <Tabs.Tab value="indexes">
+                        {t('designer.tabs.indexes')}
+                        <Tabs.Count value={draft.indexes.length} />
+                    </Tabs.Tab>
+                    <Tabs.Tab value="foreignKeys">
+                        {t('designer.tabs.foreignKeys')}
+                        <Tabs.Count value={draft.foreignKeys.length} />
+                    </Tabs.Tab>
+                    <Tabs.Tab value="options">{t('designer.tabs.options')}</Tabs.Tab>
+                </Tabs.List>
+                <Tabs.Panel value="columns" className="min-h-0 grow overflow-auto">
+                    <ColumnsEditor draft={draft} dialect={dialect} disabled={disabled} onChange={onChange} />
+                </Tabs.Panel>
+                <Tabs.Panel value="indexes" className="min-h-0 grow overflow-auto">
+                    <IndexesEditor draft={draft} dialect={dialect} disabled={disabled} onChange={onChange} />
+                </Tabs.Panel>
+                <Tabs.Panel value="foreignKeys" className="min-h-0 grow overflow-auto">
+                    <ForeignKeysEditor
+                        draft={draft}
+                        dialect={dialect}
+                        disabled={disabled}
+                        schema={schema}
+                        tables={tables}
+                        referenceColumns={referenceColumns}
+                        onChange={onChange}
+                    />
+                </Tabs.Panel>
+                <Tabs.Panel value="options" className="min-h-0 grow overflow-auto">
+                    <OptionsEditor draft={draft} dialect={dialect} disabled={disabled} onChange={onChange} />
+                </Tabs.Panel>
+            </Tabs.Root>
+            <SqlPreview plan={plan} className="shrink-0" />
+            <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();
+                    }
+                }}
+            >
+                {plan.destructive && <p className="mt-3 text-xs text-status-error">{t('designer.confirm.destructive')}</p>}
+                <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">
+                    {scriptOf(plan.statements)}
+                </pre>
+            </PromptDialog>
+        </div>
+    );
+}

package/src/designer/ForeignKeysEditor.tsx

@@ -0,0 +1,132 @@
+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.ts';
+import type { EditorProps } from './editor-props.ts';
+import { NamePicker } from './NamePicker.tsx';
+import { addForeignKey, patchForeignKey, removeForeignKey, setReferencedTable, toggleForeignKeyColumn } from './edit.ts';
+
+export interface ForeignKeysEditorProps extends EditorProps {
+    schema: string;
+    /* The tables a key can point at. */
+    tables: readonly string[];
+    /* The columns of a table, or `null` while they load. */
+    referenceColumns(table: string): readonly string[] | null;
+}
+
+/* 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 }: ForeignKeysEditorProps) {
+    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 (
+        <div ref={ref} className={clsx('flex min-h-0 flex-col', className)}>
+            <div>
+                {draft.foreignKeys.length === 0 && <EmptyState>{t('designer.foreignKeys.empty')}</EmptyState>}
+                {draft.foreignKeys.map((foreignKey) => {
+                    const referenced = foreignKey.referencedTable === '' ? [] : referenceColumns(foreignKey.referencedTable);
+                    const choices =
+                        tables.includes(foreignKey.referencedTable) || foreignKey.referencedTable === '' ? tables : [...tables, foreignKey.referencedTable];
+                    return (
+                        <div key={foreignKey.key} className="flex flex-col gap-3 border-b border-border-soft px-3 py-3">
+                            <div className="flex items-end gap-3">
+                                <Field label={t('designer.foreignKeys.name')} className="w-56">
+                                    <Input
+                                        size="sm"
+                                        spellCheck={false}
+                                        value={foreignKey.name}
+                                        disabled={disabled}
+                                        onChange={(event) => onChange(patchForeignKey(draft, foreignKey.key, { name: event.target.value }))}
+                                    />
+                                </Field>
+                                <Field label={t('designer.foreignKeys.referencedTable')} group className="w-56">
+                                    <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))}
+                                    />
+                                </Field>
+                                <Field label={t('designer.foreignKeys.onUpdate')} group className="w-40">
+                                    <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 }))
+                                        }
+                                    />
+                                </Field>
+                                <Field label={t('designer.foreignKeys.onDelete')} group className="w-40">
+                                    <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 }))
+                                        }
+                                    />
+                                </Field>
+                                <IconButton
+                                    icon={Trash2}
+                                    size="xs"
+                                    className="mb-1"
+                                    label={t('designer.foreignKeys.remove')}
+                                    disabled={disabled}
+                                    onClick={() => onChange(removeForeignKey(draft, foreignKey.key))}
+                                />
+                            </div>
+                            <div className="grid grid-cols-2 gap-3">
+                                <Field label={t('designer.foreignKeys.columns')} group>
+                                    <NamePicker
+                                        label={t('designer.foreignKeys.columns')}
+                                        options={columns}
+                                        value={foreignKey.columns}
+                                        disabled={disabled}
+                                        onToggle={(name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'columns', name))}
+                                    />
+                                </Field>
+                                <Field label={t('designer.foreignKeys.referencedColumns')} group>
+                                    {referenced === null ? (
+                                        <Spinner size={14} label={t('designer.foreignKeys.loadingColumns')} />
+                                    ) : (
+                                        <NamePicker
+                                            label={t('designer.foreignKeys.referencedColumns')}
+                                            options={referenced}
+                                            value={foreignKey.referencedColumns}
+                                            disabled={disabled}
+                                            onToggle={(name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'referencedColumns', name))}
+                                        />
+                                    )}
+                                </Field>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="shrink-0 px-3 py-2">
+                <Button variant="secondary" size="sm" disabled={disabled} onClick={() => onChange(addForeignKey(draft, schema))}>
+                    <Icon icon={Plus} size={12} />
+                    {t('designer.foreignKeys.add')}
+                </Button>
+            </div>
+        </div>
+    );
+}

package/src/designer/IndexesEditor.tsx

@@ -0,0 +1,63 @@
+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 type { EditorProps } from './editor-props.ts';
+import { NamePicker } from './NamePicker.tsx';
+import { addIndex, patchIndex, removeIndex, toggleIndexColumn } from './edit.ts';
+
+/* 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 }: EditorProps) {
+    const { t } = useTranslation('database');
+    const columns = draft.columns.map((column) => column.name);
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 flex-col', className)}>
+            <div>
+                {draft.indexes.length === 0 && <EmptyState>{t('designer.indexes.empty')}</EmptyState>}
+                {draft.indexes.map((index) => (
+                    <div key={index.key} className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border-soft px-3 py-2">
+                        <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 }))}
+                        />
+                        <label className="flex items-center gap-2 text-xs text-text-muted">
+                            <Checkbox
+                                label={t('designer.indexes.unique')}
+                                checked={index.unique}
+                                disabled={disabled}
+                                onCheckedChange={(checked) => onChange(patchIndex(draft, index.key, { unique: checked }))}
+                            />
+                            {t('designer.indexes.unique')}
+                        </label>
+                        <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))}
+                        />
+                        <IconButton
+                            icon={Trash2}
+                            size="xs"
+                            label={t('designer.indexes.remove')}
+                            disabled={disabled}
+                            onClick={() => onChange(removeIndex(draft, index.key))}
+                        />
+                    </div>
+                ))}
+            </div>
+            <div className="shrink-0 px-3 py-2">
+                <Button variant="secondary" size="sm" disabled={disabled} onClick={() => onChange(addIndex(draft))}>
+                    <Icon icon={Plus} size={12} />
+                    {t('designer.indexes.add')}
+                </Button>
+            </div>
+        </div>
+    );
+}

package/src/designer/NamePicker.tsx

@@ -0,0 +1,44 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+
+export interface NamePickerProps {
+    /* Every name that can be picked, in the order to show them. */
+    options: readonly string[];
+    /* The names picked, in the order they were picked: for a key that order is the order of its columns. */
+    value: readonly string[];
+    onToggle(name: string): void;
+    /* The accessible name of the group. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* 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 }: NamePickerProps) {
+    const { t } = useTranslation('database');
+    return (
+        <div ref={ref} role="group" aria-label={label} className={clsx('flex flex-wrap items-center gap-1', className)}>
+            {options.length === 0 && <span className="text-xs text-text-faint">{t('designer.noColumnsToPick')}</span>}
+            {options.map((name) => {
+                const position = value.indexOf(name);
+                return (
+                    <Button
+                        key={name}
+                        size="xs"
+                        variant={position < 0 ? 'ghost' : 'secondary'}
+                        aria-pressed={position >= 0}
+                        disabled={disabled}
+                        onClick={() => onToggle(name)}
+                    >
+                        {position >= 0 && value.length > 1 && <span className="text-text-faint">{formatNumber(position + 1)}</span>}
+                        {name}
+                    </Button>
+                );
+            })}
+        </div>
+    );
+}

package/src/designer/OptionsEditor.tsx

@@ -0,0 +1,101 @@
+import { useId } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Field, Input, Switch, TextArea } from '@adecore/ui';
+import { MYSQL_CHARSETS, MYSQL_ENGINES, collationSuggestionsOf } from '../ddl/index.ts';
+import type { EditorProps } from './editor-props.ts';
+import { patchOptions } from './edit.ts';
+
+/* The options of a table, which differ per engine: a storage engine and character set on MySQL, rowid and strict typing on SQLite. */
+export function OptionsEditor({ draft, dialect, disabled, onChange, className, ref }: EditorProps) {
+    const { t } = useTranslation('database');
+    const id = useId();
+    const { options } = draft;
+    if (dialect.engine === 'sqlite') {
+        return (
+            <div ref={ref} className={clsx('flex flex-col gap-4 p-3', className)}>
+                <label className="flex items-start gap-3">
+                    <Switch
+                        label={t('designer.options.withoutRowid')}
+                        checked={options.withoutRowid}
+                        disabled={disabled}
+                        onCheckedChange={(checked) => onChange(patchOptions(draft, { withoutRowid: checked }))}
+                    />
+                    <span className="flex flex-col">
+                        <span className="text-sm text-text">{t('designer.options.withoutRowid')}</span>
+                        <span className="text-xs text-text-muted">{t('designer.options.withoutRowidHint')}</span>
+                    </span>
+                </label>
+                <label className="flex items-start gap-3">
+                    <Switch
+                        label={t('designer.options.strict')}
+                        checked={options.strict}
+                        disabled={disabled}
+                        onCheckedChange={(checked) => onChange(patchOptions(draft, { strict: checked }))}
+                    />
+                    <span className="flex flex-col">
+                        <span className="text-sm text-text">{t('designer.options.strict')}</span>
+                        <span className="text-xs text-text-muted">{t('designer.options.strictHint')}</span>
+                    </span>
+                </label>
+            </div>
+        );
+    }
+    return (
+        <div ref={ref} className={clsx('flex max-w-xl flex-col gap-4 p-3', className)}>
+            <datalist id={`${id}-engines`}>
+                {MYSQL_ENGINES.map((engine) => (
+                    <option key={engine} value={engine} />
+                ))}
+            </datalist>
+            <datalist id={`${id}-charsets`}>
+                {MYSQL_CHARSETS.map((charset) => (
+                    <option key={charset} value={charset} />
+                ))}
+            </datalist>
+            <datalist id={`${id}-collations`}>
+                {collationSuggestionsOf(options.charset).map((collation) => (
+                    <option key={collation} value={collation} />
+                ))}
+            </datalist>
+            <Field label={t('designer.options.engine')} hint={t('designer.options.serverDefault')}>
+                <Input
+                    mono
+                    list={`${id}-engines`}
+                    spellCheck={false}
+                    value={options.engine}
+                    disabled={disabled}
+                    onChange={(event) => onChange(patchOptions(draft, { engine: event.target.value }))}
+                />
+            </Field>
+            <Field label={t('designer.options.charset')} hint={t('designer.options.serverDefault')}>
+                <Input
+                    mono
+                    list={`${id}-charsets`}
+                    spellCheck={false}
+                    value={options.charset}
+                    disabled={disabled}
+                    onChange={(event) => onChange(patchOptions(draft, { charset: event.target.value }))}
+                />
+            </Field>
+            <Field label={t('designer.options.collation')} hint={t('designer.options.serverDefault')}>
+                <Input
+                    mono
+                    list={`${id}-collations`}
+                    spellCheck={false}
+                    value={options.collation}
+                    disabled={disabled}
+                    onChange={(event) => onChange(patchOptions(draft, { collation: event.target.value }))}
+                />
+            </Field>
+            <Field label={t('designer.options.comment')}>
+                <TextArea
+                    rows={3}
+                    value={options.comment}
+                    disabled={disabled}
+                    onChange={(event) => onChange(patchOptions(draft, { comment: event.target.value }))}
+                />
+            </Field>
+        </div>
+    );
+}

package/src/designer/SqlPreview.tsx

@@ -0,0 +1,56 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { Copy } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, copyText } from '@adecore/ui';
+import type { DraftProblem } from '../ddl/index.ts';
+import type { Plan } from './plan.ts';
+import { scriptOf } from './plan.ts';
+
+export interface SqlPreviewProps {
+    plan: Plan;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* The sentence a problem of the draft is read as. */
+export function ProblemText({ problem }: { problem: DraftProblem }) {
+    const { t } = useTranslation('database');
+    return <>{t(`ddl.problem.${problem.code}`, { subject: problem.subject })}</>;
+}
+
+/* What Apply would run, as a person reads it: monospace, read only, and copyable. */
+export function SqlPreview({ plan, className, ref }: SqlPreviewProps) {
+    const { t } = useTranslation('database');
+    const script = scriptOf(plan.statements);
+    return (
+        <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)}
+        >
+            <div className="flex h-8 shrink-0 items-center justify-between pr-2 pl-3">
+                <span className="text-xs font-medium text-text-faint">{t('designer.sql')}</span>
+                <Button variant="ghost" size="xs" disabled={script === ''} onClick={() => copyText(script)}>
+                    <Icon icon={Copy} size={12} />
+                    {t('designer.copy')}
+                </Button>
+            </div>
+            <div className="max-h-48 min-h-12 overflow-auto px-3 pb-3 select-text">
+                {plan.problems.length > 0 ? (
+                    <ul className="flex flex-col gap-1 text-xs text-status-error">
+                        {plan.problems.map((problem, i) => (
+                            <li key={`${problem.code}:${problem.subject}:${i}`}>
+                                <ProblemText problem={problem} />
+                            </li>
+                        ))}
+                    </ul>
+                ) : script === '' ? (
+                    <p className="text-xs text-text-faint">{t('designer.noChanges')}</p>
+                ) : (
+                    <pre className="font-mono text-code whitespace-pre text-text">{script}</pre>
+                )}
+            </div>
+        </section>
+    );
+}