@emailmaker/extensions-app 1.0.111-dev.6 → 1.0.111-dev.8

package/README.md

@@ -192,8 +192,8 @@ module.exports = {
 
 Нужна только для продвинутой интеграции или собственного бандлерного пайплайна. Основной сценарий для внешнего плагина — отдельный пакет с `PluginDev`.
 
-- `resolve.alias`: `react` → `@emailmaker/emailmaker/runtime/react` (и т.д.) для `esm` / dev; локальные shared internals идут через compat facades runtime
-- `externals`: `@emailmaker/emailmaker/runtime/core`, runtime npm-модули и `@emailmaker/ui-kit`
+- `resolve.alias`: `react` → `@emailmaker/emailmaker/runtime/react` (и т.д.) для `esm` / dev; локальные shared internals идут через compat facades runtime; UI-kit (`@emailmaker/ui-kit`) → **`@emailmaker/emailmaker/ui-kit`** (singleton bytes на main, не `runtime/@scope/ui-kit`)
+- `externals`: `@emailmaker/emailmaker/runtime/core`, runtime npm-модули; ui-kit external → **`@emailmaker/emailmaker/ui-kit`** (глобальный ключ `UiKit` в `runtimeExports`, см. манифест)
 - Список модулей: `@emailmaker/emailmaker/runtime/plugin-dev-manifest.json` → `runtimeModules`
 
 Если release bundle неожиданно стал толстым или target `встраиваемый bundle` не загружается, начните с раздела `Troubleshooting`.
@@ -504,6 +504,21 @@ panel.showSettingsPanel({
 });
 ```
 
+#### `instanceKey` (идентификатор экземпляра панели)
+
+По умолчанию **каждый** вызов `showSettingsPanel` получает новый `instanceKey`, и хост **перемонтирует** React-компонент панели. Это нужно при переключении между несколькими экземплярами одного блока в письме (две карточки товара с одним `ComponentId`).
+
+Передайте стабильный `instanceKey` только если нужно **обновлять props без remount** и сохранять внутреннее состояние панели (скролл, фокус, черновик формы):
+
+```ts
+panel.showSettingsPanel({
+  instanceKey: blockUuid,
+  content: { type: 'SettingsPanelId', props: { blockUuid, settings } },
+});
+```
+
+Не вызывайте `closeSettingsPanel` перед `showSettingsPanel` при переключении между экземплярами — достаточно одного `showSettingsPanel` с новыми `props`.
+
 Примерная последовательность процесса взаимодействия sandbox и app:
 1. Обработчик клика в sandbox
 2. Отправка события в app через MessageService
@@ -725,6 +740,10 @@ settingsPanel.showSettingsPanel({
 
 ## 🎨 UI Kit
 
+### ColorPicker — минимальный пример
+
+Растягивается на ширину родителя (Form.Item, колонку и т.д.) — дополнительный inline-style для ширины не нужен.
+
 ```tsx
 import { EmIcons, ColorPicker } from "@emailmaker/ui-kit";
 
@@ -734,6 +753,18 @@ import { EmIcons, ColorPicker } from "@emailmaker/ui-kit";
 />
 ```
 
+### FormColorField — рекомендуется для settings panel
+
+Микролейбл + `Form.Item` + color picker — тот же паттерн, что в панелях редактора. Используйте внутри `Form` с полем `name`.
+
+```tsx
+import { Form, FormColorField } from "@emailmaker/ui-kit";
+
+<Form layout="vertical">
+  <FormColorField name="bgColor" label="Цвет фона" />
+</Form>
+```
+
 
 ---
 

package/externals.json

@@ -39,10 +39,6 @@
     "promise __emailmaker__.modules",
     "AntDesignCssinjs"
   ],
-  "@ant-design/pro-layout": [
-    "promise __emailmaker__.modules",
-    "AntDesignProLayout"
-  ],
   "classnames": [
     "promise __emailmaker__.modules",
     "Classnames"
@@ -55,6 +51,10 @@
     "promise __emailmaker__.modules",
     "Uuid"
   ],
+  "@emailmaker/ui-kit": [
+    "promise __emailmaker__.modules",
+    "UiKit"
+  ],
   "@emailmaker/emailmaker/runtime/core": [
     "promise __emailmaker__.modules",
     "Core"
@@ -78,21 +78,5 @@
   "@emailmaker/emailmaker/runtime-core": [
     "promise __emailmaker__.modules",
     "Core"
-  ],
-  "di": [
-    "promise __emailmaker__.modules",
-    "Core"
-  ],
-  "disposable": [
-    "promise __emailmaker__.modules",
-    "Core"
-  ],
-  "guid": [
-    "promise __emailmaker__.modules",
-    "Core"
-  ],
-  "errors-runtime": [
-    "promise __emailmaker__.modules",
-    "Core"
   ]
 }

package/index.js

@@ -1,23 +1,381 @@
-//#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
-	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
-		enumerable: !0
-	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-}, a = (i, a, o, s) => {
-	if (a && typeof a == "object" || typeof a == "function") for (var c = n(a), l = 0, u = c.length, d; l < u; l++) d = c[l], !r.call(i, d) && d !== o && e(i, d, {
-		get: ((e) => a[e]).bind(null, d),
-		enumerable: !(s = t(a, d)) || s.enumerable
+//#region packages/runtime-core/disposable/index.ts
+var e = class e {
+	_isDisposed = !1;
+	constructor(e = []) {
+		this._inner = e;
+	}
+	addDisposable(t) {
+		return this._inner.push(t), t instanceof e && t.addDispose(() => {
+			this.removeDisposable(t);
+		}), t;
+	}
+	addDispose(e) {
+		this.addDisposable({ dispose: e });
+	}
+	removeDisposable(e) {
+		let t = this._inner.indexOf(e);
+		t >= 0 && this._inner.splice(t, 1);
+	}
+	isDisposed() {
+		return this._isDisposed;
+	}
+	dispose() {
+		if (!this._isDisposed) {
+			this._isDisposed = !0;
+			for (let e of [...this._inner]) e.dispose();
+		}
+	}
+};
+//#endregion
+//#region packages/runtime-core/di/container.ts
+function t(e) {
+	return `service_container_${e}`;
+}
+var n = class n extends e {
+	_injectCallbacks = [];
+	_injections = Object.create(null);
+	_runCallbacks(e) {
+		this._injectCallbacks.forEach((t) => t(e));
+	}
+	constructor(e = null) {
+		super(), this._parent = e, e && this.addDisposable(e.onInject((e) => this._runCallbacks(e)));
+	}
+	onInject = (e) => (this._injectCallbacks.push(e), { dispose: () => {
+		let t = this._injectCallbacks.indexOf(e);
+		t >= 0 && this._injectCallbacks.splice(t, 1);
+	} });
+	inject(e, t) {
+		this._injections[e] = () => t, this._runCallbacks(e);
+	}
+	injectFactory(e, t, n) {
+		let r = this._injections[e], i = typeof r == "function" ? r() : r, a = this._injections[e] = () => (i = t(this, i), i);
+		n && a(), this._runCallbacks(e);
+	}
+	_find(e, t = !0) {
+		return this._injections[e] || t && this._parent?._find(e);
+	}
+	_onInject(t, n, r = new e()) {
+		return r.addDisposable(this.onInject((e) => {
+			t === e && (r.dispose(), n(this.getInstance(e)));
+		})), this._parent && r.addDisposable(this._parent._onInject(t, n, r)), this.addDisposable(r), r;
+	}
+	getInstance(e, t = !0) {
+		let n = this._find(e, t);
+		if (typeof n == "function") return n();
+	}
+	getOrCreateInstance(e, t) {
+		let n = this._find(e);
+		if (typeof n == "function") return n();
+		let r = t(this);
+		return this.inject(e, r), r;
+	}
+	getInstanceAsync(e) {
+		let t = this._find(e);
+		return typeof t == "function" ? Promise.resolve(t()) : new Promise((t) => this._onInject(e, () => t(this.getInstance(e))));
+	}
+	addService(n, r) {
+		let i = t(n);
+		this.injectFactory(i, (e, t = []) => t.indexOf(r) < 0 ? [...t, r] : t);
+		let a = new e();
+		return a.addDispose(() => {
+			this.injectFactory(i, (e, t = []) => t.filter((e) => e !== r));
+		}), a;
+	}
+	addServiceFactory(n, r, i) {
+		let a = t(n), o;
+		this.injectFactory(a, (e, t = []) => (o = r(e, o), o === void 0 ? t : t.indexOf(o) < 0 ? [...t, o] : t), i);
+		let s = new e();
+		return s.addDispose(() => {
+			this.injectFactory(a, (e, t = []) => o === void 0 ? t : t.filter((e) => e !== o));
+		}), s;
+	}
+	getServices(e) {
+		let n = t(e);
+		return [...this.getInstance(n, !1) || [], ...this._parent?.getServices(e) || []];
+	}
+	createChild() {
+		return new n(this);
+	}
+	getOrCreateIsolatedContainer(e) {
+		return this.getOrCreateInstance(e, () => {
+			let t = this._parent?.getOrCreateIsolatedContainer(e);
+			return new n(t);
+		});
+	}
+	dispose() {
+		this._injections = Object.create(null);
+	}
+};
+//#endregion
+//#region packages/runtime-core/di/namespace.ts
+function r(e) {
+	return e.startsWith("__") ? e : `__${e}__`;
+}
+function i(e) {
+	if (typeof globalThis > "u") throw Error("[di] globalThis is required for namespace container access.");
+	let t = r(e), n = globalThis;
+	return n[t] ??= {};
+}
+//#endregion
+//#region packages/runtime-core/di/ensureContainer.ts
+function a(e) {
+	return typeof e == "object" && !!e && typeof e.inject == "function" && typeof e.getInstance == "function";
+}
+function o(e) {
+	return r(e || "emailmaker");
+}
+function s(e) {
+	let t = i(o(e));
+	if (a(t.container)) return t.container;
+	let r = new n(null);
+	return t.container = r, r;
+}
+function c(e) {
+	return s(e);
+}
+//#endregion
+//#region packages/runtime-core/guid/index.ts
+function l() {
+	let e = (/* @__PURE__ */ new Date()).getTime(), t = typeof performance < "u" && performance.now && performance.now() * 1e3 || 0;
+	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(n) {
+		let r = Math.random() * 16;
+		return e > 0 ? (r = (e + r) % 16 | 0, e = Math.floor(e / 16)) : (r = (t + r) % 16 | 0, t = Math.floor(t / 16)), (n === "x" ? r : r & 3 | 8).toString(16);
 	});
-	return i;
-}, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default")), s = /* @__PURE__ */ i({});
-import * as c from "@emailmaker/emailmaker/runtime-core";
-o(s, c);
+}
+//#endregion
+//#region packages/runtime-core/di/identifier.ts
+function u(e = l()) {
+	return e;
+}
 //#endregion
-//#region packages/extensions-core/components/DomComponentRegistry.ts
-var l = class {
+//#region packages/runtime-core/di/index.ts
+function d() {
+	return "app";
+}
+function f(e) {
+	if (typeof globalThis > "u") return;
+	let t = d(), n = globalThis[e] ?? {};
+	globalThis[e] = n;
+	let r = n.__diagnostics ??= {}, i = r.diModuleEval ??= {
+		evalCount: 0,
+		records: [],
+		duplicateWarned: !1
+	};
+	if (i.records.push({
+		buildSource: t,
+		timestamp: Date.now(),
+		stack: (/* @__PURE__ */ Error()).stack
+	}), i.evalCount += 1, i.evalCount <= 1 || i.duplicateWarned) return;
+	i.duplicateWarned = !0;
+	let a = {
+		message: "[di] runtime-core/di evaluated more than once (duplicate bundle / duplicate graph)",
+		evalCount: i.evalCount,
+		buildSource: t,
+		records: i.records
+	};
+	typeof console < "u" && typeof console.warn == "function" && console.warn(a.message, a);
+}
+function p() {
+	return "__emailmaker__";
+}
+function m(e, t) {
+	if (f(t), typeof globalThis > "u") return e;
+	let n = d(), r = globalThis, i = r[t] = r[t] || {}, a = i.__diagnostics = i.__diagnostics || {}, o = a.dependencyResolver = a.dependencyResolver || {
+		entries: [],
+		warnings: []
+	}, s = {
+		container: e,
+		source: "packages/runtime-core/di/index.ts",
+		buildSource: n,
+		timestamp: Date.now(),
+		stack: (/* @__PURE__ */ Error()).stack
+	};
+	if (o.entries.push(s), o.entries.length > 1) {
+		let e = o.entries[0];
+		if (o.entries.some((t) => t.container !== e.container) && !o.duplicateWarningShown) {
+			o.duplicateWarningShown = !0;
+			let e = {
+				message: "[di] Multiple DependencyResolver instances detected on namespace",
+				namespaceKey: t,
+				buildSource: n,
+				entries: o.entries
+			};
+			o.warnings.push(e), typeof console < "u" && typeof console.warn == "function" && console.warn(e.message, e);
+		}
+	}
+	return e;
+}
+var h;
+function g() {
+	if (h) return h;
+	let e = p();
+	return h = m(s(e), e), h;
+}
+var _ = new Proxy({}, { get(e, t, n) {
+	let r = g(), i = Reflect.get(r, t, n);
+	return typeof i == "function" ? i.bind(r) : i;
+} }), v = class {
+	_plugins = /* @__PURE__ */ new Map();
+	_listeners = /* @__PURE__ */ new Map();
+	_getOrCreateEntry(e) {
+		let t = this._plugins.get(e);
+		return t || (t = { overrides: [] }, this._plugins.set(e, t)), t;
+	}
+	_applyOverrides(e, t) {
+		let n = this._plugins.get(e);
+		if (n?.overrides) for (let e of n.overrides) t = e(t) || t;
+		return t;
+	}
+	_notifyListeners(e, t) {
+		let n = this._listeners.get(e);
+		if (!n || n.length === 0) return;
+		for (let r of n) try {
+			r.callback(t);
+		} catch (t) {
+			console.warn(`Plugin registration listener threw an error for "${String(e)}":`, t);
+		}
+		let r = n.filter((e) => !e.once);
+		r.length > 0 ? this._listeners.set(e, r) : this._listeners.delete(e);
+	}
+	get(e) {
+		let t = this._plugins.get(e);
+		if (t?.ctor) return this._applyOverrides(e, t.ctor);
+	}
+	async getAsync(e) {
+		let t = this._plugins.get(e);
+		if (t?.ctor) return this._applyOverrides(e, t.ctor);
+		if (t?.loading) {
+			let n = await t.loading;
+			return this._applyOverrides(e, n);
+		}
+		if (t?.factory) {
+			let n = Promise.resolve(t.factory()).then((n) => (t.ctor = n, t.loading = void 0, this._notifyListeners(e, n), n));
+			t.loading = n;
+			let r = await n;
+			return this._applyOverrides(e, r);
+		}
+		return new Promise((t) => {
+			this.on(e, (n) => t(this._applyOverrides(e, n)));
+		});
+	}
+	add(e, t) {
+		let n = this._getOrCreateEntry(e);
+		n.ctor = t, this._notifyListeners(e, t);
+	}
+	addAll(e) {
+		for (let t of Object.keys(e)) {
+			let n = e[t];
+			n !== void 0 && this.add(t, n);
+		}
+	}
+	addAsync(e, t) {
+		let n = this._getOrCreateEntry(e);
+		return n.factory = t, { dispose: () => {
+			n.ctor || (n.factory = void 0);
+		} };
+	}
+	has(e) {
+		let t = this._plugins.get(e);
+		return !!(t?.ctor || t?.factory);
+	}
+	isLoaded(e) {
+		return !!this._plugins.get(e)?.ctor;
+	}
+	override(e, t) {
+		let n = this._getOrCreateEntry(e);
+		return n.overrides.push(t), { dispose: () => {
+			let e = n.overrides.indexOf(t);
+			e >= 0 && n.overrides.splice(e, 1);
+		} };
+	}
+	on(e, t) {
+		let n = this.get(e);
+		n && t(n);
+		let r = this._listeners.get(e);
+		r || (r = [], this._listeners.set(e, r));
+		let i = {
+			callback: t,
+			once: !1
+		};
+		return r.push(i), { dispose: () => this._removeListener(e, t) };
+	}
+	once(e, t) {
+		let n = this.get(e);
+		if (n) return t(n), { dispose: () => {} };
+		let r = this._listeners.get(e);
+		r || (r = [], this._listeners.set(e, r));
+		let i = {
+			callback: t,
+			once: !0
+		};
+		return r.push(i), { dispose: () => this._removeListener(e, t) };
+	}
+	off(e, t) {
+		this._removeListener(e, t);
+	}
+	_removeListener(e, t) {
+		let n = this._listeners.get(e);
+		if (n) {
+			let r = n.findIndex((e) => e.callback === t);
+			r >= 0 && n.splice(r, 1), n.length === 0 && this._listeners.delete(e);
+		}
+	}
+	keys() {
+		return Array.from(this._plugins.keys());
+	}
+	forContext() {
+		let e = this;
+		return { add(t, n) {
+			e.add(t, n);
+		} };
+	}
+}, y = class {
+	constructor(e) {
+		this.resolveRegistry = e;
+	}
+	target() {
+		return this.resolveRegistry();
+	}
+	get(e) {
+		return this.target().get(e);
+	}
+	getAsync(e) {
+		return this.target().getAsync(e);
+	}
+	add(e, t) {
+		return this.target().add(e, t);
+	}
+	addAll(e) {
+		return this.target().addAll(e);
+	}
+	addAsync(e, t) {
+		return this.target().addAsync(e, t);
+	}
+	has(e) {
+		return this.target().has(e);
+	}
+	isLoaded(e) {
+		return this.target().isLoaded(e);
+	}
+	override(e, t) {
+		return this.target().override(e, t);
+	}
+	on(e, t) {
+		return this.target().on(e, t);
+	}
+	once(e, t) {
+		return this.target().once(e, t);
+	}
+	off(e, t) {
+		return this.target().off(e, t);
+	}
+	keys() {
+		return this.target().keys();
+	}
+	forContext() {
+		return this.target().forContext();
+	}
+}, b = class {
 	_factories = /* @__PURE__ */ new Map();
 	add(e, t) {
 		let n = e;
@@ -28,28 +386,19 @@ var l = class {
 	get(e) {
 		return this._factories.get(e);
 	}
-}, u = (0, s.createIdentifier)("DomComponentRegistry");
-function d(e, t = u) {
-	return s.DependencyResolver.getOrCreateInstance(t, () => new l());
+}, x = u("DomComponentRegistry");
+function S(e, t = x) {
+	return _.getOrCreateInstance(t, () => new b());
 }
 //#endregion
-//#region \0runtime-proxy:app-core
-var f = /* @__PURE__ */ i({});
-import * as p from "@emailmaker/emailmaker/runtime/app-core/index.js";
-o(f, p);
-//#endregion
-//#region packages/extensions-core/identifiers/index.ts
-function m(e) {
-	return (0, s.createIdentifier)(e);
-}
-(0, s.createIdentifier)(), m("HANDLE_ATOM_INSERT"), (0, s.createIdentifier)(), (0, s.createIdentifier)("MESSAGE_SERVICE"), m("SETTINGS_PANEL_EVENT"), m("MODAL_SHOW_EVENT"), m("MODAL_CLOSE_EVENT"), m("MODAL_UPDATE_EVENT"), (0, s.createIdentifier)("client"), (0, s.createIdentifier)("ai_client"), (0, s.createIdentifier)(), (0, s.createIdentifier)(), (0, s.createIdentifier)("autosave-recovery");
-var h = (0, s.createIdentifier)("PluginRegistry");
+//#region src/plugin/registryId.ts
+var C = "PluginRegistry";
 //#endregion
 //#region src/plugin/pluginRegistry.ts
-function g(e = s.DependencyResolver) {
-	return e.getOrCreateInstance(h, () => new f.PluginRegistry());
+function w(e = c()) {
+	return e.getOrCreateInstance(C, () => new v());
 }
-var _ = g();
+var T = new y(() => w());
 //#endregion
 //#region src/extensions/api/src/index.ts
 (function(e) {
@@ -107,12 +456,12 @@ var _ = g();
 			n.packages[e.id] = e, n.validateAll();
 		}, t.__compat.registerPackage({
 			id: "extensions-api",
-			version: "1.0.111-dev.6",
+			version: "1.0.111-dev.8",
 			requires: { host: "^1.0.105" }
 		});
 	}
 })(typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : void 0);
-function v(e, t, n, r) {
+function E(e, t, n, r) {
 	if (typeof r.value == "function") {
 		Object.defineProperty(e, n, {
 			value: r.value.bind(t),
@@ -140,50 +489,50 @@ function v(e, t, n, r) {
 		enumerable: !1
 	});
 }
-function y(e, t, n) {
+function D(e, t, n) {
 	let r = t.use(n), i = /* @__PURE__ */ new Set(), a = [r];
 	for (let e = Object.getPrototypeOf(r); e && e !== Object.prototype; e = Object.getPrototypeOf(e)) a.push(e);
 	for (let t of a) for (let n of Reflect.ownKeys(t)) {
 		if (n === "constructor" || i.has(n)) continue;
 		let a = Object.getOwnPropertyDescriptor(t, n);
-		a && (i.add(n), v(e, r, n, a));
+		a && (i.add(n), E(e, r, n, a));
 	}
 }
-function b() {
+function O() {
 	return typeof globalThis.crypto?.randomUUID == "function" ? globalThis.crypto.randomUUID() : `component-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
-var x = class {
+var k = class {
 	constructor(e) {
-		y(this, e, "SandboxScriptApi");
+		D(this, e, "SandboxScriptApi");
 	}
-}, S = class {
+}, A = class {
 	constructor(e) {
-		y(this, e, "ElementsApi");
+		D(this, e, "ElementsApi");
 	}
-}, C = class {
+}, j = class {
 	constructor(e) {
-		y(this, e, "BlocksApi");
+		D(this, e, "BlocksApi");
 	}
-}, w = class {
+}, M = class {
 	constructor(e) {
-		y(this, e, "MessageService");
+		D(this, e, "MessageService");
 	}
-}, T = class {
+}, N = class {
 	constructor(e) {
-		y(this, e, "SettingsPanelApi");
+		D(this, e, "SettingsPanelApi");
 	}
-}, E = class {
+}, P = class {
 	constructor(e) {
-		y(this, e, "ModalApi");
+		D(this, e, "ModalApi");
 	}
-}, D = class {
+}, F = class {
 	constructor(e) {
-		y(this, e, "EmailSettingsApi");
+		D(this, e, "EmailSettingsApi");
 	}
 };
-function O(e = b()) {
+function I(e = O()) {
 	return e;
 }
-var k = d(s.DependencyResolver), A = "1.0.111-dev.6";
+var L = S(_), R = "1.0.111-dev.8";
 //#endregion
-export { C as BlocksApi, k as DomComponentRegistry, S as ElementsApi, D as EmailSettingsApi, w as MessageService, E as ModalApi, x as SandboxScriptApi, T as SettingsPanelApi, O as createComponentIdentifier, _ as pluginRegistry, A as version };
+export { j as BlocksApi, L as DomComponentRegistry, A as ElementsApi, F as EmailSettingsApi, M as MessageService, P as ModalApi, k as SandboxScriptApi, N as SettingsPanelApi, I as createComponentIdentifier, T as pluginRegistry, R as version };

package/package.json

@@ -5,8 +5,8 @@
   "main": "index.js",
   "types": "types.d.ts",
   "name": "@emailmaker/extensions-app",
-  "version": "1.0.111-dev.6",
+  "version": "1.0.111-dev.8",
   "dependencies": {
-    "@emailmaker/emailmaker": "1.0.111-dev.6"
+    "@emailmaker/emailmaker": "1.0.111-dev.8"
   }
 }

package/types.d.ts

@@ -344,6 +344,12 @@ interface SettingsPanelOptions<Props = unknown> {
   deletable?: boolean;
   parent?: boolean;
   advancedTabs?: ExtraTabOptions[];
+  /**
+   * Stable logical instance (block uuid, atom id, etc.).
+   * When omitted, each {@link ISettingsPanelApi.showSettingsPanel} call gets a fresh key and the host remounts the panel.
+   * Pass a stable value only to update props in-place and preserve internal UI state (scroll, focus, drafts).
+   */
+  instanceKey?: string;
 }
 /**
  * API for managing the settings panel.