@emailmaker/extensions-react 1.0.111-dev.5 → 1.0.111-dev.7

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,25 +1,382 @@
 import { Component as e, Fragment as t, createElement as n, createRef as r, isValidElement as i } from "react";
-import { createComponentIdentifier as a } from "@emailmaker/extensions-app";
-//#region \0rolldown/runtime.js
-var o = Object.defineProperty, s = Object.getOwnPropertyDescriptor, c = Object.getOwnPropertyNames, l = Object.prototype.hasOwnProperty, u = (e, t) => {
-	let n = {};
-	for (var r in e) o(n, r, {
-		get: e[r],
-		enumerable: !0
-	});
-	return t || o(n, Symbol.toStringTag, { value: "Module" }), n;
-}, d = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = c(t), a = 0, u = i.length, d; a < u; a++) d = i[a], !l.call(e, d) && d !== n && o(e, d, {
-		get: ((e) => t[e]).bind(null, d),
-		enumerable: !(r = s(t, d)) || r.enumerable
+//#region packages/runtime-core/disposable/index.ts
+var a = 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 o(e) {
+	return `service_container_${e}`;
+}
+var s = class e extends a {
+	_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(e, t, n = new a()) {
+		return n.addDisposable(this.onInject((r) => {
+			e === r && (n.dispose(), t(this.getInstance(r)));
+		})), this._parent && n.addDisposable(this._parent._onInject(e, t, n)), this.addDisposable(n), n;
+	}
+	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(e, t) {
+		let n = o(e);
+		this.injectFactory(n, (e, n = []) => n.indexOf(t) < 0 ? [...n, t] : n);
+		let r = new a();
+		return r.addDispose(() => {
+			this.injectFactory(n, (e, n = []) => n.filter((e) => e !== t));
+		}), r;
+	}
+	addServiceFactory(e, t, n) {
+		let r = o(e), i;
+		this.injectFactory(r, (e, n = []) => (i = t(e, i), i === void 0 ? n : n.indexOf(i) < 0 ? [...n, i] : n), n);
+		let s = new a();
+		return s.addDispose(() => {
+			this.injectFactory(r, (e, t = []) => i === void 0 ? t : t.filter((e) => e !== i));
+		}), s;
+	}
+	getServices(e) {
+		let t = o(e);
+		return [...this.getInstance(t, !1) || [], ...this._parent?.getServices(e) || []];
+	}
+	createChild() {
+		return new e(this);
+	}
+	getOrCreateIsolatedContainer(t) {
+		return this.getOrCreateInstance(t, () => {
+			let n = this._parent?.getOrCreateIsolatedContainer(t);
+			return new e(n);
+		});
+	}
+	dispose() {
+		this._injections = Object.create(null);
+	}
+};
+//#endregion
+//#region packages/runtime-core/di/namespace.ts
+function c(e) {
+	return e.startsWith("__") ? e : `__${e}__`;
+}
+function l(e) {
+	if (typeof globalThis > "u") throw Error("[di] globalThis is required for namespace container access.");
+	let t = c(e), n = globalThis;
+	return n[t] ??= {};
+}
+//#endregion
+//#region packages/runtime-core/di/ensureContainer.ts
+function u(e) {
+	return typeof e == "object" && !!e && typeof e.inject == "function" && typeof e.getInstance == "function";
+}
+function d(e) {
+	return c(e || "emailmaker");
+}
+function f(e) {
+	let t = l(d(e));
+	if (u(t.container)) return t.container;
+	let n = new s(null);
+	return t.container = n, n;
+}
+function p(e) {
+	return f(e);
+}
+//#endregion
+//#region packages/runtime-core/guid/index.ts
+function m() {
+	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);
 	});
+}
+//#endregion
+//#region packages/runtime-core/di/identifier.ts
+function h(e = m()) {
 	return e;
-}, f = (e, t, n) => (d(e, t, "default"), n && d(n, t, "default")), p = /* @__PURE__ */ u({});
-import * as m from "@emailmaker/emailmaker/runtime-core";
-f(p, m);
+}
 //#endregion
-//#region packages/extensions-core/components/DomComponentRegistry.ts
-var h = class {
+//#region packages/runtime-core/di/index.ts
+function g() {
+	return "app";
+}
+function _(e) {
+	if (typeof globalThis > "u") return;
+	let t = g(), 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 v() {
+	return "__emailmaker__";
+}
+function y(e, t) {
+	if (_(t), typeof globalThis > "u") return e;
+	let n = g(), 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 b;
+function x() {
+	if (b) return b;
+	let e = v();
+	return b = y(f(e), e), b;
+}
+var S = new Proxy({}, { get(e, t, n) {
+	let r = x(), i = Reflect.get(r, t, n);
+	return typeof i == "function" ? i.bind(r) : i;
+} }), C = 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);
+		} };
+	}
+}, w = 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();
+	}
+}, T = class {
 	_factories = /* @__PURE__ */ new Map();
 	add(e, t) {
 		let n = e;
@@ -30,28 +387,28 @@ var h = class {
 	get(e) {
 		return this._factories.get(e);
 	}
-}, g = (0, p.createIdentifier)("DomComponentRegistry");
-function _(e, t = g) {
-	return p.DependencyResolver.getOrCreateInstance(t, () => new h());
+}, E = h("DomComponentRegistry");
+function D(e, t = E) {
+	return S.getOrCreateInstance(t, () => new T());
 }
 //#endregion
 //#region packages/extensions-core/components/ComponentRegistry.ts
-function v(e) {
+function O(e) {
 	return typeof e == "function";
 }
-function y(e) {
+function k(e) {
 	return i(e);
 }
-function b(e) {
-	return typeof e == "function" || y(e);
+function A(e) {
+	return typeof e == "function" || k(e);
 }
-function x(e) {
-	return typeof e == "object" && !!e && "type" in e && "props" in e && !y(e);
+function j(e) {
+	return typeof e == "object" && !!e && "type" in e && "props" in e && !k(e);
 }
-function S(e, t) {
+function M(e, t) {
 	return n(e, t);
 }
-function C(t) {
+function N(t) {
 	return class extends e {
 		_ref = r();
 		_instance;
@@ -69,7 +426,7 @@ function C(t) {
 		}
 	};
 }
-var w = class {
+var P = class {
 	_components = /* @__PURE__ */ new Map();
 	_domAdapters = /* @__PURE__ */ new Map();
 	constructor(e) {
@@ -102,26 +459,26 @@ var w = class {
 		t.component = t.replacers.reduce((e, { replacer: t }) => t(e), void 0);
 	}
 	get(e) {
-		if (b(e)) return e;
+		if (A(e)) return e;
 		let t = e, n = this._components.get(t);
 		if (n?.component) return n.component;
 		let r = this._domComponentRegistry.get(e);
 		if (r) {
 			let e = this._domAdapters.get(t);
-			return e || (e = C(r), this._domAdapters.set(t, e)), e;
+			return e || (e = N(r), this._domAdapters.set(t, e)), e;
 		}
 	}
 	_resolveComponentInput(e) {
 		if (e == null) return null;
-		if (typeof e == "number" || typeof e == "boolean" || y(e)) return e;
+		if (typeof e == "number" || typeof e == "boolean" || k(e)) return e;
 		if (typeof e == "string") {
 			let t = this.get(e);
-			return y(t) ? t : t ? S(t) : e;
+			return k(t) ? t : t ? M(t) : e;
 		}
-		if (v(e)) return S(e);
-		if (x(e)) {
+		if (O(e)) return M(e);
+		if (j(e)) {
 			let t = this.get(e.type);
-			return y(t) ? t : t ? S(t, e.props) : null;
+			return k(t) ? t : t ? M(t, e.props) : null;
 		}
 		return null;
 	}
@@ -130,15 +487,32 @@ var w = class {
 	}
 	getReactElement(e) {
 		let r = this._resolveComponentInput(e);
-		return y(r) ? r : typeof r == "string" || r == null || typeof r == "boolean" || typeof r == "number" ? n(t, null, r) : n(t, null);
+		return k(r) ? r : typeof r == "string" || r == null || typeof r == "boolean" || typeof r == "number" ? n(t, null, r) : n(t, null);
 	}
-}, T = (0, p.createIdentifier)("ComponentRegistry");
-function E(e, t = T) {
-	return p.DependencyResolver.getOrCreateInstance(t, () => new w(_(p.DependencyResolver, g)));
+}, F = h("ComponentRegistry");
+function I(e, t = F) {
+	return S.getOrCreateInstance(t, () => new P(D(S, E)));
+}
+//#endregion
+//#region src/plugin/registryId.ts
+var L = "PluginRegistry";
+//#endregion
+//#region src/plugin/pluginRegistry.ts
+function R(e = p()) {
+	return e.getOrCreateInstance(L, () => new C());
+}
+new w(() => R());
+//#endregion
+//#region src/extensions/api/src/index.ts
+function z() {
+	return typeof globalThis.crypto?.randomUUID == "function" ? globalThis.crypto.randomUUID() : `component-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function B(e = z()) {
+	return e;
 }
 //#endregion
 //#region src/extensions/react/src/index.ts
-(function(e) {
+D(S), (function(e) {
 	if (!(!e || typeof e != "object")) {
 		var t = e.__emailmaker__ ||= {}, n = t.__compat ||= {};
 		n.host = n.host || null, n.packages = n.packages || {}, n.warned = n.warned || {}, n.normalizeVersion ||= function(e) {
@@ -193,7 +567,7 @@ function E(e, t = T) {
 			n.packages[e.id] = e, n.validateAll();
 		}, t.__compat.registerPackage({
 			id: "extensions-react",
-			version: "1.0.111-dev.5",
+			version: "1.0.111-dev.7",
 			requires: {
 				host: "^1.0.105",
 				"extensions-api": "^0.9.0"
@@ -201,6 +575,6 @@ function E(e, t = T) {
 		});
 	}
 })(typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : void 0);
-var D = E(p.DependencyResolver);
+var V = I(S);
 //#endregion
-export { D as ComponentRegistry, a as createComponentIdentifier };
+export { V as ComponentRegistry, B as createComponentIdentifier };

package/package.json

@@ -5,14 +5,14 @@
   "main": "index.js",
   "types": "types.d.ts",
   "dependencies": {
-    "antd": "^5.11.0",
+    "antd": "^5.22.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.0",
-    "@emailmaker/emailmaker": "1.0.111-dev.5",
-    "@emailmaker/extensions-app": "1.0.111-dev.5"
+    "@emailmaker/emailmaker": "1.0.111-dev.7",
+    "@emailmaker/extensions-app": "1.0.111-dev.7"
   },
   "name": "@emailmaker/extensions-react",
-  "version": "1.0.111-dev.5"
+  "version": "1.0.111-dev.7"
 }

package/types.d.ts

@@ -1,7 +1,565 @@
 import * as React from "react";
-import { ComponentId, ComponentType, IDisposable, createComponentIdentifier } from '@emailmaker/extensions-app';
+import { IPluginConstructor, Instance } from '@emailmaker/emailmaker';
 
-declare module '@emailmaker/extensions-app' {
+interface IDisposable$1 {
+  dispose(): void;
+}
+/**
+ * Unique identifier for a UI component.
+ * @template P The type of the component's props
+ */
+type ComponentId$1<P = void> = string & {
+  propsType?: P;
+};
+/**
+ * Represents a component type with its props.
+ */
+type ComponentType$1<Props> = {
+  type: ComponentId$1<Props>;
+  props: Props;
+};
+/**
+ * Extensible registry of component inputs accepted by core extension APIs.
+ * React-specific variants are added by the React adapter package.
+ */
+interface ComponentInputRegistry<Props = unknown> {
+  componentType: ComponentType$1<Props>;
+  componentId: ComponentId$1<Props>;
+}
+/**
+ * Supported component input accepted by core extension APIs.
+ * Registered React component values live in the React adapter package.
+ */
+type ComponentInput<Props = unknown> = ComponentInputRegistry<Props>[keyof ComponentInputRegistry<Props>];
+/**
+ * UI element that can be a primitive or a registered component descriptor.
+ */
+type UIElement = string | number | boolean | null | undefined | ComponentInput<any>;
+/**
+ * Identifier type for message service.
+ */
+type Identifier<Type0 = any, Type1 = any, Type2 = any> = {
+  type0?: Type0;
+  type1: Type1;
+  type2: Type2;
+} & string;
+/**
+ * Type that can be a Promise or a value.
+ */
+type MayBePromise<Value> = Promise<Value> | Value;
+interface IDisposable {
+  dispose(): void;
+}
+/**
+ * Payload for `BlocksApi.handleInject` when a block/structure was inserted in the sandbox
+ * (mirrors `application_block_inserted` message data).
+ */
+interface BlockInjectInfo {
+  type?: string;
+  name?: string;
+  blockId?: string;
+  project?: string;
+}
+/**
+ * Context passed to ElementsApi.handleBeforeInject before element (atom) HTML is sent to the iframe.
+ * Listeners may mutate fields in place and/or return a partial object to merge (SaveEmitter-style).
+ */
+interface ElementInsertContext extends Record<string, unknown> {
+  name: string;
+  className: string;
+  html: string;
+}
+/**
+ * Context passed to BlocksApi.handleBeforeInject before block HTML is sent to the iframe.
+ * `insertFrom` is the editor catalog route (e.g. project / template / common), not REST Block.type taxonomy.
+ */
+interface BlockInsertContext extends Record<string, unknown> {
+  html: string;
+  insertFrom?: string;
+  fragmentRole?: 'block' | 'structure';
+  /** REST / catalog taxonomy (e.g. block type from API), not the same as `insertFrom`. */
+  type?: string;
+  name?: string;
+  /** Current app project id (route / Redux), not necessarily `Block.project` from REST. */
+  project?: string | number;
+  id?: string;
+  title?: string | null;
+  tags?: string[];
+  slug?: string;
+  description?: string;
+  subject?: string;
+  blocktags?: number[];
+  modified?: string | null;
+  author?: string;
+  lock?: boolean;
+  excerpt?: string | null;
+  status?: string;
+  is_template?: boolean;
+  link?: string;
+  renderGuid?: string;
+  date?: string | null;
+  date_gmt?: string | null;
+  modified_gmt?: string | null;
+  comment_status?: string;
+  ping_status?: string;
+  template?: string;
+  related_email?: string;
+  project_title?: string;
+  project_author?: string;
+  isAmp?: boolean;
+  /** Remaining catalog/API fields not mapped above (shallow copy). */
+  catalogExtra?: Record<string, unknown>;
+}
+/**
+ * API for block insert lifecycle in the editor (before HTML is sent to the iframe, and after sandbox insert).
+ */
+interface IBlocksApi {
+  /**
+   * Runs before block HTML is posted to the iframe. Listeners receive a mutable context; they may
+   * mutate `html` and related fields or return a partial object to merge (SaveEmitter-style).
+   */
+  handleBeforeInject(listener: (ctx: BlockInsertContext) => MayBePromise<Partial<BlockInsertContext> | void>, priority?: number, thisArg?: unknown): IDisposable;
+  /**
+   * Fires after a block or structure was inserted in the sandbox (same channel as `application_block_inserted`).
+   * Does not allow changing markup; use {@link handleBeforeInject} to transform HTML before postMessage.
+   */
+  handleInject(listener: (info: BlockInjectInfo) => void, priority?: number, thisArg?: unknown): IDisposable;
+}
+/**
+ * Information about an element.
+ */
+interface ElementInfo {
+  html: string;
+  name: string;
+}
+/**
+ * Represents an element that can be used for building UI.
+ */
+interface Element {
+  title?: UIElement;
+  fallbackTooltip?: UIElement;
+  icon?: UIElement;
+  html: string;
+  className?: string;
+  name: string;
+}
+/**
+ * API for managing elements in the editor.
+ */
+interface IElementsApi {
+  /**
+   * Retrieves a list of all elements.
+   */
+  getNames(): Promise<ElementInfo[]>;
+  /**
+   * Updates an existing element.
+   */
+  update(name: string, element: Element): IDisposable;
+  /**
+   * Deletes an element by its name.
+   */
+  delete(name: string): void;
+  /**
+   * Inserts a new element at a specified position.
+   */
+  insert(element: Element, position?: number): IDisposable;
+  /**
+   * Runs before atom HTML is posted to the iframe. Listeners receive a mutable context; they may
+   * mutate `html` / `name` / `className` or return a partial object to merge (SaveEmitter-style).
+   */
+  handleBeforeInject(listener: (ctx: ElementInsertContext) => MayBePromise<Partial<ElementInsertContext> | void>, priority?: number, thisArg?: unknown): IDisposable;
+  /**
+   * Fires after an atom is injected into the email HTML in the sandbox. Does not allow changing inserted markup.
+   * For transforming HTML before postMessage, use {@link handleBeforeInject}.
+   */
+  handleInject(listener: (elementInfo: {
+    name: string;
+    className: string;
+    html: string;
+  }) => void, priority?: number, thisArg?: unknown): IDisposable;
+}
+/**
+ * API for interacting with the MessageService.
+ * Provides methods to send and receive messages, as well as manage event listeners.
+ */
+interface IMessageServiceApi {
+  /**
+   * Sends a message through MessageService.
+   */
+  send<Type>(messageTypeId: Identifier<Type>, data: Type, queued?: boolean): void;
+  send(data: any, queued?: boolean): void;
+  /**
+   * Sends an asynchronous message and waits for a response.
+   */
+  sendAsync<Type, Result>(messageTypeId: Identifier<Type, Result>, data: Type, queued?: boolean): Promise<Result | void>;
+  /**
+   * Adds a global event listener for message events.
+   */
+  addListener(listener: (e: MessageEvent) => void): IDisposable;
+  /**
+   * Adds a listener for a specific message type.
+   */
+  addListener<Type = any>(messageTypeId: Identifier<Type>, listener: (value: Type) => void, priority?: number): IDisposable;
+  /**
+   * Adds an asynchronous listener for a specific message type.
+   */
+  addListenerAsync<Type = any, Result = any>(messageTypeId: Identifier<Type, Result>, listener: (value: Type) => MayBePromise<Result>, priority?: number): IDisposable;
+  /**
+   * Adds a listener for the initialization event.
+   */
+  onInit(listener: (target: Window) => void, immediately?: boolean, priority?: number): IDisposable;
+  /**
+   * Checks whether initialization has been completed.
+   */
+  isInited(): boolean;
+}
+/**
+ * Mouse position type.
+ */
+type MousePosition = {
+  x: number;
+  y: number;
+} | null;
+/**
+ * Modal props interface.
+ */
+interface ModalProps {
+  open?: boolean;
+  confirmLoading?: boolean;
+  closable?: boolean;
+  onOk?: (e: MouseEvent) => void;
+  onCancel?: (e: MouseEvent) => void;
+  afterClose?: () => void;
+  afterOpenChange?: (open: boolean) => void;
+  centered?: boolean;
+  width?: string | number;
+  footer?: UIElement;
+  okText?: UIElement;
+  okType?: 'default' | 'primary' | 'dashed' | 'link' | 'text' | 'danger';
+  cancelText?: UIElement;
+  maskClosable?: boolean;
+  forceRender?: boolean;
+  destroyOnClose?: boolean;
+  style?: any;
+  wrapClassName?: string;
+  maskTransitionName?: string;
+  transitionName?: string;
+  className?: string;
+  rootClassName?: string;
+  getContainer?: string | HTMLElement | (() => HTMLElement) | false;
+  zIndex?: number;
+  mask?: boolean;
+  keyboard?: boolean;
+  wrapProps?: any;
+  prefixCls?: string;
+  closeIcon?: UIElement;
+  focusTriggerAfterClose?: boolean;
+  mousePosition?: MousePosition;
+}
+/**
+ * Configuration interface for modal windows.
+ */
+interface ModalConfig<Props = unknown> {
+  type?: 'confirm' | 'info' | 'success' | 'error' | 'warning';
+  title?: UIElement;
+  content: ComponentInput<Props>;
+  width?: number | string;
+  closable?: boolean;
+  onOk?: () => void | Promise<void>;
+  onClose?: () => void;
+  modalProps?: ModalProps;
+}
+/**
+ * ModalApi interface for managing modal windows in plugins.
+ */
+interface IModalApi {
+  /**
+   * Opens a modal window.
+   * @returns A unique identifier for the modal window.
+   */
+  show<P>(config: ModalConfig<P>): string;
+  /**
+   * Closes a modal window by its identifier.
+   */
+  close(id: string): void;
+  /**
+   * Closes all open modal windows.
+   */
+  closeAll(): void;
+  /**
+   * Updates the parameters of an already open modal window.
+   */
+  update<P>(id: string, config: Partial<ModalConfig<P>>): void;
+}
+/**
+ * API for managing styles and scripts in a sandboxed environment (e.g., an iframe).
+ */
+interface ISandboxScriptHandle extends IDisposable {
+  /**
+   * Resolves when the corresponding sandbox `<script>` tag is loaded in iframe.
+   * Rejects if script loading fails or registration is disposed before load completes.
+   */
+  readonly loaded: Promise<void>;
+  /**
+   * Resolves when sandbox script is ready to receive messages.
+   * If script did not synchronously create sandbox plugins during evaluation,
+   * `ready` resolves together with `loaded`.
+   * If it did, `ready` waits until those synchronously created plugins finish
+   * lifecycle initialization (`afterInit`).
+   */
+  readonly ready: Promise<void>;
+}
+interface ISandboxScriptApi {
+  /**
+   * Registers an external CSS file inside the sandboxed environment.
+   */
+  registerSandboxCSS(url: string): IDisposable;
+  /**
+   * Registers a block of CSS code inside the sandboxed environment.
+   */
+  registerSandboxCSSCode(key: string, code: string): IDisposable;
+  /**
+   * Registers an external JavaScript file inside the sandboxed environment.
+   */
+  registerSandboxScript(url: string): ISandboxScriptHandle;
+  /**
+   * Registers a block of JavaScript code inside the sandboxed environment.
+   */
+  registerSandboxScriptCode(key: string, code: string): ISandboxScriptHandle;
+}
+/**
+ * Options for adding extra tabs in the interface.
+ */
+interface ExtraTabOptions<Props = unknown> {
+  content: ComponentInput<Props>;
+  label?: string;
+  key: string;
+  className?: string;
+}
+/**
+ * Options for the settings panel.
+ */
+interface SettingsPanelOptions<Props = unknown> {
+  content: ComponentInput<Props>;
+  caption?: string;
+  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.
+ */
+interface ISettingsPanelApi {
+  /**
+   * Opens the settings panel and displays the provided component.
+   */
+  showSettingsPanel<Props = unknown>(options: SettingsPanelOptions<Props>): void;
+  /**
+   * Closes the settings panel.
+   */
+  closeSettingsPanel(): void;
+}
+/**
+ * Unique identifier for a UI component.
+ * @template P The component's props type.
+ */
+type ComponentId<P = void> = string & {
+  propsType?: P;
+};
+/**
+ * Represents a component type with its props.
+ */
+type ComponentType<Props> = {
+  type: ComponentId<Props>;
+  props: Props;
+};
+/**
+ * Creates a unique identifier for a UI component.
+ * @template Props The component's props type.
+ * @param {string} [name] Optional identifier name.
+ * @returns {ComponentId<Props>} A unique component identifier.
+ */
+declare function createComponentIdentifier<Props>(name?: string): ComponentId<Props>;
+// ============================================
+// EmailSettingsApi
+// ============================================
+interface EmailSettingsApi {
+  getEmailLayoutSettings(): Promise<EmailLayoutSettings>;
+  setEmailLayoutSettings(settings: Partial<EmailLayoutSettings>): Promise<void>;
+  getEmailContentStyles(): Promise<EmailContentStyles>;
+  setEmailContentStyles(contentStyles: Partial<EmailContentStyles>): Promise<void>;
+  /** Fired after email layout settings change. */
+  onChangeEmailLayoutSettings(listener: (settings: EmailLayoutSettings) => void): IDisposable$1;
+  /** Fired after email content styles change. */
+  onChangeEmailContentStyles(listener: (contentStyles: EmailContentStyles) => void): IDisposable$1;
+}
+/**
+ * Email layout settings.
+ */
+interface EmailLayoutSettings {
+  backgroundColor: string;
+  backgroundImage: Array<{
+    type: 'url';
+    value: string;
+  }>;
+  backgroundPositionX: string;
+  backgroundPositionY: string;
+  backgroundRepeat: string;
+  backgroundSize?: string;
+  backgroundColorContent?: string;
+  textStrong: boolean;
+  textItalic: boolean;
+  textUnderline: boolean;
+  width?: {
+    value?: number;
+    dim?: string;
+  };
+  responsive?: {
+    shutdown?: boolean;
+    styles?: boolean;
+  };
+}
+/**
+ * Email content styles.
+ */
+interface EmailContentStyles {
+  text?: {
+    fontFamily?: string[] | string;
+    fontSize?: number;
+    fontSizeDim?: string;
+    lineHeight?: number;
+    lineHeightDim?: string;
+    color?: string;
+    contrastColor?: string;
+    textAlign?: string;
+    paddingBottom?: number;
+    paddingBottomDim?: string;
+  };
+  headings?: {
+    fontFamily?: string[] | string;
+    fontSize?: number;
+    fontSizeDim?: string;
+    lineHeight?: number;
+    lineHeightDim?: string;
+    color?: string;
+    contrastColor?: string;
+    textAlign?: string;
+    paddingTop?: number;
+    paddingTopDim?: string;
+    paddingBottom?: number;
+    paddingBottomDim?: string;
+    letterSpacing?: number;
+    letterSpacingDim?: string;
+    bold?: boolean;
+    italic?: boolean;
+  };
+  links?: {
+    color?: string;
+    contrastColor?: string;
+    underline?: boolean;
+  };
+  buttons?: {
+    fontFamily?: string[] | string;
+    fontSize?: number;
+    fontSizeDim?: string;
+    letterSpacing?: number;
+    letterSpacingDim?: string;
+    color?: string;
+    contrastColor?: string;
+    bold?: boolean;
+    italic?: boolean;
+    backgroundColor?: string;
+    contrastBackgroundColor?: string;
+    marginTop?: number;
+    marginTopDim?: string;
+    marginBottom?: number;
+    marginBottomDim?: string;
+    border?: {
+      all?: number | null;
+      top?: number | null;
+      right?: number | null;
+      bottom?: number | null;
+      left?: number | null;
+    };
+    borderRadius?: {
+      all?: number | null;
+      topLeft?: number | null;
+      topRight?: number | null;
+      bottomRight?: number | null;
+      bottomLeft?: number | null;
+    };
+    textAlign?: string;
+    padding?: {
+      all?: number | null;
+      top?: number | null;
+      right?: number | null;
+      bottom?: number | null;
+      left?: number | null;
+    };
+  };
+  block?: {
+    backgroundColor?: string;
+    contrastBackgroundColor?: string;
+    padding?: {
+      all?: number | null;
+      top?: number | null;
+      right?: number | null;
+      bottom?: number | null;
+      left?: number | null;
+    };
+  };
+  cards?: {
+    contrastBackgroundColor?: string;
+    contrastTextColor?: string;
+    baseBackgroundColor?: string;
+    baseTextColor?: string;
+    border?: {
+      all?: number | null;
+      top?: number | null;
+      right?: number | null;
+      bottom?: number | null;
+      left?: number | null;
+    };
+    borderRadius?: {
+      all?: number | null;
+      topLeft?: number | null;
+      topRight?: number | null;
+      bottomRight?: number | null;
+      bottomLeft?: number | null;
+    };
+  };
+}
+/**
+ * @deprecated Use `editor.use('EmailSettingsApi')` to access built-in platform APIs.
+ * This compatibility facade will be removed in a future plugin-system package release.
+ */
+declare class EmailSettingsApi {
+  constructor(editor: Instance);
+}
+declare module '@emailmaker/emailmaker' {
+  interface PluginTypeMap {
+    SandboxScriptApi: IPluginConstructor<ISandboxScriptApi>;
+    ElementsApi: IPluginConstructor<IElementsApi>;
+    BlocksApi: IPluginConstructor<IBlocksApi>;
+    MessageService: IPluginConstructor<IMessageServiceApi>;
+    SettingsPanelApi: IPluginConstructor<ISettingsPanelApi>;
+    ModalApi: IPluginConstructor<IModalApi>;
+    EmailSettingsApi: IPluginConstructor<EmailSettingsApi>;
+  }
+}
+declare module '@emailmaker/extensions-api' {
+  interface ComponentInputRegistry<Props = unknown> {
+    reactComponent: React.ComponentClass<Props> | React.FunctionComponent<Props>;
+    reactElement: React.ReactElement;
+  }
+}
+declare module 'extensions-core/api/interfaces' {
   interface ComponentInputRegistry<Props = unknown> {
     reactComponent: React.ComponentClass<Props> | React.FunctionComponent<Props>;
     reactElement: React.ReactElement;
@@ -30,7 +588,7 @@ interface IComponentRegistry {
    * @param {ReactNode<P>} component - The component instance.
    * @returns {Disposable} A disposable instance to remove the component.
    */
-  add<P>(id: ComponentId<P>, component: ReactNode<P>): IDisposable;
+  add<P>(id: ComponentId<P>, component: ReactNode<P>): IDisposable$1;
   /**
    * Overrides an existing component with a new replacer function.
    * @template P The type of the component's props.
@@ -38,7 +596,7 @@ interface IComponentRegistry {
    * @param {ComponentReplacer<P>} replacer - The replacer function.
    * @returns {Disposable} A disposable instance for cleanup.
    */
-  override<P>(id: ComponentId<P>, replacer: ComponentReplacer<P>): IDisposable;
+  override<P>(id: ComponentId<P>, replacer: ComponentReplacer<P>): IDisposable$1;
   /**
    * Retrieves a registered component by its identifier.
    * @template P The type of the component's props.