@elyx-code/editor-ui 0.0.2

package/src/services/editor/modules/sql-migrations-generation.tsx

@@ -0,0 +1,1054 @@
+import React from 'react';
+import {
+	BaseRegisteredExtension,
+	ExtensionContextType,
+	ExtensionManifest,
+	ExtensionPermissions,
+	ExtentionPriority,
+	IRegisteredExtension,
+	DefaultProjectLogicContext,
+	ProjectStateEvents,
+	DefinitionEntityState,
+	ProjectState,
+	ChangeSet,
+	EntityId,
+	PropertyState,
+	resolveEntityName,
+	EntityType,
+	StateMutationAction,
+	resolveSQLMigrationsDiffs,
+	createOrUpdateRowTransformer,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../EditorService';
+import Button from '../../../lib/button/Button';
+import { getCanvasEntityDraggableContainerDOMId } from '../ui';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+const ICON_COL_WIDTH = 22;
+
+// Non-interactive row (no hover, no click)
+const Row: React.FC<{
+	icon: React.ReactNode;
+	color?: string;
+	children: React.ReactNode;
+}> = ({ icon, color, children }) => (
+	<div
+		role='presentation'
+		style={{
+			display: 'flex',
+			alignItems: 'center',
+			gap: 8,
+			padding: '6px 8px',
+			border: '1px solid rgba(0,0,0,0.06)',
+			borderRadius: 6,
+			background: '#fff',
+		}}
+	>
+		<div
+			style={{
+				width: ICON_COL_WIDTH,
+				minWidth: ICON_COL_WIDTH,
+				display: 'flex',
+				justifyContent: 'center',
+				color,
+			}}
+		>
+			{icon}
+		</div>
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+			}}
+		>
+			{children}
+		</div>
+	</div>
+);
+
+// Collapsible section with aligned icon
+const Section: React.FC<{
+	title: string;
+	subtitle?: string;
+	count?: number;
+	defaultOpen?: boolean;
+	icon?: React.ReactNode;
+	iconColor?: string;
+	children?: React.ReactNode;
+}> = ({
+	title,
+	subtitle,
+	count,
+	defaultOpen = true,
+	icon,
+	iconColor,
+	children,
+}) => {
+	const [open, setOpen] = React.useState(defaultOpen);
+	return (
+		<div
+			style={{
+				border: '1px solid rgba(0,0,0,0.08)',
+				borderRadius: 8,
+				background: 'rgba(0,0,0,0.02)',
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					padding: '8px 10px',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 10,
+					}}
+				>
+					<div
+						style={{
+							width: ICON_COL_WIDTH,
+							minWidth: ICON_COL_WIDTH,
+							display: 'flex',
+							justifyContent: 'center',
+							color: iconColor || 'inherit',
+						}}
+					>
+						{icon}
+					</div>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: 2,
+						}}
+					>
+						<span style={{ fontSize: 14 }}>{title}</span>
+						{!!subtitle && (
+							<span
+								style={{
+									fontSize: 11,
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								{subtitle}
+							</span>
+						)}
+					</div>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+					}}
+				>
+					{typeof count === 'number' && (
+						<span
+							style={{
+								fontSize: 12,
+								lineHeight: '20px',
+								height: 20,
+								minWidth: 20,
+								padding: '0 6px',
+								borderRadius: 10,
+								background: '#eee',
+								textAlign: 'center',
+							}}
+						>
+							{count}
+						</span>
+					)}
+					<button
+						onClick={() => setOpen((o) => !o)}
+						aria-label={open ? 'Collapse section' : 'Expand section'}
+						style={{
+							width: 24,
+							height: 24,
+							border: 'none',
+							background: 'transparent',
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'center',
+							cursor: 'pointer',
+						}}
+					>
+						{open ? (
+							<i className='fa-regular fa-chevron-up' />
+						) : (
+							<i className='fa-regular fa-chevron-down' />
+						)}
+					</button>
+				</div>
+			</div>
+
+			<div
+				style={{
+					height: open ? 'auto' : 0,
+					overflow: 'hidden',
+				}}
+			>
+				<div
+					style={{
+						padding: 8,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 6,
+					}}
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const PropChangeCard: React.FC<{
+	propId: EntityId;
+	changes: {
+		castableDataTypeEntity?: { fromId: EntityId; toId: EntityId };
+		nonCastableDataTypeEntity?: { fromId: EntityId; toId: EntityId };
+		nameChange?: { from: string; to: string };
+		requiredChange?: { from: boolean; to: boolean };
+	};
+	editor: EditorService;
+}> = ({ propId, changes, editor }) => {
+	const [open, setOpen] = React.useState(true); // ✅ valid (top-level in a component)
+
+	const newPropState = editor.project.get(propId) as PropertyState;
+	const oldPropState = editor.lastPublishedProjectState.get(
+		propId,
+	) as PropertyState;
+	const title = newPropState?.name || oldPropState?.name || 'Unknown name';
+
+	return (
+		<div
+			key={propId + '-changes'}
+			style={{
+				border: '1px solid rgba(0,0,0,0.06)',
+				borderRadius: 8,
+				background: 'rgba(0,0,0,0.01)',
+				overflow: 'hidden',
+			}}
+		>
+			{/* Per-property header */}
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					padding: '8px 10px',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 10,
+					}}
+				>
+					<div
+						style={{
+							width: ICON_COL_WIDTH,
+							minWidth: ICON_COL_WIDTH,
+							display: 'flex',
+							justifyContent: 'center',
+						}}
+					>
+						<i className='fa-regular fa-sliders' />
+					</div>
+					<span
+						style={{
+							fontSize: 13,
+							fontWeight: 500,
+						}}
+					>
+						{title}
+					</span>
+				</div>
+				<button
+					onClick={() => setOpen((o) => !o)}
+					aria-label={open ? 'Collapse changes' : 'Expand changes'}
+					style={{
+						width: 24,
+						height: 24,
+						border: 'none',
+						background: 'transparent',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						cursor: 'pointer',
+					}}
+				>
+					{open ? (
+						<i className='fa-regular fa-chevron-up' />
+					) : (
+						<i className='fa-regular fa-chevron-down' />
+					)}
+				</button>
+			</div>
+
+			{/* Per-property body */}
+			<div
+				style={{
+					height: open ? 'auto' : 0,
+					overflow: 'hidden',
+				}}
+			>
+				<div
+					style={{
+						padding: 8,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 6,
+					}}
+				>
+					{!!changes.nameChange && (
+						<Row icon={<i className='fa-regular fa-font-case' />}>
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: 2,
+								}}
+							>
+								<span
+									style={{
+										fontSize: 13,
+									}}
+								>
+									Name changed
+								</span>
+								<Diff
+									from={changes.nameChange.from || 'Unnamed property'}
+									to={changes.nameChange.to || 'Unnamed property'}
+								/>
+							</div>
+						</Row>
+					)}
+					{!!changes.requiredChange && (
+						<Row
+							icon={<i className='fa-regular fa-triangle-exclamation' />}
+							color={'#ED6C02'}
+						>
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: 2,
+								}}
+							>
+								<span
+									style={{
+										fontSize: 13,
+									}}
+								>
+									Required flag
+								</span>
+								<Diff
+									from={
+										changes.requiredChange.from ? 'required' : 'not required'
+									}
+									to={changes.requiredChange.to ? 'required' : 'not required'}
+								/>
+							</div>
+						</Row>
+					)}
+					{!!changes.castableDataTypeEntity && (
+						<Row icon={<i className='fa-regular fa-database' />}>
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: 2,
+								}}
+							>
+								<span
+									style={{
+										fontSize: 13,
+									}}
+								>
+									Data type
+								</span>
+								<Diff
+									from={(() => {
+										const ent = editor.project.get(
+											changes.castableDataTypeEntity!.fromId,
+										);
+										return ent
+											? resolveEntityName(ent, editor.project)
+											: 'Unknown';
+									})()}
+									to={(() => {
+										const ent = editor.project.get(
+											changes.castableDataTypeEntity!.toId,
+										);
+										return ent
+											? resolveEntityName(ent, editor.project)
+											: 'Unknown';
+									})()}
+								/>
+							</div>
+						</Row>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const Diff: React.FC<{
+	from?: React.ReactNode;
+	to?: React.ReactNode;
+}> = ({ from, to }) => (
+	<div
+		style={{
+			display: 'flex',
+			alignItems: 'center',
+			gap: 6,
+			flexWrap: 'wrap',
+		}}
+	>
+		<span
+			style={{
+				fontFamily: 'monospace',
+				fontSize: 12,
+				border: '1px solid rgba(0,0,0,0.12)',
+				padding: '2px 6px',
+				borderRadius: 12,
+			}}
+		>
+			{String(from ?? '—')}
+		</span>
+		<i className='fa-regular fa-arrow-right' />
+		<span
+			style={{
+				fontFamily: 'monospace',
+				fontSize: 12,
+				background: 'rgba(99, 102, 241, 0.12)',
+				border: '1px solid rgba(99, 102, 241, 0.35)',
+				padding: '2px 6px',
+				borderRadius: 12,
+			}}
+		>
+			{String(to ?? '—')}
+		</span>
+	</div>
+);
+
+function getEntityIdFromDialogId(dialogId: string): string | null {
+	const match = dialogId.match(/^sql-migration-generated--(.+?)--\d+$/);
+	return match ? match[1] : null;
+}
+
+// localStorage flag, scoped to (project, user), that suppresses the
+// upon-change "Live database transformation required" dialog until the user
+// next manually engages with a row-transformer (via this same dialog or via
+// the DefinitionEntityCard 3-dot menu). The publication preview's "you can't
+// publish until you add these" gate intentionally does NOT clear the flag —
+// the gate runs every time the user opens the preview anyway.
+const SQL_MIGRATIONS_DEFER_KEY_PREFIX = 'sql-migrations:defer:';
+
+function getDeferKey(editor: EditorService): string {
+	return `${SQL_MIGRATIONS_DEFER_KEY_PREFIX}${editor.projectId}:${editor.userAuthorId}`;
+}
+
+export function isSQLMigrationsGenerationDeferred(
+	editor: EditorService,
+): boolean {
+	return window.localStorage.getItem(getDeferKey(editor)) === 'true';
+}
+
+export function setSQLMigrationsGenerationDeferred(
+	editor: EditorService,
+	value: boolean,
+): void {
+	const key = getDeferKey(editor);
+	if (value) {
+		window.localStorage.setItem(key, 'true');
+	} else {
+		window.localStorage.removeItem(key);
+	}
+}
+
+const requestedDialogsSet = new Set<string>();
+
+export class SQLMigrationsGenerationModule
+	extends BaseRegisteredExtension
+	implements IRegisteredExtension<any>
+{
+	manifest: ExtensionManifest = {
+		id: 'sql-migrations-generation-module',
+		version: '1.0.0',
+		description: 'Manages the generation of SQL migration entities',
+		initPriority: ExtentionPriority.High,
+		permissions: [ExtensionPermissions.All],
+		contexts: [ExtensionContextType.Editor, ExtensionContextType.Logic],
+	};
+
+	module = {
+		init: (contexts: (EditorService | DefaultProjectLogicContext)[]) => {
+			const editor = contexts.find(
+				(context) => context.contextType === ExtensionContextType.Editor,
+			) as EditorService;
+
+			if (!editor) {
+				throw new Error(
+					'No editor context found for SQLMigrationsGenerationModule',
+				);
+			}
+
+			editor.on(
+				ProjectStateEvents.PERSISTED_DEFINITION_ENTITY_UPDATED,
+				async (
+					updatedEntity: DefinitionEntityState,
+					changeSet: ChangeSet | null = editor.project.addChangeSet(
+						new ChangeSet(
+							editor.project,
+							ProjectState.sessionAuthor,
+							new Date().toISOString(),
+							editor.project,
+							false,
+							StateMutationAction.GenerateSQLMigrationOnPersistedEntityUpdate,
+						),
+					),
+				) => {
+					if (!editor.lastPublishedProjectState) {
+						return;
+					}
+
+					const lastPublishedEntityVersion =
+						editor.lastPublishedProjectState.get(
+							updatedEntity.id,
+						) as DefinitionEntityState | null;
+
+					if (!lastPublishedEntityVersion) {
+						return;
+					}
+
+					const dialogId =
+						'sql-migration-generated--' + updatedEntity.id + '--' + Date.now();
+
+					const diffs = resolveSQLMigrationsDiffs(
+						editor.logic,
+						editor.lastPublishedProjectState,
+						updatedEntity,
+					);
+
+					const {
+						newRowTransformerNeeded,
+						newestOpenRowTransformer,
+						newRequiredProperties,
+						deletedProperties,
+						newNonRequiredProperties,
+						propChanges,
+						isPreexistingRowTransformerUpToDate,
+					} = diffs;
+
+					if (
+						!newRowTransformerNeeded &&
+						isPreexistingRowTransformerUpToDate !== false
+					) {
+						return;
+					}
+
+					// The user previously asked to defer migration prompts until they
+					// manually engage with a row-transformer or until publication time.
+					// Skip surfacing the dialog. The publication-preview gate will still
+					// block the publish, and the DefinitionEntityCard menu still works.
+					if (isSQLMigrationsGenerationDeferred(editor)) {
+						return;
+					}
+
+					// We want to avoid opening a dialog for this entity, if it extends another entity which already has an open dialog
+					if (
+						updatedEntity.extends &&
+						updatedEntity.extends.type === EntityType.DefinitionEntity
+					) {
+						const allExtendedEntities: DefinitionEntityState[] = [
+							updatedEntity.extends,
+						];
+
+						// const activeDialogs = editor.callbacks
+						// 	.getQueuedDynamicDialogs()
+
+						const activeDialogs = Array.from(requestedDialogsSet);
+
+						const otherActiveDialogs = activeDialogs.filter(
+							(d) => d !== dialogId,
+						);
+
+						let currentBaseEntity = updatedEntity.extends;
+
+						while (currentBaseEntity) {
+							if (
+								currentBaseEntity.extends &&
+								currentBaseEntity.extends.type === EntityType.DefinitionEntity
+							) {
+								currentBaseEntity = currentBaseEntity.extends;
+								allExtendedEntities.push(currentBaseEntity);
+							}
+
+							break;
+						}
+
+						for (const d of otherActiveDialogs) {
+							const entityIdFromDialog = getEntityIdFromDialogId(d);
+
+							if (entityIdFromDialog) {
+								const foundMatch = allExtendedEntities.find(
+									(ent) => ent.id === entityIdFromDialog,
+								);
+								if (foundMatch) {
+									return;
+								}
+							}
+						}
+					}
+
+					requestedDialogsSet.add(dialogId);
+
+					return new Promise<void>((_resolve) => {
+						const resolve = () => {
+							_resolve();
+							requestedDialogsSet.delete(dialogId);
+						};
+
+						editor.callbacks.requestSmallDynamicDialog(
+							async (handlers: {
+								close: (event: any) => Promise<void> | void;
+							}) => {
+								return {
+									id: dialogId,
+									component: (
+										<div
+											style={{
+												display: 'flex',
+												flexDirection: 'column',
+												height: '100%',
+												justifyContent: 'space-between',
+											}}
+										>
+											{/* TOP: header + body */}
+											<div style={{ display: 'flex', flexDirection: 'column' }}>
+												{/* Header row (kept as-is) */}
+												<div
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														marginBottom: 12,
+														gap: 16,
+													}}
+												>
+													{/* <button
+														className='dialog_back_button'
+														onClick={(e) => {
+															// const {
+															// 	rowTransformer,
+															// } =
+															// 	createOrUpdateRowTransformer(
+															// 		editor.logic,
+															// 		diffs,
+															// 		changeSet
+															// 	);
+
+															// const objectId =
+															// 	getCanvasEntityDraggableContainerDOMId(
+															// 		rowTransformer
+															// 	);
+															// editor.canvas.scrollToObjectById(
+															// 	objectId
+															// );
+
+															handlers.close(e);
+															resolve();
+														}}
+													>
+														<i className='fa-solid fa-arrow-left' />
+													</button> */}
+													<h2 style={{ margin: 0, fontWeight: 500 }}>
+														Live database transformation required
+													</h2>
+												</div>
+
+												{/* Explanatory copy */}
+												<div
+													style={{
+														display: 'flex',
+														flexDirection: 'column',
+														gap: 8,
+														marginBottom: 16,
+													}}
+												>
+													<p style={{ margin: 0, color: 'rgba(0,0,0,0.54)' }}>
+														The latest changes to{' '}
+														<strong>{updatedEntity.name}</strong> require custom
+														logic to transform existing rows in the live
+														database.
+													</p>
+
+													{!!newestOpenRowTransformer ? (
+														<p style={{ margin: 0, color: 'rgba(0,0,0,0.54)' }}>
+															You can append the new logic to the most recent
+															open row transformer, or create a new one that
+															will run after it on publish.
+														</p>
+													) : (
+														<p style={{ margin: 0, color: 'rgba(0,0,0,0.54)' }}>
+															A new row transformer is needed to modify each row
+															into the new shape of the data structure when
+															publishing.
+														</p>
+													)}
+
+													<div
+														style={{
+															display: 'flex',
+															alignItems: 'center',
+															gap: 8,
+															marginTop: 18,
+															color: 'rgba(0,0,0,0.54)',
+														}}
+													>
+														<i className='fa-regular fa-circle-info' />
+														<span
+															style={{
+																fontSize: 12,
+															}}
+														>
+															Items in{' '}
+															<span style={{ color: '#ED6C02' /* amber */ }}>
+																amber
+															</span>{' '}
+															usually require transformation logic.
+														</span>
+													</div>
+												</div>
+
+												{/* ===== CHANGES SECTION ===== */}
+												<div
+													style={{
+														display: 'flex',
+														flexDirection: 'column',
+														gap: 10,
+														marginBottom: 16,
+													}}
+												>
+													{/* New required */}
+													{newRequiredProperties.length > 0 && (
+														<Section
+															title='New required properties'
+															subtitle='These will block rows unless you populate a value'
+															count={newRequiredProperties.length}
+															icon={
+																<i className='fa-regular fa-triangle-exclamation' />
+															}
+															iconColor={'#ED6C02' /* amber */}
+														>
+															{newRequiredProperties.map((prop) => (
+																<Row
+																	key={prop.id + '-new-required'}
+																	icon={
+																		<i className='fa-regular fa-circle-plus' />
+																	}
+																	color={'#ED6C02'}
+																>
+																	<span>
+																		Required property{' '}
+																		<strong>{prop.name}</strong> added
+																	</span>
+																</Row>
+															))}
+														</Section>
+													)}
+
+													{/* New optional */}
+													{newNonRequiredProperties.length > 0 && (
+														<Section
+															title='New optional properties'
+															subtitle='Will backfill with defaults if provided'
+															count={newNonRequiredProperties.length}
+															icon={<i className='fa-regular fa-circle-plus' />}
+															iconColor={'#2e7d32'}
+														>
+															{newNonRequiredProperties.map((prop) => (
+																<Row
+																	key={prop.id + '-new-non-required'}
+																	icon={
+																		<i className='fa-regular fa-circle-plus' />
+																	}
+																	color={'#2e7d32'}
+																>
+																	<span>
+																		Property <strong>{prop.name}</strong> added
+																	</span>
+																</Row>
+															))}
+														</Section>
+													)}
+
+													{/* Deleted */}
+													{deletedProperties.length > 0 && (
+														<Section
+															title='Deleted properties'
+															subtitle='Values will be dropped from existing rows'
+															count={deletedProperties.length}
+															icon={
+																<i className='fa-regular fa-circle-minus' />
+															}
+															iconColor={'#d32f2f'}
+														>
+															{deletedProperties.map((prop) => (
+																<Row
+																	key={prop.id + '-deleted'}
+																	icon={
+																		<i className='fa-regular fa-circle-minus' />
+																	}
+																	color={'#d32f2f'}
+																>
+																	<span>
+																		Property <strong>{prop.name}</strong>{' '}
+																		deleted
+																	</span>
+																</Row>
+															))}
+														</Section>
+													)}
+
+													{/* Modified */}
+													{Array.from(propChanges.keys()).length > 0 && (
+														<Section
+															title='Modified properties'
+															subtitle='Inspect name, required flag, and data type changes'
+															count={Array.from(propChanges.keys()).length}
+															icon={
+																<i className='fa-regular fa-pen-to-square' />
+															}
+														>
+															<div
+																style={{
+																	display: 'flex',
+																	flexDirection: 'column',
+																	gap: 8,
+																}}
+															>
+																{Array.from(propChanges.entries()).map(
+																	([propId, changes]) => (
+																		<PropChangeCard
+																			key={propId + '-changes'}
+																			propId={propId}
+																			changes={changes}
+																			editor={editor}
+																		/>
+																	),
+																)}
+															</div>
+														</Section>
+													)}
+												</div>
+											</div>
+
+											<div
+												style={{
+													marginTop: 16,
+													display: 'flex',
+													justifyContent: 'center',
+													flexDirection: 'column',
+													gap: 10,
+													alignItems: 'center',
+												}}
+											>
+												<p
+													style={{
+														margin: 0,
+														fontSize: 10,
+														color: 'rgba(0,0,0,0.54)',
+														textAlign: 'center',
+													}}
+												>
+													All transformers are executed in order when the
+													project is published again.
+													<br />
+													Test databases might be reset or lose some entries
+													from this change.
+												</p>
+												{diffs.extendedEntities.length > 0 && (
+													<>
+														<p
+															style={{
+																margin: 0,
+																fontSize: 10,
+																color: 'rgba(0,0,0,0.8)',
+																textAlign: 'center',
+																fontStyle: 'italic',
+																fontWeight: '600',
+															}}
+														>
+															NOTE:
+														</p>
+														<div
+															style={{
+																display: 'flex',
+																justifyContent: 'center',
+																flexDirection: 'column',
+																gap: 2,
+																alignItems: 'center',
+															}}
+														>
+															<p
+																style={{
+																	margin: 0,
+																	fontSize: 10,
+																	color: 'rgba(0,0,0,0.54)',
+																	textAlign: 'center',
+																}}
+															>
+																Extension nodes will each get their respective
+																row transformers too:
+															</p>
+															<p
+																style={{
+																	margin: 0,
+																	fontSize: 10,
+																	color: 'rgba(0,0,0,0.8)',
+																	textAlign: 'center',
+																	fontWeight: '600',
+																}}
+															>
+																{diffs.extendedEntities
+																	.map((ent) => ent.updatedEntityVersion.name)
+																	.join(', ')}
+															</p>
+														</div>
+													</>
+												)}
+												{(newRowTransformerNeeded ||
+													isPreexistingRowTransformerUpToDate !== true) && (
+													<div
+														style={{
+															display: 'flex',
+															flexDirection: 'column',
+															alignItems: 'stretch',
+															gap: 8,
+															width: '100%',
+														}}
+													>
+														<Button
+															size='medium'
+															variant={
+																!!newestOpenRowTransformer
+																	? 'outlined'
+																	: 'contained'
+															}
+															onClick={(e: any) => {
+																const { rowTransformer } =
+																	createOrUpdateRowTransformer(
+																		editor.logic,
+																		diffs,
+																		changeSet,
+																	);
+
+																diffs.extendedEntities.forEach((extDiffs, i) => {
+																	createOrUpdateRowTransformer(
+																		editor.logic,
+																		extDiffs,
+																		changeSet,
+																		{ x: (i + 1) * 600, y: 800 },
+																	);
+																});
+
+																// User just engaged with row transformers
+																// manually → reset deferral so the next round
+																// of changes prompts again.
+																setSQLMigrationsGenerationDeferred(
+																	editor,
+																	false,
+																);
+
+																const objectId =
+																	getCanvasEntityDraggableContainerDOMId(
+																		rowTransformer,
+																	);
+																editor.canvas.scrollToObjectById(objectId);
+
+																handlers.close(e);
+																resolve();
+															}}
+														>
+															{!!newestOpenRowTransformer
+																? 'Add to existing'
+																: 'Add new row transformer'}
+														</Button>
+														<Button
+															size='medium'
+															variant='text'
+															onClick={(e: any) => {
+																// Remember the user's choice to defer migration
+																// authoring. The dialog stays silent until they
+																// manually create or update a transformer (here
+																// or via the DefinitionEntityCard menu).
+																setSQLMigrationsGenerationDeferred(editor, true);
+																handlers.close(e);
+																resolve();
+															}}
+														>
+															Add later
+														</Button>
+														<span
+															style={{
+																fontSize: 11,
+																color: 'rgba(0,0,0,0.54)',
+																textAlign: 'center',
+																marginTop: -4,
+															}}
+														>
+															You'll be asked again before publication
+														</span>
+													</div>
+												)}
+											</div>
+										</div>
+									),
+									props: {
+										onMount: (_htmlElement: HTMLElement) => {},
+										onUpdate: (_htmlElement: HTMLElement) => {},
+										onBeforeUpdate: () => {},
+										onUnmount: () => {},
+										onClose: (_event: any) => {
+											Logger.log('Before closing dialog');
+
+											const { rowTransformer } = createOrUpdateRowTransformer(
+												editor.logic,
+												diffs,
+												changeSet,
+											);
+
+											// Dismissing the dialog auto-creates/updates the
+											// transformer; treat that as the user engaging with
+											// migrations and clear any prior deferral.
+											setSQLMigrationsGenerationDeferred(editor, false);
+
+											const objectId =
+												getCanvasEntityDraggableContainerDOMId(rowTransformer);
+											editor.canvas.scrollToObjectById(objectId);
+
+											resolve();
+										},
+										style: {
+											minWidth: '480px',
+											// Max width, calculate full width minus 64px (32px margin on each side)
+											maxWidth: 'calc(100vw - 64px)',
+										},
+									},
+								};
+							},
+						);
+					});
+				},
+			);
+		},
+	};
+}