@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/explorer/matchTarget.js

@@ -0,0 +1,51 @@
+import { textInRange } from "../../utils/validation.js";
+import { showErdTargetAction$ } from "../erd/goToErdTarget.js";
+import { FindField, isTableLogicalName } from "../../utils/find-replace/findMatches.js";
+import { toErdTarget } from "../erd/erdTarget.js";
+//#region src/components/explorer/matchTarget.ts
+var TEXT_WIDTH = {
+	[FindField.tableName]: ["name", "widthName"],
+	[FindField.columnName]: ["name", "widthName"],
+	[FindField.tableComment]: ["comment", "widthComment"],
+	[FindField.columnComment]: ["comment", "widthComment"],
+	[FindField.logicalName]: ["logicalName", "widthLogicalName"]
+};
+function withReplacement(state, { toWidth }, match, value) {
+	const { field, id, tableId } = match;
+	const { collections } = state;
+	const { tableEntities, tableColumnEntities } = collections;
+	const table = tableEntities[tableId];
+	const column = tableColumnEntities[id];
+	const onTable = field === FindField.tableName || field === FindField.tableComment || isTableLogicalName(match);
+	const fieldWidth = TEXT_WIDTH[field];
+	if (!fieldWidth || !table || !onTable && !column) return state;
+	const [text, width] = fieldWidth;
+	const edit = (entity) => ({
+		...entity,
+		[text]: value,
+		ui: {
+			...entity.ui,
+			[width]: textInRange(toWidth(value))
+		}
+	});
+	return {
+		...state,
+		collections: {
+			...collections,
+			tableEntities: {
+				...tableEntities,
+				[tableId]: onTable ? edit(table) : { ...table }
+			},
+			tableColumnEntities: onTable ? tableColumnEntities : {
+				...tableColumnEntities,
+				[id]: edit(column)
+			}
+		}
+	};
+}
+var showNextMatchAction$ = (next, replaced, value) => function* (state, ctx) {
+	const measured = next.tableId === replaced.tableId ? withReplacement(state, ctx, replaced, value) : state;
+	yield* showErdTargetAction$(toErdTarget(next))(measured, ctx);
+};
+//#endregion
+export { showNextMatchAction$, withReplacement };

package/dist/components/export-image/ExportImage.js

@@ -0,0 +1,230 @@
+import { KeyBindingName, toShortcutTitle } from "../../utils/keyboard-shortcut/index.js";
+import { toJson } from "../../erd-editor-schema/dist/parser.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { Open } from "../../constants/open.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { useAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { useThemeContext } from "../themeContext.js";
+import { getExportSize } from "../../services/export-png/exportBox.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { createDocumentPreview } from "../../services/export-png/index.js";
+import { button, size2, soft, solid } from "../primitives/button/Button.styles.js";
+import { editorWidthOf } from "../erd-editor/viewportLayout.js";
+import Switch from "../primitives/switch/Switch.js";
+import Dialog from "../primitives/dialog/Dialog.js";
+import { createExportTheme } from "../../services/export-png/exportTheme.js";
+import { action, actions, close, header, image, layout, loading, panel, preview, row, scale, scales, size, title, warning } from "./ExportImage.styles.js";
+import { copyImagePng, describeAskedSize, exportImagePng, exportImageSvg } from "./exportImageActions.js";
+import { filter } from "rxjs";
+//#region src/components/export-image/ExportImage.tsx
+var EXPORT_SCALES = [
+	1,
+	2,
+	3
+];
+var PREVIEW_MAX_SIDE = 1280;
+var DIALOG_MAX_WIDTH = 1024;
+var toExportJson = (state) => toJson({
+	...state,
+	doc: {
+		...state.doc,
+		wordIds: [],
+		termIds: []
+	},
+	collections: {
+		...state.collections,
+		wordEntities: {},
+		termEntities: {}
+	}
+});
+var ExportImage = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const options = observable({
+		background: true,
+		darkMode: false,
+		scale: 2
+	});
+	let seeded = false;
+	const view = observable({
+		preview: "",
+		loading: false,
+		documentWidth: 0,
+		documentHeight: 0,
+		measured: false
+	});
+	let session = null;
+	const isOpen = () => Boolean(app.value.store.state.editor.openMap[Open.exportImage]);
+	const previewKey = () => `${options.background}:${options.darkMode}`;
+	const createTheme = (current) => createExportTheme({
+		sceneTheme: current.sceneTheme,
+		themeOptions: current.themeOptions,
+		isDarkMode: current.isDarkMode,
+		darkMode: options.darkMode,
+		background: options.background
+	});
+	const drawPreview = async (current, request) => {
+		const key = previewKey();
+		try {
+			const preview = await createDocumentPreview({
+				doc: current.doc,
+				theme: createTheme(current),
+				toWidth: app.value.toWidth,
+				maxSide: PREVIEW_MAX_SIDE,
+				i18n: current.i18n,
+				nameViewMode: current.nameViewMode
+			});
+			if (session !== current) return;
+			let url = current.previews.get(key);
+			if (!url) {
+				url = URL.createObjectURL(preview.blob);
+				current.previews.set(key, url);
+			}
+			if (!view.measured) {
+				view.documentWidth = preview.documentWidth;
+				view.documentHeight = preview.documentHeight;
+				view.measured = true;
+			}
+			if (request !== current.request) return;
+			view.preview = url;
+			view.loading = false;
+		} catch (error) {
+			if (session !== current || request !== current.request) return;
+			console.error("[export-png] the preview could not be drawn", error);
+			view.preview = "";
+			view.loading = false;
+		}
+	};
+	const showCached = (current) => {
+		const cached = current.previews.get(previewKey());
+		if (!cached) return false;
+		view.preview = cached;
+		view.loading = false;
+		return true;
+	};
+	const showPreview = (delay) => {
+		const current = session;
+		if (!current) return;
+		clearTimeout(current.timer);
+		const request = ++current.request;
+		if (showCached(current)) return;
+		view.loading = true;
+		if (delay > 0) current.timer = setTimeout(() => showCached(current) || drawPreview(current, request), delay);
+		else drawPreview(current, request);
+	};
+	const release = () => {
+		if (!session) return;
+		clearTimeout(session.timer);
+		session.previews.forEach((url) => URL.revokeObjectURL(url));
+		session = null;
+		view.preview = "";
+		view.loading = false;
+	};
+	const open = () => {
+		const { store } = app.value;
+		if (isOpen()) return;
+		if (!seeded) {
+			options.darkMode = props.isDarkMode;
+			seeded = true;
+		}
+		const { settings } = store.state;
+		release();
+		session = {
+			doc: toExportJson(store.state),
+			databaseName: settings.databaseName,
+			sceneTheme: { ...themeRef.value },
+			themeOptions: { ...props.themeOptions },
+			isDarkMode: props.isDarkMode,
+			i18n: {
+				locale: i18n.value.locale,
+				messages: i18n.value.messages
+			},
+			nameViewMode: settings.nameViewMode,
+			previews: /* @__PURE__ */ new Map(),
+			request: 0,
+			timer: void 0
+		};
+		view.measured = false;
+		store.dispatch(changeOpenMapAction({ [Open.exportImage]: true }));
+		showPreview(0);
+	};
+	const close$1 = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.exportImage]: false }));
+	};
+	const imageRequest = (current) => ({
+		doc: current.doc,
+		theme: createTheme(current),
+		toWidth: app.value.toWidth,
+		pixelRatio: options.scale,
+		i18n: current.i18n,
+		nameViewMode: current.nameViewMode
+	});
+	const handleBackground = (value) => {
+		options.background = value;
+		showPreview(200);
+	};
+	const handleDarkMode = (value) => {
+		options.darkMode = value;
+		showPreview(200);
+	};
+	const handleScale = (scale) => {
+		options.scale = scale;
+	};
+	const handleExportPng = () => {
+		if (!session) return;
+		exportImagePng(app.value, imageRequest(session), session.databaseName);
+	};
+	const handleExportSvg = () => {
+		if (!session) return;
+		exportImageSvg(app.value, imageRequest(session), session.databaseName);
+	};
+	const handleCopy = () => {
+		if (!session) return;
+		copyImagePng(app.value, imageRequest(session));
+	};
+	onMounted(() => {
+		const { store, emitter, shortcut$ } = app.value;
+		addUnsubscribe(emitter.on({ openExportImage: open }), shortcut$.pipe(filter(({ type }) => type === KeyBindingName.stop)).subscribe(() => isOpen() && close$1()), watch(store.state.editor.openMap).subscribe((name) => {
+			name === Open.exportImage && !isOpen() && release();
+		}), release);
+	});
+	return () => {
+		if (!isOpen()) return null;
+		const { store, keyBindingMap } = app.value;
+		const { t } = i18n.value;
+		const stacked = editorWidthOf(store) < 640;
+		const size$1 = view.measured ? getExportSize({
+			width: view.documentWidth,
+			height: view.documentHeight
+		}, options.scale) : null;
+		return html`<${Dialog} .label=${t("exportImage.title")} .maxWidth=${DIALOG_MAX_WIDTH} .onClose=${close$1} .children=${html`<div class=${[
+			"export-image",
+			layout,
+			{ stacked }
+		]}><div class=${header}><h2 class=${title}>${t("exportImage.title")}</h2><button class=${["export-image-close", close]} type="button" aria-label=${t("common.close")} title=${toShortcutTitle(keyBindingMap, t("common.close"), KeyBindingName.stop)} @click=${close$1}><${Icon} .name="x" .size=${14} /></button></div><div class=${["export-image-preview", preview]} aria-busy=${view.loading ? "true" : "false"}>${view.preview ? html`<img class=${image} src=${view.preview} alt=${t("exportImage.preview")} />` : null}${view.loading ? html`<div class=${loading} role="status" aria-label=${t("exportImage.loadingPreview")} />` : null}</div><div class=${panel}><label class=${row}><span>${t("exportImage.background")}</span><${Switch} .size="1" .value=${options.background} .onChange=${handleBackground} /></label><label class=${row}><span>${t("exportImage.darkMode")}</span><${Switch} .size="1" .value=${options.darkMode} .onChange=${handleDarkMode} /></label><div class=${row}><span>${t("exportImage.scale")}</span><div class=${scales} role="group" aria-label=${t("exportImage.scale")}>${EXPORT_SCALES.map((scale$1) => html`<button class=${scale} type="button" aria-pressed=${scale$1 === options.scale ? "true" : "false"} @click=${() => handleScale(scale$1)}>${`${scale$1}x`}</button>`)}</div></div><div class=${["export-image-size", size]}>${size$1 ? `PNG ${size$1.width} × ${size$1.height} px` : ""}</div>${size$1?.reduced ? html`<div class=${["export-image-reduced", warning]}>${describeAskedSize(size$1)}</div>` : null}<div class=${actions}><button class=${[
+			button,
+			solid,
+			size2,
+			action
+		]} type="button" data-autofocus="true" @click=${handleExportPng}><${Icon} .name="download" .size=${14} />PNG</button><button class=${[
+			button,
+			soft,
+			size2,
+			action
+		]} type="button" @click=${handleExportSvg}><${Icon} .name="download" .size=${14} />SVG</button><button class=${[
+			button,
+			soft,
+			size2,
+			action
+		]} type="button" @click=${handleCopy}><${Icon} .name="copy" .size=${14} />${t("exportImage.copyToClipboard")}</button></div></div></div>`} />`;
+	};
+};
+//#endregion
+export { EXPORT_SCALES, PREVIEW_MAX_SIDE, ExportImage as default, toExportJson };

package/dist/components/export-image/ExportImage.styles.js

@@ -0,0 +1,172 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { fontSize4, typography } from "../../styles/typography.styles.js";
+//#region src/components/export-image/ExportImage.styles.ts
+var layout = css`
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: minmax(0, 1fr) 328px;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'preview header'
+    'preview panel';
+  column-gap: 24px;
+  row-gap: 20px;
+  padding: 24px;
+
+  &.stacked {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      'header'
+      'preview'
+      'panel';
+    row-gap: 16px;
+  }
+
+  & button:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 2px;
+  }
+`;
+var preview = css`
+  grid-area: preview;
+  position: relative;
+  min-width: 0;
+  min-height: 400px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--gray-color-2);
+  background-image: conic-gradient(
+    var(--gray-color-4) 25%,
+    transparent 0 50%,
+    var(--gray-color-4) 0 75%,
+    transparent 0
+  );
+  background-size: 16px 16px;
+
+  .stacked > & {
+    min-height: 0;
+    height: 240px;
+  }
+`;
+var image = css`
+  position: absolute;
+  inset: 16px;
+  width: calc(100% - 32px);
+  height: calc(100% - 32px);
+  object-fit: contain;
+`;
+var loading = css`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  border: 2px solid var(--gray-color-6);
+  border-top-color: var(--accent-color-9);
+  border-radius: 50%;
+  animation: exportImageLoading 0.8s linear infinite;
+
+  @keyframes exportImageLoading {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var panel = css`
+  grid-area: panel;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: var(--foreground);
+  ${typography.normal};
+`;
+var header = css`
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+var title = css`
+  margin: 0;
+  color: var(--active);
+  font-weight: var(--font-weight-medium);
+  ${fontSize4};
+`;
+var close = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+  scroll-margin: 6px;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+`;
+var row = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 32px;
+`;
+var scales = css`
+  display: inline-flex;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  overflow: hidden;
+`;
+var scale = css`
+  min-width: 44px;
+  height: 30px;
+  padding: 0 10px;
+  color: var(--foreground);
+  cursor: pointer;
+  ${typography.paragraph};
+
+  & + & {
+    border-inline-start: 1px solid var(--context-menu-border);
+  }
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &[aria-pressed='true'] {
+    color: var(--accent-color-11);
+    background-color: var(--accent-color-3);
+  }
+`;
+var size = css`
+  min-height: 20px;
+  color: var(--active);
+  font-variant-numeric: tabular-nums;
+`;
+var warning = css`
+  margin-top: -8px;
+  color: var(--placeholder);
+  ${typography.paragraph};
+`;
+var actions = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 8px;
+`;
+var action = css`
+  gap: 6px;
+`;
+//#endregion
+export { action, actions, close, header, image, layout, loading, panel, preview, row, scale, scales, size, title, warning };

package/dist/components/export-image/exportImageActions.js

@@ -0,0 +1,102 @@
+import { html } from "../../r-html/dist/render/index.js";
+import { localized } from "../localized/Localized.js";
+import Toast from "../primitives/toast/Toast.js";
+import { openStatusToast } from "../toast-container/openStatusToast.js";
+import { createDocumentPng } from "../../services/export-png/index.js";
+import { exportPNG, exportSVG } from "../../utils/file/exportFile.js";
+import { copyImageToClipboard } from "../../utils/clipboard.js";
+import { openToastWhileRunning } from "../toast-container/openToastWhileRunning.js";
+//#region src/components/export-image/exportImageActions.ts
+function describeAskedSize({ askedWidth, askedHeight }) {
+	return localized("exportImage.reducedFrom", {
+		askedWidth,
+		askedHeight
+	});
+}
+function describeReduction({ askedWidth, askedHeight, width, height }) {
+	return localized("exportImage.reducedFromTo", {
+		askedWidth,
+		askedHeight,
+		width,
+		height
+	});
+}
+async function settleUnderBusyToast(emitter, work, title) {
+	const outcome = work.then(() => null, (error) => ({ error }));
+	await openToastWhileRunning(emitter, outcome, html`<${Toast} busy=${true} title=${title} />`);
+	return outcome;
+}
+async function writeImageFile(emitter, format, writing) {
+	const failure = await settleUnderBusyToast(emitter, writing, localized("exportImage.exporting", { format }));
+	if (!failure) return true;
+	console.error(`[export-${format.toLowerCase()}] the document could not be exported`, failure.error);
+	openStatusToast(emitter, {
+		key: `exportImage.exportFailed:${format}`,
+		tone: "error",
+		title: localized("exportImage.exportFailed", { format }),
+		description: localized("exportImage.seeConsole")
+	});
+	return false;
+}
+async function exportImagePng({ emitter }, request, databaseName) {
+	let reduction = null;
+	if (await writeImageFile(emitter, "PNG", exportPNG({
+		...request,
+		onResolutionReduced: (value) => {
+			reduction = value;
+		}
+	}, databaseName)) && reduction) openStatusToast(emitter, {
+		key: "exportImage.exportedReduced",
+		tone: "success",
+		title: localized("exportImage.exportedReduced"),
+		description: describeReduction(reduction)
+	});
+}
+async function exportImageSvg({ emitter }, { doc, theme, toWidth, i18n, nameViewMode }, databaseName) {
+	await writeImageFile(emitter, "SVG", exportSVG({
+		doc,
+		theme,
+		toWidth,
+		i18n,
+		nameViewMode
+	}, databaseName));
+}
+async function copyImagePng({ emitter }, request) {
+	let reduction = null;
+	let renderError = null;
+	const failure = await settleUnderBusyToast(emitter, copyImageToClipboard(() => createDocumentPng({
+		...request,
+		onResolutionReduced: (value) => {
+			reduction = value;
+		}
+	}).catch((error) => {
+		renderError = error;
+		throw error;
+	})), localized("exportImage.copying"));
+	if (failure) {
+		console.error("[export-png] the image could not be copied", renderError ?? failure.error);
+		openStatusToast(emitter, {
+			key: "exportImage.copyFailed",
+			tone: "error",
+			title: localized("exportImage.copyFailed"),
+			description: localized("exportImage.saveAsPng")
+		});
+		return;
+	}
+	if (reduction) {
+		openStatusToast(emitter, {
+			key: "exportImage.copiedReduced",
+			tone: "success",
+			title: localized("exportImage.copiedReduced"),
+			description: describeReduction(reduction)
+		});
+		return;
+	}
+	openStatusToast(emitter, {
+		key: "exportImage.copied",
+		tone: "success",
+		title: localized("exportImage.copied")
+	});
+}
+//#endregion
+export { copyImagePng, describeAskedSize, describeReduction, exportImagePng, exportImageSvg };

package/dist/components/flowCenters.js

@@ -0,0 +1,29 @@
+import { CenterStep, ViewKind } from "../engine/modules/editor/state.js";
+import { toSteppedCenters } from "../engine/modules/editor/view.js";
+import { viewSetCentersAction, viewStepCentersAction } from "../engine/modules/editor/view.actions.js";
+//#region src/components/flowCenters.ts
+function focusFlowView(app, tableIds) {
+	app.store.dispatchSync(viewSetCentersAction({
+		tableIds,
+		kind: ViewKind.flow
+	}));
+}
+function showAllFlowView(app) {
+	focusFlowView(app, []);
+}
+function stepFlowView(app, step) {
+	if (!canStepFlowView(app, step)) return;
+	app.store.dispatchSync(viewStepCentersAction({
+		step,
+		kind: ViewKind.flow
+	}));
+}
+function canStepFlowView(app, step) {
+	const { state } = app.store;
+	const view = state.editor.views.flow;
+	if (!view) return false;
+	const tableIds = new Set(state.doc.tableIds);
+	return (step === CenterStep.previous ? view.previousCenterIds : view.nextCenterIds).some((ids) => toSteppedCenters(tableIds, view, ids) !== null);
+}
+//#endregion
+export { canStepFlowView, focusFlowView, showAllFlowView, stepFlowView };

package/dist/components/generator-code/GeneratorCode.d.ts

@@ -3,6 +3,7 @@ export type GeneratorCodeProps = {
     isDarkMode: boolean;
     /** One table's code, as Table Properties shows it, with no panel. */
     tableId?: string;
+    readonly?: boolean;
 };
 declare const GeneratorCode: FC<GeneratorCodeProps>;
 export default GeneratorCode;

package/dist/components/generator-code/GeneratorCode.js

@@ -0,0 +1,96 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { onBeforeMount } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { useAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { reportCopy } from "../toast-container/openStatusToast.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { exportCode } from "../../utils/file/exportFile.js";
+import { useContextMenuRootProvider } from "../primitives/context-menu/context-menu-root/contextMenuRootContext.js";
+import { resolvePanel } from "../schema-sql/schemaSQLView.js";
+import { generatorCodeViewOf } from "./generatorCodeView.js";
+import { codeFileExtension } from "./languageSettings.js";
+import GeneratorCodeContextMenu from "./generator-code-context-menu/GeneratorCodeContextMenu.js";
+import { icon } from "../schema-sql/schema-sql-options/SchemaSQLOptions.styles.js";
+import { keepSpace } from "../schema-sql/schema-sql-options/SchemaSQLOptions.js";
+import GeneratorCodeOptions from "./generator-code-options/GeneratorCodeOptions.js";
+import CodeBlock from "../primitives/code-block/CodeBlock.js";
+import { code, root, show } from "../schema-sql/SchemaSQL.styles.js";
+import { LanguageToLangMap } from "../../constants/language.js";
+import { copyToClipboard } from "../../utils/clipboard.js";
+import { createGeneratorCode, createGeneratorCodeTable } from "../../utils/generator-code/index.js";
+//#region src/components/generator-code/GeneratorCode.tsx
+var hasPropName = arrayHas([
+	"language",
+	"database",
+	"tableNameCase",
+	"columnNameCase",
+	"bracketType"
+]);
+var GeneratorCode = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const contextMenu = useContextMenuRootProvider(ctx);
+	const root$1 = createRef();
+	const showButton = createRef();
+	const state = observable({ code: "" });
+	const setCode = () => {
+		const { store } = app.value;
+		if (props.tableId) {
+			const { collections } = store.state;
+			const table = query(collections).collection("tableEntities").selectById(props.tableId);
+			if (table) state.code = createGeneratorCodeTable(store.state, table);
+		} else state.code = createGeneratorCode(store.state);
+	};
+	const handleCopy = () => {
+		reportCopy(app.value.emitter, copyToClipboard(state.code));
+	};
+	const handleSave = () => {
+		const { settings } = app.value.store.state;
+		exportCode(state.code, codeFileExtension(settings.language), settings.databaseName);
+	};
+	const handleHide = () => {
+		generatorCodeViewOf(app.value).panel = "closed";
+		nextTick(() => nextTick(() => showButton.value?.focus()));
+	};
+	const handleShow = () => {
+		generatorCodeViewOf(app.value).panel = "open";
+		nextTick(() => {
+			root$1.value?.querySelector(".generator-code-options-hide")?.focus();
+		});
+	};
+	const handleContextmenuClose = () => {
+		contextMenu.state.show = false;
+	};
+	onBeforeMount(() => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		setCode();
+		addUnsubscribe(watch(settings).subscribe((propName) => {
+			hasPropName(propName) && setCode();
+		}), watch(props).subscribe((propName) => {
+			propName === "tableId" && setCode();
+		}));
+	});
+	return () => {
+		const { store } = app.value;
+		const { t, dir } = i18n.value;
+		const lang = LanguageToLangMap[store.state.settings.language];
+		const full = !props.tableId;
+		const view = generatorCodeViewOf(app.value);
+		const panel = !full ? "unknown" : view.panel === "unset" ? resolvePanel(view, store.state.editor.viewport.width) : view.panel;
+		return html`<div ${ref(root$1)} class=${root} .dir="ltr" @mousedown=${contextMenu.onMousedown}><div class=${code} @contextmenu=${contextMenu.onContextmenu}><${CodeBlock} .lang=${lang} .theme=${props.isDarkMode ? "dark" : "light"} .value=${state.code} .onCopy=${handleCopy} .tools=${panel === "closed" ? html`<button ${ref(showButton)} type="button" class=${[
+			"generator-code-options-show",
+			icon,
+			show
+		]} aria-label=${t("code.showOptions")} title=${t("code.showOptions")} aria-expanded="false" @click=${handleShow} @keydown=${keepSpace}><${Icon} .name="panel-right-open" .size=${16} /></button>` : null} /></div>${panel === "open" ? html`<${GeneratorCodeOptions} .isDarkMode=${props.isDarkMode} .readonly=${Boolean(props.readonly)} .onHide=${handleHide} .onSave=${handleSave} .onCopy=${handleCopy} />` : null}</div>${contextMenu.state.show ? html`<div .dir=${dir}><${GeneratorCodeContextMenu} .full=${full} .onSave=${handleSave} .onClose=${handleContextmenuClose} /></div>` : null}`;
+	};
+};
+//#endregion
+export { GeneratorCode as default };