@fulate/vue 1.0.0

package/README.md

@@ -0,0 +1,103 @@
+# `@fulate/vue`
+
+> 文档角色：`GUIDE`。权威来源：Vue adapter 源码 TSDoc 与测试；Core 场景和生命周期规则见
+> [`@fulate/core` 指南](../core/docs/README.md)，跨包 Editor 规则见 [`docs/specs/`](../../docs/README.md)。
+
+Vue adapter 把 Vue renderer 接到一个 Fulate `Root`。它不复制 Core 场景状态，也不创建第二个 Root
+frame runtime；每个挂载的应用只拥有自己的 content/overlay Layer 和 Vue 生命周期。
+
+## 创建与挂载
+
+```ts
+import { createApp } from "@fulate/vue";
+
+const app = createApp(App);
+app.mount(container);       // 自动创建并拥有 Root
+// 或：app.mount(root);      // 使用已有 Root，Root 仍由调用方拥有
+
+app.unmount();
+```
+
+传入 `HTMLElement`、选择器或已有 `Root`。自动创建的 Root 由 app 释放；传入已有 Root 时，app 只
+释放自己创建的 Layer 和 renderer。一个 Root 只能承载一个 Fulate Vue app；应用不可在 unmount 后
+重新挂载。
+
+## VueShape 与自定义元素
+
+`VueShape` 在元素进入活动 Root 时挂载 Vue component，离开时卸载。它支持两种互斥的 props 模式。
+
+低层 manual 模式通过 `setComponentProps()` 采用 whole-value props，同一引用是 noop。组件可通过
+`registerVueComponent(name, component)` 注册，以便基础 clipboard/file adapter 按名称恢复：
+
+```ts
+import { VueShape, registerVueComponent } from "@fulate/vue";
+
+registerVueComponent("Badge", Badge);
+const badge = new VueShape({ width: 120, height: 32 }, { label: "Ready" })
+  .bindComponent(Badge);
+```
+
+mapped 模式使用 `VueShape<P, O>` 和第三个构造参数安装 typed Properties，并在 `bindComponent()`
+时注册一次 properties resolver。resolver 读取包含 configured/runtime 的最终 effective Properties，
+每次返回完整 props；Fulate 通过同一 `setComponentProps()` 路径整体替换：
+
+```ts
+class KeyValueShape extends VueShape<KeyValueProperties, KeyValueOption> {
+  override readonly type = "key-value";
+
+  constructor(options: KeyValueOption = {}) {
+    super(options, {}, new KeyValueProperties(options));
+    this.bindComponent(FKeyValue, (current) => ({
+      keyText: current.runtimeKeyText ?? current.keyText,
+      valueText: current.runtimeValue ?? current.valueText
+    }));
+  }
+}
+```
+
+初始绑定、configured/runtime 更新与清除、属性快照恢复都经过该映射。mapped props 是派生缓存，不写入
+JSON、Clipboard 或 History；mapped 业务类型由其具体 type factory 恢复。manual 模式仍保存组件名称和
+手动 component props，`fromVueToFulate()` 与基础 `vueClipboardPlugin` 的行为不变。
+
+每个 `VueShape` 都拥有独立 Vue app。组件可在 `setup()` 中直接通过 `useFulateHost()` 取得当前宿主；
+派生类型可作为泛型参数保留具体类型：
+
+```ts
+import { useFulateHost } from "@fulate/vue";
+
+const shape = useFulateHost<KeyValueShape>();
+```
+
+该注入只存在于 `VueShape` 创建的独立 app；外层 Editor Vue app 的 `provide()` 不会自动穿透。Root、
+overlay 和 size 上下文仍由每个独立 app 分别提供。
+
+自定义 Canvas 元素通过 `registerElement("f-widget", Widget)` 注册后，才能在 Vue template 中使用
+`<f-widget />`。未知元素会在 renderer 创建时自然抛错，不另设兼容路径。
+
+## Root 与 overlay
+
+`createApp()` 会建立内容层和 overlay 层，并通过 `FULATE_ROOT_KEY`、`FULATE_OVERLAY_KEY` 注入给
+Vue 组件。手工管理 Root 时，可用 `registerVueOverlay(root, layer)` 为独立 `VueShape` 提供浮层层；
+返回的 cleanup 必须在场景销毁时调用。
+
+```ts
+const unregister = registerVueOverlay(root, overlayLayer);
+// ... mount VueShape / use overlay composables
+unregister();
+```
+
+组件尺寸可通过 `useVueShapeSize()` 读取。过渡动画使用 `FTransition`，其动画仍通过元素的正常
+`animate()` 与 Root frame 路径完成。`registerVueOverlay()` 和组件 overlay 定位的 cleanup 绑定
+所属 Root 生命周期；`useOverlayPosition()` 的异步结果只在 task、引用和挂载状态仍有效时安装。
+
+## Clipboard
+
+`vueClipboardPlugin` 是按 `Select` 实例显式安装的 clipboard adapter：
+
+```ts
+const select = new Select().useClipboard(vueClipboardPlugin);
+```
+
+基础 manual `VueShape` 的复制 payload 保存组件名称、props 和必要元素数据，组件必须在恢复前完成
+注册。mapped 自定义类型不保存组件名称或派生 props，由业务 type factory 恢复。该 adapter 不注册
+全局 Select 行为，也不读取旧格式。

package/dist/app.d.ts

@@ -0,0 +1,14 @@
+import { Root } from "@fulate/core";
+import { baseCreateApp } from "./renderer";
+import type { Component } from "@vue/runtime-core";
+export interface FulateAppMountOptions {
+    width?: number;
+    height?: number;
+}
+type BaseApp = ReturnType<typeof baseCreateApp>;
+export type FulateApp = Omit<BaseApp, "mount"> & {
+    readonly root: Root | null;
+    mount(rootOrEl: Root | HTMLElement | string, options?: FulateAppMountOptions): ReturnType<BaseApp["mount"]>;
+};
+export declare function createApp(rootComponent: Component, rootProps?: Record<string, unknown>): FulateApp;
+export {};

package/dist/context.d.ts

@@ -0,0 +1,18 @@
+import type { Layer, Root } from "@fulate/core";
+import { type InjectionKey } from "@vue/runtime-core";
+import type { VueShape } from "./vue-shape";
+export declare const FULATE_ROOT_KEY = "__fulate_root";
+export declare const FULATE_OVERLAY_KEY = "__fulate_overlay";
+export declare const VUE_SHAPE_SIZE_KEY = "__vueShapeSize";
+export declare const FULATE_HOST_KEY: InjectionKey<VueShape>;
+/** 读取当前独立 VueShape app 提供的 Fulate 宿主。 */
+export declare function useFulateHost<T extends VueShape = VueShape>(): T;
+export interface FulateRootLayers {
+    content: Layer;
+    overlay: Layer;
+}
+export declare function setFulateRootLayers(root: Root, layers: FulateRootLayers): void;
+export declare function getFulateRootLayers(root: Root): FulateRootLayers;
+export declare function getFulateOverlay(root: Root): Layer<import("@fulate/core").LayerProperties, import("@fulate/core").LayerOption>;
+export declare function registerVueOverlay(root: Root, overlay: Layer): () => void;
+export declare function clearFulateRootLayers(root: Root, layers: FulateRootLayers): void;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { registerElement, getRegisteredElement } from "./renderer";
+export type { ElementConstructor } from "./renderer";
+export { createApp } from "./app";
+export type { FulateApp, FulateAppMountOptions } from "./app";
+export { FULATE_HOST_KEY, FULATE_OVERLAY_KEY, FULATE_ROOT_KEY, VUE_SHAPE_SIZE_KEY, registerVueOverlay, useFulateHost } from "./context";
+export { FTransition } from "./transition";
+export { VueShape, fromVueToFulate, registerVueComponent, getVueComponent, vueClipboardPlugin } from "./vue-shape";
+export type { VueComponentPropsResolver, VueShapeJSON } from "./vue-shape";

package/dist/index.js

@@ -0,0 +1,510 @@
+import { BaseTransition, createRenderer, defineComponent, getCurrentInstance, h, inject, markRaw, mergeProps, onBeforeUnmount, reactive, shallowRef } from "@vue/runtime-core";
+import { Element, Layer, Root, Shape } from "@fulate/core";
+import { isFunction, isString, isUndefined } from "lodash-es";
+import { Circle, Group, Image, Line, LineTree, Polygon, Rectangle, RectangleProperties, RectangleTransform, RippleOverlay, ScrollView, Text, Triangle, Workspace } from "@fulate/ui";
+//#region packages/vue/src/renderer.ts
+var elementConstructors = new Map([
+	["f-element", Element],
+	["f-shape", Shape],
+	["f-rectangle", Rectangle],
+	["f-circle", Circle],
+	["f-triangle", Triangle],
+	["f-polygon", Polygon],
+	["f-text", Text],
+	["f-image", Image],
+	["f-workspace", Workspace],
+	["f-group", Group],
+	["f-scrollview", ScrollView],
+	["f-scroll-view", ScrollView],
+	["f-line", Line],
+	["f-line-tree", LineTree],
+	["f-ripple", RippleOverlay]
+]);
+function registerElement(type, Constructor) {
+	elementConstructors.set(type, Constructor);
+}
+function getRegisteredElement(type) {
+	return elementConstructors.get(type);
+}
+function isEventProp(key) {
+	return /^on[A-Z]/.test(key);
+}
+function toEventName(key) {
+	return key.slice(2).toLowerCase();
+}
+function forEachEventHandler(value, callback) {
+	if (Array.isArray(value)) value.forEach((item) => forEachEventHandler(item, callback));
+	else if (isFunction(value)) callback(value);
+}
+function createPlaceholder() {
+	const el = new Element({
+		width: 0,
+		height: 0,
+		silent: true,
+		pickable: false
+	});
+	placeholders.add(el);
+	return el;
+}
+var placeholders = /* @__PURE__ */ new WeakSet();
+var { render, createApp: baseCreateApp } = createRenderer({
+	createElement(type) {
+		const Ctor = getRegisteredElement(type);
+		if (!Ctor) throw new Error(`[fulate-vue] Unknown element "${type}". Register it before mounting the app.`);
+		return markRaw(new Ctor());
+	},
+	insert(child, parent, anchor) {
+		if (!parent) return;
+		if (anchor) parent.insertBefore(child, anchor);
+		else parent.append(child);
+	},
+	remove(child) {
+		child.unmount();
+	},
+	patchProp(el, key, prevValue, nextValue) {
+		if (placeholders.has(el)) return;
+		if (isEventProp(key)) {
+			const eventName = toEventName(key);
+			forEachEventHandler(prevValue, (handler) => el.removeEventListener(eventName, handler));
+			forEachEventHandler(nextValue, (handler) => el.addEventListener(eventName, handler));
+			return;
+		}
+		el.setOptions({ [key]: nextValue });
+	},
+	createText() {
+		return createPlaceholder();
+	},
+	createComment() {
+		return createPlaceholder();
+	},
+	setText() {},
+	setElementText(el, text) {
+		if (placeholders.has(el)) return;
+		if (el.type === "text") el.setOptions({ text });
+	},
+	parentNode(node) {
+		return node?.parent ?? null;
+	},
+	nextSibling(node) {
+		return node?.nextSibling ?? null;
+	}
+});
+//#endregion
+//#region packages/vue/src/context.ts
+var FULATE_ROOT_KEY = "__fulate_root";
+var FULATE_OVERLAY_KEY = "__fulate_overlay";
+var VUE_SHAPE_SIZE_KEY = "__vueShapeSize";
+var FULATE_HOST_KEY = Symbol("fulate-host");
+/** 读取当前独立 VueShape app 提供的 Fulate 宿主。 */
+function useFulateHost() {
+	return inject(FULATE_HOST_KEY);
+}
+var rootLayers = /* @__PURE__ */ new WeakMap();
+var standaloneOverlays = /* @__PURE__ */ new WeakMap();
+function setFulateRootLayers(root, layers) {
+	rootLayers.set(root, layers);
+}
+function getFulateRootLayers(root) {
+	return rootLayers.get(root);
+}
+function getFulateOverlay(root) {
+	return rootLayers.get(root)?.overlay ?? standaloneOverlays.get(root);
+}
+function registerVueOverlay(root, overlay) {
+	if (root.isUnmounted) throw new Error("[fulate-vue] cannot register an overlay on an unmounted Root");
+	standaloneOverlays.set(root, overlay);
+	let removeRootListener = () => {};
+	const unregister = () => {
+		if (standaloneOverlays.get(root) === overlay) standaloneOverlays.delete(root);
+		removeRootListener();
+	};
+	removeRootListener = root.addEventListener("unmounted", unregister);
+	return unregister;
+}
+function clearFulateRootLayers(root, layers) {
+	if (rootLayers.get(root) === layers) rootLayers.delete(root);
+}
+//#endregion
+//#region packages/vue/src/app.ts
+function createApp(rootComponent, rootProps) {
+	const app = baseCreateApp(rootComponent, rootProps);
+	const originalMount = app.mount.bind(app);
+	const originalUnmount = app.unmount.bind(app);
+	let mounted = null;
+	let disposing = false;
+	let hasUnmounted = false;
+	let rendererMounted = false;
+	function resolveRoot(rootOrEl, options) {
+		if (rootOrEl instanceof Root) return {
+			root: rootOrEl,
+			ownsRoot: false
+		};
+		const element = isString(rootOrEl) ? document.querySelector(rootOrEl) : rootOrEl;
+		if (!(element instanceof HTMLElement)) throw new TypeError("[fulate-vue] mount target must be a Root or HTMLElement");
+		return {
+			root: new Root(element, options),
+			ownsRoot: true
+		};
+	}
+	function dispose(fromRoot = false) {
+		if (!mounted || disposing) return;
+		disposing = true;
+		const state = mounted;
+		mounted = null;
+		hasUnmounted = true;
+		state.removeRootListener();
+		try {
+			try {
+				if (rendererMounted) {
+					originalUnmount();
+					rendererMounted = false;
+				}
+			} finally {
+				if (!state.content.isUnmounted) state.content.unmount();
+				if (!state.overlay.isUnmounted) state.overlay.unmount();
+				clearFulateRootLayers(state.root, state);
+				if (state.ownsRoot && !fromRoot && !state.root.isUnmounted) state.root.unmount();
+			}
+		} finally {
+			disposing = false;
+		}
+	}
+	const mount = (rootOrEl, options) => {
+		if (mounted) throw new Error("[fulate-vue] app is already mounted");
+		if (hasUnmounted) throw new Error("[fulate-vue] app cannot be remounted after unmount");
+		const { root, ownsRoot } = resolveRoot(rootOrEl, options);
+		if (root.isUnmounted) throw new Error("[fulate-vue] cannot mount into an unmounted Root");
+		if (getFulateRootLayers(root)) throw new Error("[fulate-vue] Root already hosts a Fulate Vue app");
+		const content = new Layer({
+			zIndex: 1,
+			enableDirtyRect: true
+		});
+		const overlay = new Layer({
+			zIndex: 100,
+			enableDirtyRect: true
+		});
+		root.append(content);
+		root.append(overlay);
+		app.provide(FULATE_OVERLAY_KEY, overlay);
+		app.provide(FULATE_ROOT_KEY, root);
+		mounted = {
+			root,
+			ownsRoot,
+			content,
+			overlay,
+			removeRootListener: root.addEventListener("unmounted", () => {
+				dispose(true);
+			})
+		};
+		setFulateRootLayers(root, mounted);
+		try {
+			const instance = originalMount(content);
+			rendererMounted = true;
+			if (!root.isMounted) root.mount();
+			return instance;
+		} catch (error) {
+			dispose();
+			throw error;
+		}
+	};
+	app.mount = mount;
+	app.unmount = (() => dispose());
+	Object.defineProperty(app, "root", {
+		configurable: false,
+		enumerable: true,
+		get: () => mounted?.root ?? null
+	});
+	return app;
+}
+//#endregion
+//#region packages/vue/src/transition.ts
+var FTransition = defineComponent({
+	name: "FTransition",
+	props: {
+		appear: {
+			type: Boolean,
+			default: false
+		},
+		mode: {
+			type: String,
+			default: void 0
+		},
+		enterFrom: {
+			type: Object,
+			default: void 0
+		},
+		enterTo: {
+			type: Object,
+			default: void 0
+		},
+		leaveTo: {
+			type: Object,
+			default: void 0
+		},
+		duration: {
+			type: Number,
+			default: 300
+		}
+	},
+	emits: [
+		"beforeEnter",
+		"enter",
+		"afterEnter",
+		"enterCancelled",
+		"beforeLeave",
+		"leave",
+		"afterLeave",
+		"leaveCancelled",
+		"beforeAppear",
+		"appear",
+		"afterAppear",
+		"appearCancelled"
+	],
+	setup(props, { emit, slots }) {
+		const instance = getCurrentInstance();
+		const activeRuns = /* @__PURE__ */ new Map();
+		function hasListener(name) {
+			const vnodeProps = instance.vnode.props;
+			return Boolean(vnodeProps?.[name] || vnodeProps?.[`${name}Once`]);
+		}
+		function cancelRun(element) {
+			const run = activeRuns.get(element);
+			if (!run) return null;
+			activeRuns.delete(element);
+			run.cancel();
+			return run.phase;
+		}
+		function cancelAllRuns() {
+			for (const run of activeRuns.values()) run.cancel();
+			activeRuns.clear();
+		}
+		function prepareEnter(element) {
+			const { enterFrom, enterTo } = props;
+			if (!enterFrom || !enterTo) return;
+			const initial = {};
+			for (const key of Object.keys(enterTo)) if (Object.hasOwn(enterFrom, key)) initial[key] = enterFrom[key];
+			element.setOptions(initial);
+		}
+		function animate(element, phase, target, done) {
+			cancelRun(element);
+			if (!target) {
+				done();
+				return;
+			}
+			let cancelled = false;
+			let removeActivatedListener = null;
+			let tween = null;
+			const run = {
+				phase,
+				cancel() {
+					cancelled = true;
+					removeActivatedListener?.();
+					removeActivatedListener = null;
+					tween?.stop();
+					tween = null;
+				}
+			};
+			activeRuns.set(element, run);
+			const complete = () => {
+				if (cancelled || activeRuns.get(element) !== run) return;
+				activeRuns.delete(element);
+				done();
+			};
+			const start = () => {
+				removeActivatedListener = null;
+				if (cancelled) return;
+				tween = element.animate(target, {
+					duration: props.duration,
+					onComplete: complete
+				}).tween;
+			};
+			if (element.isActive) start();
+			else removeActivatedListener = element.addEventListener("activated", start, { once: true });
+		}
+		onBeforeUnmount(cancelAllRuns);
+		return () => {
+			const baseProps = {
+				appear: props.appear,
+				mode: props.mode,
+				onBeforeEnter(element) {
+					cancelRun(element);
+					prepareEnter(element);
+					emit("beforeEnter", element);
+				},
+				onEnter(element, done) {
+					emit("enter", element);
+					animate(element, "enter", props.enterTo, done);
+				},
+				onAfterEnter(element) {
+					cancelRun(element);
+					emit("afterEnter", element);
+				},
+				onEnterCancelled(element) {
+					cancelRun(element);
+					emit("enterCancelled", element);
+				},
+				onBeforeLeave(element) {
+					cancelRun(element);
+					emit("beforeLeave", element);
+				},
+				onLeave(element, done) {
+					emit("leave", element);
+					animate(element, "leave", props.leaveTo, done);
+				},
+				onAfterLeave(element) {
+					if (cancelRun(element) === "leave") {
+						emit("leaveCancelled", element);
+						return;
+					}
+					emit("afterLeave", element);
+				},
+				onLeaveCancelled(element) {
+					cancelRun(element);
+					emit("leaveCancelled", element);
+				}
+			};
+			if (hasListener("onBeforeAppear")) baseProps.onBeforeAppear = (element) => {
+				cancelRun(element);
+				prepareEnter(element);
+				emit("beforeAppear", element);
+			};
+			if (hasListener("onAppear")) baseProps.onAppear = (element, done) => {
+				emit("appear", element);
+				animate(element, "enter", props.enterTo, done);
+			};
+			if (hasListener("onAfterAppear")) baseProps.onAfterAppear = (element) => {
+				cancelRun(element);
+				emit("afterAppear", element);
+			};
+			if (hasListener("onAppearCancelled")) baseProps.onAppearCancelled = (element) => {
+				cancelRun(element);
+				emit("appearCancelled", element);
+			};
+			return h(BaseTransition, baseProps, slots.default);
+		};
+	}
+});
+//#endregion
+//#region packages/vue/src/vue-shape.ts
+var vueCompRegistry = /* @__PURE__ */ new Map();
+function registerVueComponent(name, comp) {
+	vueCompRegistry.set(name, comp);
+}
+function getVueComponent(name) {
+	return vueCompRegistry.get(name);
+}
+var VueShape = class extends Rectangle {
+	type = "vue-component";
+	comp = null;
+	compName = "";
+	componentProps;
+	componentPropsResolver;
+	componentPropsRef = null;
+	sizeRef = null;
+	app = null;
+	constructor(options = {}, componentProps = {}, properties = new RectangleProperties(options), Transform = RectangleTransform) {
+		super(options, properties, Transform);
+		this.componentProps = componentProps;
+	}
+	/**
+	* 绑定一次 Vue component；提供 resolver 时，Properties 成为 component props 唯一真源。
+	*/
+	bindComponent(comp, resolveComponentProps) {
+		this.comp = comp;
+		this.componentPropsResolver = resolveComponentProps;
+		this.compName = comp.name ?? "";
+		if (this.compName) vueCompRegistry.set(this.compName, comp);
+		this.syncComponentProps();
+		return this;
+	}
+	onActivate(root, layer) {
+		super.onActivate(root, layer);
+		if (this.comp) this.mountVue();
+	}
+	onDeactivate(root, layer) {
+		this.unmountVue();
+		super.onDeactivate(root, layer);
+	}
+	onUnmount() {
+		this.unmountVue();
+		super.onUnmount();
+	}
+	mountVue() {
+		if (this.app) return;
+		this.componentPropsRef = shallowRef(this.componentProps);
+		this.sizeRef = reactive({
+			width: this.width ?? 0,
+			height: this.height ?? 0
+		});
+		const componentPropsRef = this.componentPropsRef;
+		const sizeRef = this.sizeRef;
+		const Comp = this.comp;
+		this.app = baseCreateApp(defineComponent({ setup() {
+			return () => h(Comp, mergeProps(componentPropsRef.value, sizeRef));
+		} }));
+		this.app.provide(FULATE_HOST_KEY, markRaw(this));
+		const root = this.activeRoot;
+		if (root) {
+			this.app.provide(FULATE_ROOT_KEY, root);
+			const overlay = getFulateOverlay(root);
+			if (overlay) this.app.provide(FULATE_OVERLAY_KEY, overlay);
+		}
+		this.app.provide(VUE_SHAPE_SIZE_KEY, this.sizeRef);
+		this.app.mount(markRaw(this));
+	}
+	unmountVue() {
+		if (this.app) {
+			this.app.unmount();
+			this.app = null;
+			this.componentPropsRef = null;
+			this.sizeRef = null;
+		}
+	}
+	/** 采用完整 component props whole-value；不合并字段，同一引用为 noop。 */
+	setComponentProps(componentProps) {
+		if (this.componentProps === componentProps) return this;
+		this.componentProps = componentProps;
+		if (this.componentPropsRef) this.componentPropsRef.value = componentProps;
+		return this;
+	}
+	onPropertiesChanged(current, changes) {
+		super.onPropertiesChanged(current, changes);
+		if (changes.has("width") || changes.has("height")) this.syncSize();
+		this.syncComponentProps(current);
+	}
+	syncSize() {
+		if (this.sizeRef) {
+			if (!isUndefined(this.width)) this.sizeRef.width = this.width;
+			if (!isUndefined(this.height)) this.sizeRef.height = this.height;
+		}
+	}
+	syncComponentProps(properties = this.properties) {
+		if (this.componentPropsResolver) this.setComponentProps(this.componentPropsResolver(properties));
+	}
+	/** manual 模式保存 component metadata；mapped 模式只保存 Properties。 */
+	toJSON() {
+		const json = super.toJSON();
+		delete json.children;
+		if (this.componentPropsResolver) return json;
+		return {
+			...json,
+			component: this.compName,
+			componentProps: structuredClone(this.componentProps)
+		};
+	}
+};
+var vueClipboardPlugin = {
+	type: "vue-component",
+	deserialize(data) {
+		const { type: _type, children: _children, component, componentProps, ...shapeProps } = data;
+		const comp = vueCompRegistry.get(component);
+		if (!comp) return;
+		return fromVueToFulate(comp, shapeProps, componentProps);
+	}
+};
+/** 从彼此独立的 Rectangle options 和 Vue component props 创建 VueShape。 */
+function fromVueToFulate(comp, options = {}, componentProps = {}) {
+	return markRaw(new VueShape(options, componentProps)).bindComponent(comp);
+}
+//#endregion
+export { FTransition, FULATE_HOST_KEY, FULATE_OVERLAY_KEY, FULATE_ROOT_KEY, VUE_SHAPE_SIZE_KEY, VueShape, createApp, fromVueToFulate, getRegisteredElement, getVueComponent, registerElement, registerVueComponent, registerVueOverlay, useFulateHost, vueClipboardPlugin };

package/dist/renderer.d.ts

@@ -0,0 +1,5 @@
+import { Element } from "@fulate/core";
+export type ElementConstructor<T extends Element = Element> = new (options?: any) => T;
+export declare function registerElement(type: string, Constructor: ElementConstructor): void;
+export declare function getRegisteredElement(type: string): ElementConstructor<Element<import("packages/core/src").ElementProperties, import("packages/core/src").BaseElementOption<any>, Partial<Omit<import("packages/core/src").BaseElementOption<any>, "key" | "children">>>>;
+export declare const render: import("@vue/runtime-core").RootRenderFunction<Element<import("packages/core/src").ElementProperties, import("packages/core/src").BaseElementOption<any>, Partial<Omit<import("packages/core/src").BaseElementOption<any>, "key" | "children">>>>, baseCreateApp: import("@vue/runtime-core").CreateAppFunction<Element<import("packages/core/src").ElementProperties, import("packages/core/src").BaseElementOption<any>, Partial<Omit<import("packages/core/src").BaseElementOption<any>, "key" | "children">>>>;

package/dist/transition.d.ts

@@ -0,0 +1,74 @@
+import { type BaseTransitionProps, type PropType } from "@vue/runtime-core";
+export declare const FTransition: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<BaseTransitionProps["mode"]>;
+        default: any;
+    };
+    enterFrom: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    enterTo: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    leaveTo: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("enter" | "leave" | "beforeEnter" | "afterEnter" | "enterCancelled" | "beforeLeave" | "afterLeave" | "leaveCancelled" | "beforeAppear" | "appear" | "afterAppear" | "appearCancelled")[], "enter" | "leave" | "beforeEnter" | "afterEnter" | "enterCancelled" | "beforeLeave" | "afterLeave" | "leaveCancelled" | "beforeAppear" | "appear" | "afterAppear" | "appearCancelled", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<BaseTransitionProps["mode"]>;
+        default: any;
+    };
+    enterFrom: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    enterTo: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    leaveTo: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onEnter?: (...args: any[]) => any;
+    onLeave?: (...args: any[]) => any;
+    onBeforeEnter?: (...args: any[]) => any;
+    onAfterEnter?: (...args: any[]) => any;
+    onEnterCancelled?: (...args: any[]) => any;
+    onBeforeLeave?: (...args: any[]) => any;
+    onAfterLeave?: (...args: any[]) => any;
+    onLeaveCancelled?: (...args: any[]) => any;
+    onBeforeAppear?: (...args: any[]) => any;
+    onAppear?: (...args: any[]) => any;
+    onAfterAppear?: (...args: any[]) => any;
+    onAppearCancelled?: (...args: any[]) => any;
+}>, {
+    duration: number;
+    mode: "in-out" | "out-in" | "default";
+    appear: boolean;
+    enterFrom: Record<string, any>;
+    enterTo: Record<string, any>;
+    leaveTo: Record<string, any>;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/vue-shape.d.ts

@@ -0,0 +1,44 @@
+import { type ElementJSON, type ElementTransformClass, type Layer, type PropertyChanges, type Root } from "@fulate/core";
+import { Rectangle, RectangleProperties, type RectangleOption } from "@fulate/ui";
+import { type Component } from "@vue/runtime-core";
+export declare function registerVueComponent(name: string, comp: Component): void;
+export declare function getVueComponent(name: string): Component | undefined;
+/** 将当前 effective Properties 映射为完整 Vue component props。 */
+export type VueComponentPropsResolver<P extends RectangleProperties = RectangleProperties> = (properties: Readonly<P>) => Record<string, unknown>;
+export type VueShapeJSON<O extends RectangleOption<any> = RectangleOption<any>> = ElementJSON<O> & {
+    component?: string;
+    componentProps?: Record<string, unknown>;
+};
+export declare class VueShape<P extends RectangleProperties = RectangleProperties, O extends RectangleOption<any> = RectangleOption<any>> extends Rectangle<P, O> {
+    readonly type: string;
+    private comp;
+    private compName;
+    private componentProps;
+    private componentPropsResolver?;
+    private componentPropsRef;
+    private sizeRef;
+    private app;
+    constructor(options?: NoInfer<O>, componentProps?: Record<string, unknown>, properties?: P, Transform?: ElementTransformClass);
+    /**
+     * 绑定一次 Vue component；提供 resolver 时，Properties 成为 component props 唯一真源。
+     */
+    bindComponent(comp: Component, resolveComponentProps?: VueComponentPropsResolver<P>): this;
+    protected onActivate(root: Root | null, layer: Layer | null): void;
+    protected onDeactivate(root: Root | null, layer: Layer | null): void;
+    protected onUnmount(): void;
+    private mountVue;
+    private unmountVue;
+    /** 采用完整 component props whole-value；不合并字段，同一引用为 noop。 */
+    setComponentProps(componentProps: Record<string, unknown>): this;
+    protected onPropertiesChanged(current: P, changes: PropertyChanges): void;
+    private syncSize;
+    private syncComponentProps;
+    /** manual 模式保存 component metadata；mapped 模式只保存 Properties。 */
+    toJSON(): VueShapeJSON<O>;
+}
+export declare const vueClipboardPlugin: {
+    readonly type: "vue-component";
+    readonly deserialize: (data: Record<string, any>) => VueShape<RectangleProperties, RectangleOption<any>>;
+};
+/** 从彼此独立的 Rectangle options 和 Vue component props 创建 VueShape。 */
+export declare function fromVueToFulate(comp: Component, options?: RectangleOption<VueShape>, componentProps?: Record<string, unknown>): VueShape;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@fulate/vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@fulate/core": "*",
+    "@fulate/ui": "*",
+    "@vue/runtime-core": "^3.5.0",
+    "lodash-es": "^4.17.22"
+  }
+}