@composy/layout-vue 0.0.1

package/dist/index.js

@@ -0,0 +1,2665 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@composy/layout-runtime"), require("@composy/layout-core"), require("@composy/layout-editor"), require("gridstack"), require("gridstack/dist/gridstack.min.css"), require("lucide"), require("lucide-vue-next"), require("@composy/layout-compiler"), require("@composy/layout-gridstack")) : typeof define === "function" && define.amd ? define([
+		"exports",
+		"vue",
+		"@composy/layout-runtime",
+		"@composy/layout-core",
+		"@composy/layout-editor",
+		"gridstack",
+		"gridstack/dist/gridstack.min.css",
+		"lucide",
+		"lucide-vue-next",
+		"@composy/layout-compiler",
+		"@composy/layout-gridstack"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignLayoutVue = {}, global.Vue, global.ComposyLayoutRuntime, global.ComposyLayoutCore, global.ComposyLayoutEditor, global.Gridstack, global["gridstack/dist/gridstack"].min.css, global.Lucide, global.LucideVueNext, global.ComposyLayoutCompiler, global.ComposyLayoutGridstack));
+})(this, function(exports, vue, _composy_layout_runtime, _composy_layout_core, _composy_layout_editor, gridstack, gridstack_dist_gridstack_min_css, lucide, lucide_vue_next, _composy_layout_compiler, _composy_layout_gridstack) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/components/material-renderer.ts
+	function resolveRegistry(source) {
+		if (!source) return void 0;
+		if (Array.isArray(source)) return (0, _composy_layout_core.createMaterialRegistry)(source);
+		return source;
+	}
+	function resolveMaterialDefinition(materials, type) {
+		return resolveRegistry(materials)?.get(type);
+	}
+	function renderMaterialFallback(materials, item, placement, breakpointId) {
+		const material = resolveMaterialDefinition(materials, item.type);
+		const context = {
+			item,
+			placement,
+			breakpointId
+		};
+		const vueRenderer = material?.renderers?.vue;
+		if (vueRenderer?.component) return (0, vue.h)(vueRenderer.component, {
+			...item.props ?? {},
+			...vueRenderer.tagName ? { is: vueRenderer.tagName } : {}
+		});
+		const webComponentRenderer = material?.renderers?.webcomponent;
+		if (webComponentRenderer?.tagName) return (0, vue.h)(webComponentRenderer.tagName, {
+			...item.props ?? {},
+			materialProps: { ...item.props ?? {} }
+		});
+		const htmlRenderer = material?.renderers?.html;
+		if (htmlRenderer?.render) {
+			const rendered = htmlRenderer.render(context);
+			if (typeof rendered === "string") return (0, vue.h)("div", { innerHTML: sanitizeMarkup(rendered) });
+			return rendered;
+		}
+		if (htmlRenderer?.tagName) return (0, vue.h)(htmlRenderer.tagName, { ...item.props ?? {} });
+	}
+	function renderMaterialForTarget(materials, item, target, placement, breakpointId = "desktop") {
+		const material = resolveMaterialDefinition(materials, item.type);
+		const props = { ...item.props ?? {} };
+		if (target === "vue") {
+			const renderer = material?.renderers?.vue;
+			if (renderer?.component) return (0, vue.h)(renderer.component, props);
+		} else {
+			const renderer = material?.renderers?.webcomponent;
+			if (renderer?.tagName) return (0, vue.h)(renderer.tagName, {
+				...props,
+				materialProps: props,
+				onVnodeMounted: (vnode) => {
+					const el = vnode.el;
+					if (el && "materialProps" in el) el.materialProps = props;
+				},
+				onVnodeUpdated: (vnode) => {
+					const el = vnode.el;
+					if (el && "materialProps" in el) el.materialProps = props;
+				}
+			});
+		}
+		const htmlRenderer = material?.renderers?.html;
+		if (htmlRenderer?.render) {
+			const rendered = htmlRenderer.render({
+				item,
+				placement: placement ?? item.layout[breakpointId] ?? {
+					x: 0,
+					y: 0,
+					w: 1,
+					h: 1
+				},
+				breakpointId
+			});
+			if (typeof rendered === "string") return (0, vue.h)("div", { innerHTML: sanitizeMarkup(rendered) });
+			return rendered;
+		}
+		if (htmlRenderer?.tagName) return (0, vue.h)(htmlRenderer.tagName, props);
+		return renderMaterialFallback(materials, item, placement ?? item.layout[breakpointId] ?? {
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1
+		}, breakpointId);
+	}
+	function sanitizeMarkup(value) {
+		return value.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi, "");
+	}
+	//#endregion
+	//#region src/components/LGrid.ts
+	const LGrid = (0, vue.defineComponent)({
+		name: "LGrid",
+		props: {
+			document: {
+				type: Object,
+				required: true
+			},
+			breakpoint: {
+				type: String,
+				default: void 0
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			}
+		},
+		setup(props, { slots, expose }) {
+			const root = (0, vue.ref)();
+			const activeBreakpoint = (0, vue.ref)(props.breakpoint ?? props.document.defaultBreakpointId);
+			const resolved = (0, vue.computed)(() => props.document.breakpoints.find((bp) => bp.id === activeBreakpoint.value) ?? props.document.breakpoints[0]);
+			const gridStyle = (0, vue.computed)(() => (0, _composy_layout_runtime.resolveGridStyle)(props.document, resolved.value.id));
+			const resize = () => {
+				if (props.breakpoint || !root.value) return;
+				const width = root.value.getBoundingClientRect().width;
+				const match = props.document.breakpoints.find((bp) => (bp.minWidth === void 0 || width >= bp.minWidth) && (bp.maxWidth === void 0 || width < bp.maxWidth));
+				activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId;
+			};
+			let observer;
+			(0, vue.onMounted)(() => {
+				if (typeof ResizeObserver !== "undefined" && root.value) {
+					observer = new ResizeObserver(resize);
+					observer.observe(root.value);
+				}
+				resize();
+			});
+			(0, vue.onBeforeUnmount)(() => observer?.disconnect());
+			(0, vue.watch)(() => props.breakpoint, (value) => {
+				activeBreakpoint.value = value ?? props.document.defaultBreakpointId;
+			});
+			expose({ getBreakpoint: () => activeBreakpoint.value });
+			return () => (0, vue.h)("div", {
+				ref: root,
+				class: "ldesign-layout-grid",
+				style: gridStyle.value,
+				dir: gridStyle.value.direction
+			}, props.document.items.map((item) => {
+				const placement = item.layout[activeBreakpoint.value];
+				if (!placement || placement.hidden) return null;
+				return (0, vue.h)("div", {
+					class: "ldesign-layout-item",
+					"data-layout-item-id": item.id,
+					"data-layout-type": item.type,
+					style: (0, _composy_layout_runtime.resolveItemStyle)(item, activeBreakpoint.value),
+					tabindex: props.readonly ? void 0 : 0
+				}, slots.item?.({
+					item,
+					placement,
+					breakpointId: activeBreakpoint.value
+				}) ?? slots.default?.({
+					item,
+					placement,
+					breakpointId: activeBreakpoint.value
+				}) ?? renderMaterialForTarget(props.materials, item, props.target, placement, activeBreakpoint.value));
+			}));
+		}
+	});
+	//#endregion
+	//#region src/components/LGridItem.ts
+	const LGridItem = (0, vue.defineComponent)({
+		name: "LGridItem",
+		props: {
+			item: {
+				type: Object,
+				required: true
+			},
+			placement: {
+				type: Object,
+				required: true
+			},
+			breakpointId: {
+				type: String,
+				required: true
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			}
+		},
+		setup(props, { slots }) {
+			return () => (0, vue.h)("div", {
+				class: "ldesign-layout-item",
+				"data-layout-item-id": props.item.id,
+				"data-layout-type": props.item.type
+			}, slots.default?.({
+				item: props.item,
+				placement: props.placement,
+				breakpointId: props.breakpointId
+			}) ?? renderMaterialForTarget(props.materials, props.item, props.target, props.placement, props.breakpointId));
+		}
+	});
+	//#endregion
+	//#region src/components/LMaterialRenderer.ts
+	const LMaterialRenderer = (0, vue.defineComponent)({
+		name: "LMaterialRenderer",
+		props: {
+			item: {
+				type: Object,
+				required: true
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			},
+			placement: {
+				type: Object,
+				default: void 0
+			},
+			breakpointId: {
+				type: String,
+				default: "desktop"
+			}
+		},
+		setup(props, { attrs }) {
+			return () => {
+				const rendered = renderMaterialForTarget(props.materials, props.item, props.target, props.placement, props.breakpointId);
+				if (!rendered) return null;
+				return (0, vue.h)(rendered, attrs);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/LLayoutEditor.ts
+	const LLayoutEditor = (0, vue.defineComponent)({
+		name: "LLayoutEditor",
+		props: {
+			document: {
+				type: Object,
+				required: true
+			},
+			engine: {
+				type: Object,
+				required: true
+			},
+			mode: {
+				type: String,
+				default: "edit"
+			},
+			preview: Object,
+			materials: {
+				type: Object,
+				default: void 0
+			}
+		},
+		emits: [
+			"update:document",
+			"change",
+			"ready"
+		],
+		setup(props, { slots, emit, expose }) {
+			const editor = (0, vue.shallowRef)((0, _composy_layout_editor.createLayoutEditor)({
+				document: props.document,
+				engine: props.engine,
+				materials: props.materials,
+				preview: props.preview
+			}));
+			let lastEmittedDocument = JSON.stringify(props.document);
+			(0, vue.onMounted)(() => {
+				editor.value.on("document:change", (event) => {
+					lastEmittedDocument = JSON.stringify(event.document);
+					emit("update:document", event.document);
+					emit("change", event);
+				});
+				editor.value.mount();
+				editor.value.setMode(props.mode);
+				emit("ready", editor.value);
+			});
+			(0, vue.watch)(() => props.document, (value) => {
+				const next = JSON.stringify(value);
+				if (next !== lastEmittedDocument) {
+					editor.value.load(value);
+					lastEmittedDocument = next;
+				}
+			});
+			(0, vue.watch)(() => props.mode, (value) => editor.value.setMode(value));
+			const onKeydown = (event) => {
+				editor.value.handleKeyboard(event);
+			};
+			(0, vue.onBeforeUnmount)(() => editor.value.destroy());
+			expose({ editor });
+			return () => (0, vue.h)("div", {
+				class: "ldesign-layout-editor",
+				"data-layout-mode": props.mode,
+				"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Delete Control+C Control+V Control+X Control+D",
+				onKeydown
+			}, slots.default?.({ editor: editor.value }));
+		}
+	});
+	//#endregion
+	//#region src/components/LMetricCard.ts
+	const LMetricCard = (0, vue.defineComponent)({
+		name: "LMetricCard",
+		props: {
+			title: {
+				type: String,
+				default: "数据指标"
+			},
+			value: {
+				type: [String, Number],
+				default: void 0
+			}
+		},
+		setup(props) {
+			return () => (0, vue.h)("article", {
+				class: "layout-card",
+				"data-layout-card": ""
+			}, [
+				(0, vue.h)("div", { class: "layout-card__meta" }, [(0, vue.h)("span", { class: "layout-card__type" }, "数据指标"), (0, vue.h)("span", { class: "layout-card__status" }, "已配置")]),
+				(0, vue.h)("h3", { class: "layout-card__title" }, props.title),
+				props.value === void 0 ? null : (0, vue.h)("strong", { class: "layout-card__value" }, Number(props.value).toLocaleString("zh-CN")),
+				(0, vue.h)("div", { class: "layout-card__footer" }, [(0, vue.h)("span", null, "实时数据"), (0, vue.h)("span", { class: "layout-card__spark" }, "趋势稳定")])
+			]);
+		}
+	});
+	//#endregion
+	//#region src/components/LTrendCard.ts
+	const LTrendCard = (0, vue.defineComponent)({
+		name: "LTrendCard",
+		props: { title: {
+			type: String,
+			default: "趋势图表"
+		} },
+		setup(props) {
+			return () => (0, vue.h)("article", {
+				class: "layout-card",
+				"data-layout-card": ""
+			}, [
+				(0, vue.h)("div", { class: "layout-card__meta" }, [(0, vue.h)("span", { class: "layout-card__type" }, "趋势图表"), (0, vue.h)("span", { class: "layout-card__status" }, "已配置")]),
+				(0, vue.h)("h3", { class: "layout-card__title" }, props.title),
+				(0, vue.h)("span", {
+					class: "layout-card__chart",
+					"aria-hidden": "true"
+				}, Array.from({ length: 5 }, (_, index) => (0, vue.h)("i", { key: index }))),
+				(0, vue.h)("div", { class: "layout-card__footer" }, [(0, vue.h)("span", null, "实时数据"), (0, vue.h)("span", { class: "layout-card__spark" }, "趋势稳定")])
+			]);
+		}
+	});
+	//#endregion
+	//#region src/components/LLayoutWorkspace.vue?vue&type=script&setup=true&lang.ts
+	const _hoisted_1 = ["data-theme", "data-development-framework"];
+	const _hoisted_2 = { class: "topbar" };
+	const _hoisted_3 = { class: "brand" };
+	const _hoisted_4 = {
+		class: "brand-mark",
+		"aria-hidden": "true"
+	};
+	const _hoisted_5 = ["aria-expanded", "title"];
+	const _hoisted_6 = {
+		key: 0,
+		class: "custom-select__menu development-mode__menu",
+		role: "listbox"
+	};
+	const _hoisted_7 = ["aria-selected", "onClick"];
+	const _hoisted_8 = {
+		class: "topbar-center",
+		"aria-hidden": "true",
+		style: { "display": "none" }
+	};
+	const _hoisted_9 = {
+		class: "route-tabs",
+		"aria-label": "工作区模式"
+	};
+	const _hoisted_10 = [
+		"aria-current",
+		"aria-label",
+		"title",
+		"onClick"
+	];
+	const _hoisted_11 = {
+		class: "breakpoint-tabs",
+		"aria-label": "画布尺寸"
+	};
+	const _hoisted_12 = [
+		"aria-pressed",
+		"aria-label",
+		"title",
+		"onClick"
+	];
+	const _hoisted_13 = { class: "actions" };
+	const _hoisted_14 = ["disabled"];
+	const _hoisted_15 = ["disabled"];
+	const _hoisted_16 = ["disabled"];
+	const _hoisted_17 = [
+		"aria-label",
+		"title",
+		"disabled"
+	];
+	const _hoisted_18 = [
+		"aria-label",
+		"title",
+		"disabled"
+	];
+	const _hoisted_19 = [
+		"aria-label",
+		"title",
+		"disabled"
+	];
+	const _hoisted_20 = ["aria-label", "title"];
+	const _hoisted_21 = [
+		"aria-pressed",
+		"aria-label",
+		"title"
+	];
+	const _hoisted_22 = { class: "workspace" };
+	const _hoisted_23 = {
+		class: "materials panel-scroll",
+		"data-layout-panel": "materials",
+		"aria-label": "物料面板"
+	};
+	const _hoisted_24 = { class: "panel-heading" };
+	const _hoisted_25 = { class: "panel-count" };
+	const _hoisted_26 = { class: "material-toolbar" };
+	const _hoisted_27 = { class: "material-search" };
+	const _hoisted_28 = ["onKeydown"];
+	const _hoisted_29 = ["aria-expanded", "title"];
+	const _hoisted_30 = {
+		key: 0,
+		class: "custom-select__menu",
+		role: "listbox"
+	};
+	const _hoisted_31 = ["aria-selected"];
+	const _hoisted_32 = ["aria-selected", "onClick"];
+	const _hoisted_33 = { class: "material-result-summary" };
+	const _hoisted_34 = { key: 0 };
+	const _hoisted_35 = {
+		key: 0,
+		class: "material-empty"
+	};
+	const _hoisted_36 = [
+		"data-material-type",
+		"data-layout-material",
+		"data-layout-props",
+		"aria-label",
+		"onClick",
+		"onKeydown"
+	];
+	const _hoisted_37 = {
+		class: "material-icon material-icon--metric",
+		"aria-hidden": "true"
+	};
+	const _hoisted_38 = { class: "material-copy" };
+	const _hoisted_39 = { class: "material-card-meta" };
+	const _hoisted_40 = { class: "material-size" };
+	const _hoisted_41 = { class: "material-renderer-badges" };
+	const _hoisted_42 = ["title"];
+	const _hoisted_43 = { class: "material-card-actions" };
+	const _hoisted_44 = ["onClick"];
+	const _hoisted_45 = {
+		class: "material-add",
+		"aria-hidden": "true"
+	};
+	const _hoisted_50 = {
+		class: "canvas panel-scroll",
+		"data-layout-panel": "canvas",
+		"aria-label": "布局画布"
+	};
+	const _hoisted_51 = {
+		class: "canvas-toolbar",
+		"aria-label": "画布操作"
+	};
+	const _hoisted_52 = ["aria-expanded"];
+	const _hoisted_53 = {
+		key: 0,
+		class: "custom-select__menu",
+		role: "listbox"
+	};
+	const _hoisted_54 = [
+		"aria-selected",
+		"aria-label",
+		"onClick"
+	];
+	const _hoisted_55 = { class: "custom-select__option-meta" };
+	const _hoisted_56 = ["aria-label", "title"];
+	const _hoisted_57 = { class: "canvas-toolbar__group" };
+	const _hoisted_58 = {
+		class: "canvas-zoom-label",
+		"aria-live": "polite"
+	};
+	const _hoisted_59 = [
+		"data-canvas-width",
+		"data-canvas-height",
+		"data-canvas-orientation"
+	];
+	const _hoisted_60 = {
+		class: "editor-stage",
+		"aria-label": "可视化编辑画布"
+	};
+	const _hoisted_61 = { class: "stage-header" };
+	const _hoisted_62 = { class: "stage-badge" };
+	const _hoisted_63 = {
+		class: "preview-stage",
+		"aria-label": "组件预览画布"
+	};
+	const _hoisted_64 = ["aria-label", "onClick"];
+	const _hoisted_65 = ["data-preview-framework"];
+	const _hoisted_66 = { class: "stage-header" };
+	const _hoisted_67 = { class: "stage-badge" };
+	const _hoisted_68 = ["data-preview-framework"];
+	const _hoisted_69 = { class: "stage-header" };
+	const _hoisted_70 = { class: "stage-badge" };
+	const _hoisted_71 = {
+		class: "inspectors panel-scroll",
+		"data-layout-panel": "inspector",
+		"aria-label": "代码检查面板"
+	};
+	const _hoisted_72 = { class: "inspector-heading" };
+	const _hoisted_73 = ["aria-label", "title"];
+	const _hoisted_74 = {
+		class: "code-block",
+		"data-code-output": ""
+	};
+	const _hoisted_75 = ["innerHTML"];
+	const _hoisted_76 = { class: "code-status" };
+	const _hoisted_77 = ["data-preview-framework", "data-theme"];
+	const _hoisted_78 = { class: "preview-dialog__panel" };
+	const _hoisted_79 = { class: "preview-dialog__header" };
+	const _hoisted_80 = { class: "preview-dialog__header-meta" };
+	const _hoisted_81 = { class: "stage-badge" };
+	const _hoisted_82 = { class: "preview-dialog__body" };
+	const _hoisted_83 = { class: "preview-dialog__canvas" };
+	const _hoisted_84 = [
+		"data-material-code-framework",
+		"data-material-code-type",
+		"data-theme"
+	];
+	const _hoisted_85 = { class: "preview-dialog__panel material-code-dialog__panel" };
+	const _hoisted_86 = { class: "preview-dialog__header" };
+	const _hoisted_87 = { id: "material-code-title" };
+	const _hoisted_88 = { class: "material-code-dialog__subtitle" };
+	const _hoisted_89 = { class: "preview-dialog__header-meta" };
+	const _hoisted_90 = { class: "stage-badge" };
+	const _hoisted_91 = { class: "preview-dialog__body material-code-dialog__body" };
+	const _hoisted_92 = { class: "code-block material-code-dialog__code" };
+	const _hoisted_93 = ["innerHTML"];
+	const _hoisted_94 = { class: "preview-dialog__footer" };
+	const _hoisted_95 = { class: "material-code-dialog__actions" };
+	const _hoisted_96 = ["aria-label", "title"];
+	var LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "LLayoutWorkspace",
+		props: {
+			document: {
+				type: Object,
+				required: false
+			},
+			materials: {
+				type: [Object, Array],
+				required: false
+			},
+			theme: {
+				type: String,
+				required: false
+			}
+		},
+		emits: ["update:document", "change"],
+		setup(__props, { emit: __emit }) {
+			const workspaceProps = __props;
+			const workspaceEmit = __emit;
+			const routes = [
+				{
+					id: "editor",
+					label: "编辑",
+					description: "可视化编辑工作区"
+				},
+				{
+					id: "vanilla",
+					label: "原生",
+					description: "原生运行时渲染"
+				},
+				{
+					id: "runtime",
+					label: "预览",
+					description: "网格布局运行时预览"
+				},
+				{
+					id: "vue",
+					label: "组件",
+					description: "组件适配器"
+				}
+			];
+			const breakpointIcons = {
+				desktop: lucide_vue_next.Monitor,
+				tablet: lucide_vue_next.Tablet,
+				mobile: lucide_vue_next.Smartphone
+			};
+			const routeIcons = {
+				editor: lucide_vue_next.Grid2X2,
+				vanilla: lucide_vue_next.Code2,
+				runtime: lucide_vue_next.Eye,
+				vue: lucide_vue_next.PanelsTopLeft
+			};
+			const developmentFrameworks = [{
+				id: "webcomponent",
+				label: "原生",
+				description: "原生 Web Component 物料",
+				icon: lucide_vue_next.Code2
+			}, {
+				id: "vue",
+				label: "Vue 3",
+				description: "Vue 3 组件物料",
+				icon: lucide_vue_next.PanelsTopLeft
+			}];
+			function developmentFrameworkLabel(framework) {
+				if (framework === "webcomponent") return "原生";
+				return "Vue 3";
+			}
+			function escapeHtml(value) {
+				return value.replace(/[&<>'"]/g, (character) => ({
+					"&": "&amp;",
+					"<": "&lt;",
+					">": "&gt;",
+					"'": "&#39;",
+					"\"": "&quot;"
+				})[character] ?? character);
+			}
+			function itemTitle(item) {
+				return String(item.props?.title ?? item.id);
+			}
+			function materialLabel(type) {
+				return materials.get(type)?.title ?? materials.get(type)?.label ?? type;
+			}
+			function formatMarkup(value) {
+				const tokens = value.replace(/></g, ">\n<").split("\n");
+				let depth = 0;
+				return tokens.map((token) => {
+					const line = token.trim();
+					if (!line) return "";
+					if (line.startsWith("</")) depth = Math.max(0, depth - 1);
+					const formatted = `${"  ".repeat(depth)}${line}`;
+					if (line.startsWith("<") && !line.startsWith("</") && !line.startsWith("<!") && !line.startsWith("<?") && !line.endsWith("/>") && !/^<(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\b/i.test(line)) depth += 1;
+					return formatted;
+				}).filter(Boolean).join("\n");
+			}
+			function formatCss(value) {
+				let depth = 0;
+				return value.replace(/\s*\{\s*/g, " {\n").replace(/\s*;\s*/g, ";\n").replace(/\s*}\s*/g, "\n}\n").split("\n").map((line) => line.trim()).filter(Boolean).map((line) => {
+					if (line.startsWith("}")) depth = Math.max(0, depth - 1);
+					const formatted = `${"  ".repeat(depth)}${line}`;
+					if (line.endsWith("{")) depth += 1;
+					return formatted;
+				}).join("\n");
+			}
+			function breakpointLabel(id) {
+				return id === "desktop" ? "桌面" : id === "tablet" ? "平板" : "手机";
+			}
+			function lucideMarkup(name) {
+				if (typeof document === "undefined") return "";
+				const element = (0, lucide.createElement)(lucide.icons[name]);
+				element.setAttribute("width", "13");
+				element.setAttribute("height", "13");
+				element.setAttribute("stroke-width", "1.9");
+				element.setAttribute("aria-hidden", "true");
+				return element.outerHTML;
+			}
+			function renderCardMarkup(item, options = {}) {
+				const type = materialLabel(item.type);
+				const title = escapeHtml(itemTitle(item));
+				const value = item.props?.value;
+				const valueMarkup = value === void 0 ? `<span class="layout-card__chart" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>` : `<strong class="layout-card__value">${escapeHtml(new Intl.NumberFormat("zh-CN").format(Number(value)))}</strong>`;
+				return `<article class="layout-card" data-layout-card data-layout-type="${escapeHtml(item.type)}">
+    ${options.interactive ? `<div class="layout-card__actions" data-layout-actions>
+      <button class="layout-card__action" type="button" data-layout-action="copy" aria-disabled="false" aria-label="\u590D\u5236\u7269\u6599" title="\u590D\u5236\u7269\u6599">${lucideMarkup("Copy")}</button>
+      <button class="layout-card__action" type="button" data-layout-action="delete" aria-disabled="false" aria-label="\u5220\u9664\u7269\u6599" title="\u5220\u9664\u7269\u6599">${lucideMarkup("Trash2")}</button>
+      <button class="layout-card__action" type="button" data-layout-action="lock" aria-disabled="false" aria-label="${item.state?.locked ? "解锁物料" : "锁定物料"}" title="${item.state?.locked ? "解锁物料" : "锁定物料"}">${lucideMarkup(item.state?.locked ? "Unlock" : "Lock")}</button>
+    </div>` : ""}
+    <div class="layout-card__meta"><span class="layout-card__type">${escapeHtml(type)}</span><span class="layout-card__status">\u5DF2\u914D\u7F6E</span></div>
+    <h3 class="layout-card__title">${title}</h3>
+    ${valueMarkup}
+    <div class="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span class="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div>
+  </article>`;
+			}
+			function renderExportMaterialMarkup(item) {
+				const tagName = (materials.get(item.type)?.renderers?.webcomponent)?.tagName;
+				if (!tagName || !/^[a-z][a-z0-9.-]*$/i.test(tagName)) return renderCardMarkup(item);
+				const attributes = Object.entries(item.props ?? {}).filter(([, value]) => value !== void 0 && value !== null).filter(([, value]) => typeof value !== "object" && typeof value !== "function").map(([key, value]) => `${key.replace(/[^a-zA-Z0-9:_.-]/g, "-")}="${escapeHtml(String(value))}"`).join(" ");
+				return `<${tagName}${attributes ? ` ${attributes}` : ""}></${tagName}>`;
+			}
+			function ensureWorkspaceMaterialElement(tagName, type) {
+				if (typeof customElements === "undefined" || !/^[a-z][a-z0-9.-]*$/i.test(tagName) || customElements.get(tagName)) return;
+				class LayoutMaterialElement extends HTMLElement {
+					constructor() {
+						super(...arguments);
+						this.props = {};
+					}
+					static get observedAttributes() {
+						return ["title", "value"];
+					}
+					set materialProps(value) {
+						this.props = { ...value ?? {} };
+						this.render();
+					}
+					connectedCallback() {
+						this.render();
+					}
+					attributeChangedCallback() {
+						if (!Object.keys(this.props).length) this.render();
+					}
+					attributeProps() {
+						const result = {};
+						for (const attribute of Array.from(this.attributes)) {
+							if (attribute.name === "class" || attribute.name === "style") continue;
+							result[attribute.name] = attribute.name === "value" && attribute.value !== "" && !Number.isNaN(Number(attribute.value)) ? Number(attribute.value) : attribute.value;
+						}
+						return result;
+					}
+					render() {
+						const props = Object.keys(this.props).length ? this.props : this.attributeProps();
+						this.style.display = "block";
+						this.style.width = "100%";
+						this.style.height = "100%";
+						this.innerHTML = renderCardMarkup({
+							id: `native-${type}`,
+							type,
+							layout: {},
+							props
+						});
+					}
+				}
+				customElements.define(tagName, LayoutMaterialElement);
+			}
+			function setNativeRuntimeCard(shell, item) {
+				const tagName = (materials.get(item.type)?.renderers?.webcomponent)?.tagName;
+				shell.className = "layout-item-shell";
+				shell.dataset.layoutType = item.type;
+				shell.dataset.materialRenderer = "webcomponent";
+				if (!tagName || !/^[a-z][a-z0-9.-]*$/i.test(tagName)) {
+					shell.innerHTML = renderCardMarkup(item);
+					return;
+				}
+				ensureWorkspaceMaterialElement(tagName, item.type);
+				const element = shell.ownerDocument.createElement(tagName);
+				element.materialProps = { ...item.props ?? {} };
+				shell.replaceChildren(element);
+			}
+			function setRuntimeCard(shell, item) {
+				if (activeDevelopmentFramework.value === "webcomponent") {
+					setNativeRuntimeCard(shell, item);
+					return;
+				}
+				shell.className = "layout-item-shell";
+				shell.dataset.layoutType = item.type;
+				shell.dataset.materialRenderer = "vue";
+				shell.innerHTML = renderCardMarkup(item);
+			}
+			function parseRoute(value) {
+				const id = value.replace(/^#\/?/, "");
+				return routes.some((route) => route.id === id) ? id : "editor";
+			}
+			const builtinMaterials = [{
+				type: "metric",
+				order: 1,
+				title: "数据指标",
+				category: "data",
+				categoryLabel: "数据组件",
+				description: "数值与摘要",
+				keywords: [
+					"指标",
+					"数值",
+					"KPI"
+				],
+				tags: ["数据", "卡片"],
+				defaultLayout: {
+					w: 4,
+					h: 8
+				},
+				size: {
+					default: {
+						w: 4,
+						h: 8
+					},
+					min: {
+						w: 2,
+						h: 4
+					},
+					max: {
+						w: 12,
+						h: 20
+					},
+					step: {
+						w: 1,
+						h: 1
+					}
+				},
+				constraints: {
+					movable: true,
+					resizable: true
+				},
+				defaults: {
+					title: "新建指标",
+					value: 0
+				},
+				renderers: {
+					html: {
+						kind: "html",
+						tagName: "article"
+					},
+					webcomponent: {
+						kind: "webcomponent",
+						tagName: "ldesign-metric-card"
+					},
+					vue: {
+						kind: "vue",
+						package: "@composy/layout-vue",
+						exportName: "LMetricCard",
+						component: LMetricCard
+					}
+				}
+			}, {
+				type: "chart",
+				order: 2,
+				title: "趋势图表",
+				category: "visual",
+				categoryLabel: "可视化组件",
+				description: "变化与走向",
+				keywords: [
+					"趋势",
+					"图表",
+					"分析"
+				],
+				tags: ["可视化", "卡片"],
+				defaultLayout: {
+					w: 4,
+					h: 10
+				},
+				size: {
+					default: {
+						w: 4,
+						h: 10
+					},
+					min: {
+						w: 3,
+						h: 6
+					},
+					max: {
+						w: 12,
+						h: 24
+					},
+					step: {
+						w: 1,
+						h: 1
+					}
+				},
+				constraints: {
+					movable: true,
+					resizable: true
+				},
+				defaults: { title: "营收趋势" },
+				renderers: {
+					html: {
+						kind: "html",
+						tagName: "article"
+					},
+					webcomponent: {
+						kind: "webcomponent",
+						tagName: "ldesign-trend-card"
+					},
+					vue: {
+						kind: "vue",
+						package: "@composy/layout-vue",
+						exportName: "LTrendCard",
+						component: LTrendCard
+					}
+				}
+			}];
+			function resolveWorkspaceMaterials(input) {
+				if (!input) return (0, _composy_layout_core.createMaterialRegistry)(builtinMaterials);
+				if (!Array.isArray(input)) return input;
+				return (0, _composy_layout_core.createMaterialRegistry)(input);
+			}
+			const materials = resolveWorkspaceMaterials(workspaceProps.materials);
+			const initial = workspaceProps.document ?? (0, _composy_layout_core.createLayoutDocument)({
+				id: "layout-alpha-demo",
+				breakpoints: _composy_layout_core.responsiveWebBreakpoints.map((item) => ({ ...item })),
+				defaultBreakpointId: "desktop",
+				items: [
+					{
+						id: "sales",
+						type: "metric",
+						props: {
+							title: "月度销售额",
+							value: 12840
+						},
+						layout: {
+							desktop: {
+								x: 0,
+								y: 0,
+								w: 4,
+								h: 10
+							},
+							tablet: {
+								x: 0,
+								y: 0,
+								w: 4,
+								h: 10
+							},
+							mobile: {
+								x: 0,
+								y: 0,
+								w: 4,
+								h: 8
+							}
+						}
+					},
+					{
+						id: "orders",
+						type: "metric",
+						props: {
+							title: "待处理订单",
+							value: 86
+						},
+						layout: {
+							desktop: {
+								x: 4,
+								y: 0,
+								w: 4,
+								h: 10
+							},
+							tablet: {
+								x: 4,
+								y: 0,
+								w: 4,
+								h: 10
+							},
+							mobile: {
+								x: 0,
+								y: 8,
+								w: 4,
+								h: 8
+							}
+						}
+					},
+					{
+						id: "revenue",
+						type: "chart",
+						props: { title: "营收预测" },
+						layout: {
+							desktop: {
+								x: 8,
+								y: 0,
+								w: 4,
+								h: 18
+							},
+							tablet: {
+								x: 0,
+								y: 10,
+								w: 8,
+								h: 14
+							},
+							mobile: {
+								x: 0,
+								y: 16,
+								w: 4,
+								h: 12
+							}
+						}
+					}
+				]
+			});
+			const editorGrid = (0, vue.ref)();
+			const canvasViewport = (0, vue.ref)();
+			const runtimePreview = (0, vue.ref)();
+			const vanillaRuntime = (0, vue.ref)();
+			const previewDialogRuntime = (0, vue.ref)();
+			const materialQuery = (0, vue.ref)("");
+			const activeMaterialCategory = (0, vue.ref)();
+			const activeDevelopmentFramework = (0, vue.ref)("vue");
+			const materialElements = /* @__PURE__ */ new Map();
+			const materialSourceDisposers = /* @__PURE__ */ new Map();
+			const materialCategories = (0, vue.computed)(() => materials.getCategories());
+			const activeMaterialCategoryLabel = (0, vue.computed)(() => {
+				if (!activeMaterialCategory.value) return "全部分类";
+				return materialCategories.value.find((category) => category.id === activeMaterialCategory.value)?.label ?? "全部分类";
+			});
+			const activeDevelopmentFrameworkLabel = (0, vue.computed)(() => developmentFrameworkLabel(activeDevelopmentFramework.value));
+			const materialCategoryFilter = (0, vue.computed)({
+				get: () => activeMaterialCategory.value ?? "",
+				set: (value) => {
+					activeMaterialCategory.value = value || void 0;
+				}
+			});
+			const hasMaterialFilters = (0, vue.computed)(() => Boolean(materialQuery.value.trim()) || Boolean(activeMaterialCategory.value));
+			const visibleMaterials = (0, vue.computed)(() => materials.search({
+				query: materialQuery.value,
+				category: activeMaterialCategory.value,
+				framework: activeDevelopmentFramework.value
+			}));
+			const layout = (0, vue.ref)(structuredClone(initial));
+			const selected = (0, vue.ref)();
+			const selectedIds = (0, vue.ref)([]);
+			const activeBreakpoint = (0, vue.ref)("desktop");
+			const canvasOrientation = (0, vue.ref)("landscape");
+			const deviceMenuOpen = (0, vue.ref)(false);
+			const categoryMenuOpen = (0, vue.ref)(false);
+			const developmentModeMenuOpen = (0, vue.ref)(false);
+			const copied = (0, vue.ref)(false);
+			const previewMode = (0, vue.ref)(false);
+			const previewDialogOpen = (0, vue.ref)(false);
+			const materialCodeDialog = (0, vue.ref)();
+			const materialCodeCopied = (0, vue.ref)(false);
+			const activeRoute = (0, vue.ref)("editor");
+			const theme = (0, vue.ref)(workspaceProps.theme ?? "light");
+			const canvasZoom = (0, vue.ref)(1);
+			const canvasPan = (0, vue.ref)({
+				x: 0,
+				y: 0
+			});
+			const canvasTool = (0, vue.ref)("select");
+			const canvasPanning = (0, vue.ref)(false);
+			const canvasSpacePressed = (0, vue.ref)(false);
+			const canvasPanOrigin = (0, vue.ref)({
+				x: 0,
+				y: 0,
+				panX: 0,
+				panY: 0
+			});
+			let editor;
+			let vanillaRuntimeInstance;
+			let previewDialogRuntimeInstance;
+			let previousGridStackRenderCallback;
+			let interactionPreviewFrame;
+			const disposers = [];
+			const currentDocument = (0, vue.computed)(() => layout.value);
+			const canvasSize = (0, vue.computed)(() => {
+				return {
+					desktop: {
+						landscape: {
+							width: 1200,
+							height: 760
+						},
+						portrait: {
+							width: 760,
+							height: 1200
+						}
+					},
+					tablet: {
+						landscape: {
+							width: 1024,
+							height: 768
+						},
+						portrait: {
+							width: 768,
+							height: 1024
+						}
+					},
+					mobile: {
+						landscape: {
+							width: 844,
+							height: 390
+						},
+						portrait: {
+							width: 390,
+							height: 844
+						}
+					}
+				}[activeBreakpoint.value]?.[canvasOrientation.value] ?? {
+					width: 1200,
+					height: 760
+				};
+			});
+			const activeBreakpointIcon = (0, vue.computed)(() => breakpointIcons[activeBreakpoint.value] ?? lucide_vue_next.Monitor);
+			(0, vue.computed)(() => JSON.stringify(currentDocument.value, null, 2));
+			const compiledResult = (0, vue.computed)(() => (0, _composy_layout_compiler.compileLayout)(currentDocument.value, {
+				target: "html-css",
+				breakpointId: activeBreakpoint.value,
+				materials,
+				materialCompiler: {
+					supports: () => true,
+					compile: (item) => renderExportMaterialMarkup(item)
+				}
+			}));
+			const compiled = (0, vue.computed)(() => formatCss(compiledResult.value.css ?? ""));
+			const htmlSource = (0, vue.computed)(() => {
+				const result = compiledResult.value;
+				return `<style>
+${compiled.value}
+</style>
+
+${formatMarkup(result.html ?? "")}`;
+			});
+			(0, vue.computed)(() => `<script setup lang="ts">
+import { LGrid } from '@composy/layout-vue'
+import type { LayoutDocument } from '@composy/layout-core'
+
+const layoutDocument: LayoutDocument = ${JSON.stringify(currentDocument.value, null, 2)}
+<\/script>
+
+<template>
+  <LGrid :document="layoutDocument" breakpoint="${activeBreakpoint.value}">
+    <template #item="{ item }">
+      <article class="layout-card">
+        <div class="layout-card__meta">
+          <span class="layout-card__type">{{ item.type === 'metric' ? '\u6570\u636E\u6307\u6807' : '\u8D8B\u52BF\u56FE\u8868' }}</span>
+          <span class="layout-card__status">\u5DF2\u914D\u7F6E</span>
+        </div>
+        <h3 class="layout-card__title">{{ item.props.title }}</h3>
+        <strong v-if="item.props.value !== undefined" class="layout-card__value">
+          {{ Number(item.props.value).toLocaleString('zh-CN') }}
+        </strong>
+        <span v-else class="layout-card__chart" aria-hidden="true">
+
+          <i v-for="bar in 5" :key="bar" />
+        </span>
+        <div class="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span class="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div>
+      </article>
+    </template>
+  </LGrid>
+</template>`);
+			(0, vue.computed)(() => `import { Grid } from '@composy/layout-react'
+import type { LayoutDocument } from '@composy/layout-core'
+
+const layoutDocument: LayoutDocument = ${JSON.stringify(currentDocument.value, null, 2)}
+
+export function LayoutPreview() {
+  return (
+    <Grid document={layoutDocument} breakpoint="${activeBreakpoint.value}">
+      {({ item }) => (
+        <article className="layout-card">
+          <div className="layout-card__meta">
+            <span className="layout-card__type">{item.type === 'metric' ? '\u6570\u636E\u6307\u6807' : '\u8D8B\u52BF\u56FE\u8868'}</span>
+            <span className="layout-card__status">\u5DF2\u914D\u7F6E</span>
+          </div>
+          <h3 className="layout-card__title">{String(item.props.title)}</h3>
+          {item.props.value !== undefined ? (
+            <strong className="layout-card__value">{Number(item.props.value).toLocaleString('zh-CN')}</strong>
+          ) : (
+            <span className="layout-card__chart" aria-hidden="true">{[1, 2, 3, 4, 5].map(bar => <i key={bar} />)}</span>
+          )}
+          <div className="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span className="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div>
+        </article>
+      )}
+    </Grid>
+  )
+}`);
+			const generatedVueSource = (0, vue.computed)(() => {
+				const imports = /* @__PURE__ */ new Map();
+				const bindings = [];
+				const usedLocals = /* @__PURE__ */ new Set(["LGrid"]);
+				for (const material of materials.getAll()) {
+					const renderer = material.renderers?.vue;
+					if (!renderer?.package || !renderer.exportName) continue;
+					const exportName = renderer.exportName.trim();
+					if (!/^[A-Za-z_$][\w$]*$/.test(exportName)) continue;
+					let localName = exportName;
+					let suffix = 2;
+					while (usedLocals.has(localName)) localName = `${exportName}${suffix++}`;
+					usedLocals.add(localName);
+					const packageImports = imports.get(renderer.package) ?? [];
+					packageImports.push(localName === exportName ? exportName : `${exportName} as ${localName}`);
+					imports.set(renderer.package, packageImports);
+					bindings.push(`  ${JSON.stringify(material.type)}: ${localName}`);
+				}
+				const importLines = ["import { LGrid } from '@composy/layout-vue'", ...[...imports.entries()].map(([packageName, exports]) => `import { ${exports.join(", ")} } from '${packageName}'`)].join("\n");
+				const componentMap = bindings.length ? `const materialComponents = {
+${bindings.join(",\n")}
+} as const` : "const materialComponents: Record<string, never> = {}";
+				return `<script setup lang="ts">
+${importLines}
+import type { LayoutDocument } from '@composy/layout-core'
+
+const layoutDocument: LayoutDocument = ${JSON.stringify(currentDocument.value, null, 2)}
+const breakpoint = '${activeBreakpoint.value}'
+${componentMap}
+<\/script>
+
+<template>
+  <LGrid :document="layoutDocument" :breakpoint="breakpoint">
+    <template #item="{ item }">
+      <component
+        :is="materialComponents[item.type as keyof typeof materialComponents]"
+        v-bind="item.props"
+      />
+    </template>
+  </LGrid>
+</template>
+
+<style scoped>
+/* LGrid renders the ldesign-layout-grid CSS Grid container. */
+${compiled.value}
+</style>`;
+			});
+			(0, vue.computed)(() => `import type { LayoutDocument, LayoutNode } from '@composy/layout-core'
+
+const layoutDocument: LayoutDocument = ${JSON.stringify(currentDocument.value, null, 2)}
+const breakpoint = '${activeBreakpoint.value}'
+const itemClass = (item: LayoutNode) => \`ldesign-layout-item-\${item.id.replace(/[^a-zA-Z0-9_-]/g, '-') }\`
+
+export function LayoutPreview() {
+  return (
+    <section className="ldesign-layout-grid">
+      {layoutDocument.items.map(item => (
+        <article key={item.id} className={\`\${itemClass(item)} layout-card\`}>
+          <div className="layout-card__meta"><span className="layout-card__type">{item.type === 'metric' ? '\u6570\u636E\u6307\u6807' : '\u8D8B\u52BF\u56FE\u8868'}</span><span className="layout-card__status">\u5DF2\u914D\u7F6E</span></div>
+          <h3 className="layout-card__title">{String(item.props.title)}</h3>
+          {item.props.value !== undefined ? <strong className="layout-card__value">{Number(item.props.value).toLocaleString('zh-CN')}</strong> : <span className="layout-card__chart" aria-hidden="true">{[1, 2, 3, 4, 5].map(bar => <i key={bar} />)}</span>}
+          <div className="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span className="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div>
+        </article>
+      ))}
+    </section>
+  )
+}
+
+/* CSS Grid styles are emitted separately by the compiler. */`.replace(/<span className="layout-card__type">[\s\S]*?<\/span>/g, "<span className=\"layout-card__type\">{item.type}</span>").replace(/<span className="layout-card__status">[\s\S]*?<\/span>/g, "<span className=\"layout-card__status\">&#x5df2;&#x914d;&#x7f6e;</span>").replace(/<div className="layout-card__footer">[\s\S]*?<\/div>/g, "<div className=\"layout-card__footer\"><span>&#x5b9e;&#x65f6;&#x6570;&#x636e;</span><span className=\"layout-card__spark\">&#x7a33;&#x5b9a;</span></div>"));
+			const activeCode = (0, vue.computed)(() => activeDevelopmentFramework.value === "vue" ? generatedVueSource.value : htmlSource.value);
+			const activeCodeLabel = (0, vue.computed)(() => activeDevelopmentFramework.value === "vue" ? "Vue组件代码" : "原生代码");
+			const activeCodeExtension = (0, vue.computed)(() => activeDevelopmentFramework.value === "vue" ? "vue" : "html");
+			function materialCodeProps(material) {
+				return { ...material.defaults ?? {} };
+			}
+			function materialVueCode(material) {
+				const renderer = material.renderers?.vue;
+				const exportedName = renderer?.exportName?.trim();
+				const componentName = (exportedName && /^[A-Za-z_$][\w$]*$/.test(exportedName) ? exportedName : void 0) ?? renderer?.component?.name ?? material.type.replace(/[^A-Za-z0-9_$]/g, "");
+				const importLine = renderer?.package && exportedName && /^[A-Za-z_$][\w$]*$/.test(exportedName) ? `import { ${componentName} } from '${renderer.package}'` : `// Vue \u7EC4\u4EF6\u7531\u7269\u6599\u6CE8\u518C\u8868\u63D0\u4F9B\uFF1A${componentName}`;
+				const props = materialCodeProps(material);
+				const bindings = Object.entries(props).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => `    :${key}='${JSON.stringify(value)}'`).join("\n");
+				return `<script setup lang="ts">
+${importLine}
+<\/script>
+
+<!-- \u6CE8\u518C\u8868\u7269\u6599\uFF1A${material.type} -->
+<template>
+  <${componentName}${bindings ? `
+${bindings}
+  ` : ""}/>
+</template>`;
+			}
+			function materialWebComponentCode(material) {
+				const tagName = (material.renderers?.webcomponent)?.tagName ?? `ldesign-${material.type.replace(/[^a-z0-9-]/gi, "-")}`;
+				const attributes = Object.entries(materialCodeProps(material)).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`).join("\n  ");
+				return `<!-- \u6CE8\u518C\u8868\u7269\u6599\uFF1A${material.type} -->
+<!-- Web Component \u6807\u7B7E\uFF1A${tagName} -->
+<${tagName}${attributes ? `
+  ${attributes}` : ""}></${tagName}>`;
+			}
+			const materialCode = (0, vue.computed)(() => {
+				const material = materialCodeDialog.value;
+				if (!material) return "";
+				return activeDevelopmentFramework.value === "vue" ? materialVueCode(material) : materialWebComponentCode(material);
+			});
+			const highlightedMaterialCode = (0, vue.computed)(() => highlightCode(materialCode.value));
+			const materialCodeLineCount = (0, vue.computed)(() => materialCode.value.split("\n").length);
+			function highlightCode(value) {
+				const fragments = [];
+				const stash = (value2, className) => {
+					return `__LDS_TOKEN_${fragments.push(`<span class="code-token-${className}">${value2}</span>`) - 1}__`;
+				};
+				let code = escapeHtml(value);
+				code = code.replace(/(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g, (match) => stash(match, "string"));
+				code = code.replace(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g, (match) => stash(match, "comment"));
+				code = code.replace(/(^|[;{\n]\s*)([A-Za-z_$][\w$-]*)(?=\s*:)/g, (_, prefix, name) => `${prefix}${stash(name, "property")}`);
+				code = code.replace(/\b(import|from|const|let|function|return|export|as|type|class|extends|new|true|false|null|undefined)\b/g, (match) => stash(match, /^(true|false|null|undefined)$/.test(match) ? "constant" : "keyword"));
+				code = code.replace(/(&lt;\/?[A-Za-z][^&]*?&gt;)/g, (match) => stash(match, "tag"));
+				let previous = "";
+				while (previous !== code && /__LDS_TOKEN_\d+__/.test(code)) {
+					previous = code;
+					code = code.replace(/__LDS_TOKEN_(\d+)__/g, (_, index) => fragments[Number(index)] ?? "");
+				}
+				return code;
+			}
+			const highlightedCode = (0, vue.computed)(() => highlightCode(activeCode.value));
+			const activeCodeLineCount = (0, vue.computed)(() => activeCode.value.split("\n").length);
+			const canvasSceneStyle = (0, vue.computed)(() => ({
+				width: `${canvasSize.value.width}px`,
+				minHeight: `${canvasSize.value.height}px`,
+				"--canvas-height": `${canvasSize.value.height}px`,
+				"--canvas-grid-height": `${Math.max(180, canvasSize.value.height)}px`,
+				transform: `translate3d(${canvasPan.value.x}px, ${canvasPan.value.y}px, 0) scale(${canvasZoom.value})`
+			}));
+			const canvasZoomLabel = (0, vue.computed)(() => `${Math.round(canvasZoom.value * 100)}%`);
+			const selectedItem = (0, vue.computed)(() => layout.value.items.find((item) => item.id === selected.value));
+			const selectedLocked = (0, vue.computed)(() => Boolean(selectedItem.value?.state?.locked));
+			const selectedMovable = (0, vue.computed)(() => selectedItem.value?.constraints?.movable !== false);
+			const selectedResizable = (0, vue.computed)(() => selectedItem.value?.constraints?.resizable !== false);
+			function add(type) {
+				if (!editor) return;
+				const node = editor.addItem({ type });
+				editor.updateItem(node.id, (item) => {
+					for (const bp of Object.values(item.layout)) bp.y = 30;
+					return item;
+				});
+				editor.select(node.id);
+			}
+			function materialProps(type) {
+				return JSON.stringify(materials.get(type)?.defaults ?? {});
+			}
+			function openMaterialCode(type) {
+				const material = materials.get(type);
+				if (!material) return;
+				materialCodeDialog.value = material;
+				materialCodeCopied.value = false;
+				closeFilterMenus();
+			}
+			function closeMaterialCode() {
+				materialCodeDialog.value = void 0;
+				materialCodeCopied.value = false;
+			}
+			async function copyMaterialCode() {
+				if (!materialCode.value || typeof navigator === "undefined") return;
+				try {
+					await navigator.clipboard.writeText(materialCode.value);
+					materialCodeCopied.value = true;
+					window.setTimeout(() => {
+						materialCodeCopied.value = false;
+					}, 1500);
+				} catch {
+					materialCodeCopied.value = false;
+				}
+			}
+			function handleMaterialClick(type) {
+				add(type);
+			}
+			function toggleFilterMenu(menu) {
+				categoryMenuOpen.value = menu === "category" ? !categoryMenuOpen.value : false;
+				deviceMenuOpen.value = menu === "device" ? !deviceMenuOpen.value : false;
+				developmentModeMenuOpen.value = false;
+			}
+			function toggleDevelopmentModeMenu() {
+				developmentModeMenuOpen.value = !developmentModeMenuOpen.value;
+				categoryMenuOpen.value = false;
+				deviceMenuOpen.value = false;
+			}
+			function closeFilterMenus() {
+				categoryMenuOpen.value = false;
+				deviceMenuOpen.value = false;
+				developmentModeMenuOpen.value = false;
+			}
+			function handleFilterMenuKeydown(event) {
+				if (event.key !== "Escape") return;
+				if (!categoryMenuOpen.value && !developmentModeMenuOpen.value && !deviceMenuOpen.value) return;
+				closeFilterMenus();
+				event.target?.blur();
+			}
+			function handleFilterOutsidePointerdown(event) {
+				const target = event.target;
+				if (!(target instanceof Element)) return;
+				if (target.closest("[data-layout-filter-menu]")) return;
+				closeFilterMenus();
+			}
+			function selectMaterialCategory(category) {
+				materialCategoryFilter.value = category;
+				closeFilterMenus();
+			}
+			function selectDevelopmentFramework(framework) {
+				activeDevelopmentFramework.value = framework;
+				if (typeof window !== "undefined") window.localStorage.setItem("layout-development-framework", framework);
+				closeFilterMenus();
+				(0, vue.nextTick)(() => {
+					syncVanillaRuntime();
+					syncPreviewDialogRuntime();
+					if (previewMode.value && editor) {
+						editor.setMode("edit");
+						(0, vue.nextTick)(() => editor?.setMode("preview"));
+					}
+				});
+			}
+			function resetMaterialFilters() {
+				materialQuery.value = "";
+				activeMaterialCategory.value = void 0;
+				closeFilterMenus();
+			}
+			function materialIcon(type) {
+				return type === "chart" ? lucide_vue_next.ChartSpline : lucide_vue_next.ChartNoAxesColumnIncreasing;
+			}
+			function setMaterialElement(type, value) {
+				if (value instanceof HTMLElement) materialElements.set(type, value);
+				else materialElements.delete(type);
+			}
+			function syncMaterialSources() {
+				if (!editor) return;
+				const visibleTypes = new Set(visibleMaterials.value.map((material) => material.type));
+				for (const material of visibleMaterials.value) {
+					const element = materialElements.get(material.type);
+					if (!element || materialSourceDisposers.has(material.type)) continue;
+					const size = material.defaultLayout ?? material.size?.default;
+					const dispose = editor.registerExternalDragSource({
+						element,
+						type: material.type,
+						props: { ...material.defaults ?? {} },
+						placement: {
+							x: 0,
+							y: 0,
+							w: size?.w ?? 1,
+							h: size?.h ?? 1
+						}
+					});
+					materialSourceDisposers.set(material.type, dispose);
+				}
+				for (const [type, dispose] of materialSourceDisposers) if (!visibleTypes.has(type)) {
+					dispose();
+					materialSourceDisposers.delete(type);
+				}
+			}
+			(0, vue.watch)([
+				materialQuery,
+				activeMaterialCategory,
+				activeDevelopmentFramework
+			], () => (0, vue.nextTick)(syncMaterialSources));
+			function removeSelected() {
+				editor?.handleKeyboard({ key: "Delete" });
+			}
+			function toggleSelectedLock() {
+				if (!editor || !selected.value) return;
+				if (selectedLocked.value) editor.unlockItem(selected.value);
+				else editor.lockItem(selected.value);
+			}
+			function toggleSelectedConstraint(key) {
+				if (!editor || !selected.value) return;
+				editor.updateItem(selected.value, (item) => {
+					item.constraints = {
+						...item.constraints ?? {},
+						[key]: item.constraints?.[key] === false
+					};
+					return item;
+				});
+			}
+			function undo() {
+				editor?.undo();
+			}
+			function redo() {
+				editor?.redo();
+			}
+			function togglePreview() {
+				const nextMode = previewMode.value ? "edit" : "preview";
+				editor?.setMode(nextMode);
+				navigate(nextMode === "preview" ? "runtime" : "editor");
+			}
+			function openPreviewDialog() {
+				previewDialogOpen.value = true;
+				(0, vue.nextTick)(syncPreviewDialogRuntime);
+			}
+			function closePreviewDialog() {
+				previewDialogOpen.value = false;
+				previewDialogRuntimeInstance?.destroy();
+				previewDialogRuntimeInstance = void 0;
+			}
+			function syncPreviewDialogRuntime() {
+				if (activeDevelopmentFramework.value !== "webcomponent" || !previewDialogOpen.value || !previewDialogRuntime.value) {
+					previewDialogRuntimeInstance?.destroy();
+					previewDialogRuntimeInstance = void 0;
+					return;
+				}
+				const runtimeDocument = editor?.exportRuntimeDocument() ?? layout.value;
+				if (!previewDialogRuntimeInstance) {
+					previewDialogRuntimeInstance = (0, _composy_layout_runtime.createLayoutRuntime)({
+						container: previewDialogRuntime.value,
+						document: runtimeDocument,
+						materials,
+						observeResize: false,
+						renderItem: ({ shell, item }) => {
+							const render = () => setNativeRuntimeCard(shell, item);
+							render();
+							return { update: render };
+						}
+					});
+					previewDialogRuntimeInstance.mount();
+				} else previewDialogRuntimeInstance.update(runtimeDocument);
+				previewDialogRuntimeInstance.setBreakpoint(activeBreakpoint.value);
+			}
+			(0, vue.watch)([
+				previewDialogOpen,
+				activeDevelopmentFramework,
+				activeBreakpoint,
+				layout
+			], () => (0, vue.nextTick)(syncPreviewDialogRuntime));
+			function syncVanillaRuntime() {
+				if (activeDevelopmentFramework.value !== "webcomponent" || activeRoute.value !== "vanilla" || !vanillaRuntime.value || !editor) {
+					vanillaRuntimeInstance?.destroy();
+					vanillaRuntimeInstance = void 0;
+					return;
+				}
+				const document2 = editor.exportRuntimeDocument();
+				if (!vanillaRuntimeInstance) {
+					vanillaRuntimeInstance = (0, _composy_layout_runtime.createLayoutRuntime)({
+						container: vanillaRuntime.value,
+						document: document2,
+						materials,
+						observeResize: false,
+						renderItem: ({ shell, item }) => {
+							const render = () => {
+								setRuntimeCard(shell, item);
+							};
+							render();
+							return { update: render };
+						}
+					});
+					vanillaRuntimeInstance.mount();
+				} else vanillaRuntimeInstance.update(document2);
+				vanillaRuntimeInstance.setBreakpoint(activeBreakpoint.value);
+			}
+			function navigate(route) {
+				activeRoute.value = route;
+				if (typeof window !== "undefined") window.location.hash = `/${route}`;
+				if (route === "runtime") {
+					if (editor?.getMode() === "preview") editor.setMode("edit");
+					editor?.setMode("preview");
+					const clearEditorWidgets = () => {
+						if (activeRoute.value !== "runtime") return;
+						editorGrid.value?.querySelectorAll(".grid-stack-item").forEach((element) => element.remove());
+					};
+					clearEditorWidgets();
+					(0, vue.nextTick)(clearEditorWidgets);
+				} else if (previewMode.value) editor?.setMode("edit");
+				(0, vue.nextTick)(syncVanillaRuntime);
+			}
+			function select(id) {
+				editor?.select(id);
+			}
+			function changeBreakpoint(id) {
+				activeBreakpoint.value = id;
+				canvasOrientation.value = id === "mobile" ? "portrait" : "landscape";
+				editor?.setBreakpoint(id);
+				vanillaRuntimeInstance?.setBreakpoint(id);
+				deviceMenuOpen.value = false;
+			}
+			function selectBreakpoint(id) {
+				changeBreakpoint(id);
+			}
+			function toggleCanvasOrientation() {
+				canvasOrientation.value = canvasOrientation.value === "portrait" ? "landscape" : "portrait";
+			}
+			function clampCanvasZoom(value) {
+				return Math.min(2, Math.max(.5, Math.round(value * 20) / 20));
+			}
+			function setCanvasZoom(value, anchor) {
+				const viewport = canvasViewport.value;
+				const previousZoom = canvasZoom.value;
+				const nextZoom = clampCanvasZoom(value);
+				if (!viewport || previousZoom === nextZoom) return;
+				const rect = viewport.getBoundingClientRect();
+				const anchorX = anchor?.x ?? rect.left + rect.width / 2;
+				const anchorY = anchor?.y ?? rect.top + rect.height / 2;
+				const localX = (anchorX - rect.left - canvasPan.value.x) / previousZoom;
+				const localY = (anchorY - rect.top - canvasPan.value.y) / previousZoom;
+				canvasZoom.value = nextZoom;
+				canvasPan.value = {
+					x: anchorX - rect.left - localX * nextZoom,
+					y: anchorY - rect.top - localY * nextZoom
+				};
+			}
+			function zoomCanvas(direction) {
+				setCanvasZoom(canvasZoom.value + direction * .1);
+			}
+			function resetCanvasView() {
+				canvasZoom.value = 1;
+				canvasPan.value = {
+					x: 0,
+					y: 0
+				};
+			}
+			function resetCanvasPan() {
+				canvasPan.value = {
+					x: 0,
+					y: 0
+				};
+			}
+			function toggleTheme() {
+				theme.value = theme.value === "light" ? "dark" : "light";
+				if (typeof window !== "undefined") window.localStorage.setItem("layout-theme", theme.value);
+			}
+			function handleCanvasWheel(event) {
+				event.preventDefault();
+				const direction = event.deltaY < 0 ? 1 : -1;
+				setCanvasZoom(canvasZoom.value + direction * .08, {
+					x: event.clientX,
+					y: event.clientY
+				});
+			}
+			function handleCanvasPointerDown(event) {
+				if (!(canvasTool.value === "pan" || canvasSpacePressed.value || event.button === 1) || event.button === 2) return;
+				event.preventDefault();
+				event.stopPropagation();
+				event.currentTarget.setPointerCapture?.(event.pointerId);
+				canvasPanning.value = true;
+				canvasPanOrigin.value = {
+					x: event.clientX,
+					y: event.clientY,
+					panX: canvasPan.value.x,
+					panY: canvasPan.value.y
+				};
+			}
+			function handleCanvasPointerMove(event) {
+				if (!canvasPanning.value) return;
+				const origin = canvasPanOrigin.value;
+				canvasPan.value = {
+					x: origin.panX + event.clientX - origin.x,
+					y: origin.panY + event.clientY - origin.y
+				};
+			}
+			function finishCanvasPan(event) {
+				if (!canvasPanning.value) return;
+				canvasPanning.value = false;
+				if (event) event.currentTarget.releasePointerCapture?.(event.pointerId);
+			}
+			function handleCanvasKeydown(event) {
+				if (event.code === "Space") canvasSpacePressed.value = true;
+			}
+			function handleCanvasKeyup(event) {
+				if (event.code === "Space") canvasSpacePressed.value = false;
+			}
+			function handleWorkspaceKeydown(event) {
+				if (!editor || event.defaultPrevented) return;
+				const root = editorGrid.value?.closest("[data-layout-workspace]");
+				if (!root || !(event.target instanceof Node) || !root.contains(event.target)) return;
+				const key = event.key.toLowerCase();
+				if (!((event.ctrlKey || event.metaKey) && [
+					"c",
+					"v",
+					"x",
+					"d"
+				].includes(key)) && !["delete", "backspace"].includes(key)) return;
+				editor.handleKeyboard({
+					key: event.key,
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey,
+					preventDefault: () => event.preventDefault()
+				});
+			}
+			async function copyActiveCode() {
+				const value = activeCode.value;
+				try {
+					if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(value);
+					else {
+						const textarea = document.createElement("textarea");
+						textarea.value = value;
+						textarea.style.position = "fixed";
+						textarea.style.opacity = "0";
+						document.body.appendChild(textarea);
+						textarea.select();
+						document.execCommand("copy");
+						textarea.remove();
+					}
+					copied.value = true;
+					window.setTimeout(() => {
+						copied.value = false;
+					}, 1600);
+				} catch {
+					copied.value = false;
+				}
+			}
+			function downloadActiveCode() {
+				const blob = new Blob([activeCode.value], { type: "text/plain;charset=utf-8" });
+				const url = URL.createObjectURL(blob);
+				const anchor = document.createElement("a");
+				anchor.href = url;
+				anchor.download = `layout-${activeDevelopmentFramework.value}.${activeCodeExtension.value}`;
+				anchor.click();
+				URL.revokeObjectURL(url);
+			}
+			function handleEditorGridAction(event) {
+				const target = event.target;
+				if (!(target instanceof Element)) return;
+				const action = target.closest("[data-layout-action]");
+				const widget = target.closest(".grid-stack-item");
+				if (!action || !widget || action.dataset.layoutActionPointer === "true") {
+					if (action?.dataset.layoutActionPointer === "true") delete action.dataset.layoutActionPointer;
+					return;
+				}
+				if (event.type === "pointerdown") {
+					action.dataset.layoutActionPointer = "true";
+					event.preventDefault();
+				}
+				const id = widget.getAttribute("gs-id") ?? widget.getAttribute("data-layout-item-id");
+				if (!id || !editor) return;
+				editor.select(id);
+				const kind = action.dataset.layoutAction;
+				if (kind === "copy") editor.copySelection();
+				else if (kind === "delete") editor.removeItem(id);
+				else if (kind === "lock") if (layout.value.items.find((item) => item.id === id)?.state?.locked) editor.unlockItem(id);
+				else editor.lockItem(id);
+			}
+			function syncSelection() {
+				const root = editorGrid.value;
+				if (!root) return;
+				root.querySelectorAll(".grid-stack-item").forEach((item) => {
+					const id = item.getAttribute("gs-id") ?? item.getAttribute("data-layout-item-id") ?? "";
+					const node = layout.value.items.find((candidate) => candidate.id === id);
+					const active = selectedIds.value.includes(id);
+					item.classList.toggle("is-selected", active);
+					item.tabIndex = 0;
+					item.setAttribute("role", "button");
+					if (node) item.setAttribute("aria-label", `${itemTitle(node)}\uFF0C${materialLabel(node.type)}`);
+					item.setAttribute("aria-pressed", String(active));
+					item.setAttribute("aria-selected", String(active));
+					item.setAttribute("aria-disabled", String(Boolean(node?.state?.locked)));
+				});
+			}
+			function syncInteractionPreview() {
+				if (interactionPreviewFrame !== void 0) return;
+				const flush = () => {
+					interactionPreviewFrame = void 0;
+					if (!editor) return;
+					layout.value = editor.exportRuntimeDocument();
+					queueMicrotask(syncSelection);
+				};
+				if (typeof window === "undefined") flush();
+				else interactionPreviewFrame = window.requestAnimationFrame(flush);
+			}
+			(0, vue.onMounted)(() => {
+				if (typeof window !== "undefined") {
+					const savedTheme = window.localStorage.getItem("layout-theme");
+					if (savedTheme === "light" || savedTheme === "dark") theme.value = savedTheme;
+					const savedFramework = window.localStorage.getItem("layout-development-framework");
+					if (savedFramework === "webcomponent" || savedFramework === "vue") activeDevelopmentFramework.value = savedFramework;
+				}
+				if (!editorGrid.value) return;
+				previousGridStackRenderCallback = gridstack.GridStack.renderCB;
+				gridstack.GridStack.renderCB = (element, widget) => {
+					if (element && widget?.content !== void 0) element.innerHTML = String(widget.content);
+				};
+				const engine = (0, _composy_layout_gridstack.createGridStackEditorEngine)({
+					container: editorGrid.value,
+					gridOptions: {
+						acceptWidgets: true,
+						animate: false
+					},
+					createGrid: (options) => gridstack.GridStack.init(options, editorGrid.value),
+					renderItem: ({ item }) => renderCardMarkup(item, { interactive: true })
+				});
+				editor = (0, _composy_layout_editor.createLayoutEditor)({
+					document: initial,
+					engine,
+					materials,
+					preview: runtimePreview.value ? {
+						container: runtimePreview.value,
+						renderItem: ({ shell, item }) => {
+							const render = () => {
+								setRuntimeCard(shell, item);
+							};
+							render();
+							return { update: render };
+						}
+					} : void 0
+				});
+				editor.on("document:change", (event) => {
+					layout.value = event.document;
+					workspaceEmit("update:document", event.document);
+					workspaceEmit("change", event.document);
+					queueMicrotask(syncSelection);
+					syncVanillaRuntime();
+				});
+				editor.on("interaction:move", syncInteractionPreview);
+				editor.on("interaction:resize", syncInteractionPreview);
+				editor.on("selection:change", (event) => {
+					selected.value = event.primaryId;
+					selectedIds.value = [...event.selectedIds];
+					syncSelection();
+				});
+				editor.on("mode:change", (event) => {
+					previewMode.value = event.mode === "preview";
+					if (event.mode === "preview" && activeRoute.value !== "runtime") activeRoute.value = "runtime";
+					if (event.mode === "edit" && activeRoute.value === "runtime") activeRoute.value = "editor";
+					(0, vue.nextTick)(syncVanillaRuntime);
+				});
+				editor.mount();
+				editorGrid.value.addEventListener("pointerdown", handleEditorGridAction, true);
+				editorGrid.value.addEventListener("click", handleEditorGridAction, true);
+				disposers.push(() => editorGrid.value?.removeEventListener("pointerdown", handleEditorGridAction, true));
+				disposers.push(() => editorGrid.value?.removeEventListener("click", handleEditorGridAction, true));
+				(0, vue.nextTick)(syncMaterialSources);
+				syncSelection();
+				if (typeof window !== "undefined") {
+					activeRoute.value = parseRoute(window.location.hash);
+					const onHashChange = () => {
+						const next = parseRoute(window.location.hash);
+						if (next !== activeRoute.value) navigate(next);
+						else if (next === "runtime" && editor?.getMode() !== "preview") editor.setMode("preview");
+						else if (next !== "runtime" && editor?.getMode() === "preview") editor.setMode("edit");
+					};
+					window.addEventListener("hashchange", onHashChange);
+					disposers.push(() => window.removeEventListener("hashchange", onHashChange));
+					window.addEventListener("keydown", handleCanvasKeydown);
+					window.addEventListener("keyup", handleCanvasKeyup);
+					window.addEventListener("keydown", handleWorkspaceKeydown);
+					document.addEventListener("pointerdown", handleFilterOutsidePointerdown);
+					document.addEventListener("keydown", handleFilterMenuKeydown);
+					disposers.push(() => window.removeEventListener("keydown", handleCanvasKeydown));
+					disposers.push(() => window.removeEventListener("keyup", handleCanvasKeyup));
+					disposers.push(() => window.removeEventListener("keydown", handleWorkspaceKeydown));
+					disposers.push(() => document.removeEventListener("pointerdown", handleFilterOutsidePointerdown));
+					disposers.push(() => document.removeEventListener("keydown", handleFilterMenuKeydown));
+				}
+				if (activeRoute.value === "runtime") editor.setMode("preview");
+				syncVanillaRuntime();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				if (interactionPreviewFrame !== void 0 && typeof window !== "undefined") window.cancelAnimationFrame(interactionPreviewFrame);
+				interactionPreviewFrame = void 0;
+				materialSourceDisposers.forEach((dispose) => dispose());
+				materialSourceDisposers.clear();
+				disposers.splice(0).forEach((dispose) => dispose());
+				vanillaRuntimeInstance?.destroy();
+				vanillaRuntimeInstance = void 0;
+				previewDialogRuntimeInstance?.destroy();
+				previewDialogRuntimeInstance = void 0;
+				editor?.destroy();
+				if (previousGridStackRenderCallback) {
+					gridstack.GridStack.renderCB = previousGridStackRenderCallback;
+					previousGridStackRenderCallback = void 0;
+				}
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("main", {
+					class: "layout-demo",
+					"data-layout-workspace": "",
+					"data-theme": theme.value,
+					"data-development-framework": activeDevelopmentFramework.value
+				}, [
+					(0, vue.createElementVNode)("header", _hoisted_2, [
+						(0, vue.createElementVNode)("div", _hoisted_3, [
+							(0, vue.createElementVNode)("span", _hoisted_4, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Grid2X2), {
+								size: 18,
+								"stroke-width": 1.8
+							})]),
+							_cache[20] || (_cache[20] = (0, vue.createElementVNode)("div", { class: "brand-copy" }, [(0, vue.createElementVNode)("strong", null, "布局工作台"), (0, vue.createElementVNode)("span", null, "所见即所得 · 网格布局")], -1)),
+							(0, vue.createElementVNode)("div", {
+								class: (0, vue.normalizeClass)(["development-mode custom-select", { "is-open": developmentModeMenuOpen.value }]),
+								"data-layout-filter-menu": "",
+								onPointerdown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["stop"]))
+							}, [(0, vue.createElementVNode)("button", {
+								class: "custom-select__trigger",
+								type: "button",
+								"aria-haspopup": "listbox",
+								"aria-expanded": developmentModeMenuOpen.value,
+								"aria-label": "开发框架",
+								title: `\u5F53\u524D\u5F00\u53D1\u6846\u67B6\uFF1A${activeDevelopmentFrameworkLabel.value}`,
+								onClick: (0, vue.withModifiers)(toggleDevelopmentModeMenu, ["stop"])
+							}, [
+								((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(developmentFrameworks.find((framework) => framework.id === activeDevelopmentFramework.value)?.icon ?? (0, vue.unref)(lucide_vue_next.PanelsTopLeft)), {
+									size: 14,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})),
+								(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(activeDevelopmentFrameworkLabel.value), 1),
+								(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.ChevronDown), {
+									size: 12,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})
+							], 8, _hoisted_5), developmentModeMenuOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(developmentFrameworks, (framework) => {
+								return (0, vue.createElementVNode)("button", {
+									key: framework.id,
+									class: "custom-select__option",
+									type: "button",
+									"aria-selected": activeDevelopmentFramework.value === framework.id,
+									onClick: ($event) => selectDevelopmentFramework(framework.id)
+								}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(framework.icon), {
+									size: 14,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})), (0, vue.createElementVNode)("span", null, [(0, vue.createElementVNode)("strong", null, (0, vue.toDisplayString)(framework.label), 1), (0, vue.createElementVNode)("small", null, (0, vue.toDisplayString)(framework.description), 1)])], 8, _hoisted_7);
+							}), 64))])) : (0, vue.createCommentVNode)("v-if", true)], 34)
+						]),
+						(0, vue.createElementVNode)("div", _hoisted_8, [(0, vue.createElementVNode)("nav", _hoisted_9, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(routes, (demoRoute) => {
+							return (0, vue.createElementVNode)("button", {
+								key: demoRoute.id,
+								type: "button",
+								"aria-current": activeRoute.value === demoRoute.id ? "page" : void 0,
+								"aria-label": `${demoRoute.label}\u6A21\u5F0F`,
+								title: demoRoute.description,
+								onClick: ($event) => navigate(demoRoute.id)
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(routeIcons[demoRoute.id]), {
+								class: "route-icon",
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(demoRoute.label), 1)], 8, _hoisted_10);
+						}), 64))]), (0, vue.createElementVNode)("div", _hoisted_11, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(layout.value.breakpoints, (breakpoint) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+								key: breakpoint.id,
+								class: "breakpoint-tab",
+								type: "button",
+								"aria-pressed": activeBreakpoint.value === breakpoint.id,
+								"aria-label": `\u5207\u6362\u5230${breakpointLabel(breakpoint.id)}\u753B\u5E03`,
+								title: `${breakpointLabel(breakpoint.id)}\u753B\u5E03`,
+								onClick: ($event) => changeBreakpoint(breakpoint.id)
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(breakpointIcons[breakpoint.id] ?? (0, vue.unref)(lucide_vue_next.Monitor)), {
+								size: 14,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(breakpointLabel(breakpoint.id)), 1)], 8, _hoisted_12);
+						}), 128)), (0, vue.createCommentVNode)("v-if", true)])]),
+						(0, vue.createElementVNode)("div", _hoisted_13, [
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": "撤销",
+								title: "撤销",
+								disabled: !(0, vue.unref)(editor)?.canUndo(),
+								onClick: undo
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Undo2), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 8, _hoisted_14),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": "重做",
+								title: "重做",
+								disabled: !(0, vue.unref)(editor)?.canRedo(),
+								onClick: redo
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Redo2), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 8, _hoisted_15),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": "删除选中组件",
+								title: "删除选中组件",
+								disabled: !selected.value,
+								onClick: removeSelected
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Trash2), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 8, _hoisted_16),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": selectedLocked.value ? "解锁选中组件" : "锁定选中组件",
+								title: selectedLocked.value ? "解锁选中组件" : "锁定选中组件",
+								disabled: !selected.value,
+								onClick: toggleSelectedLock
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(selectedLocked.value ? (0, vue.unref)(lucide_vue_next.Unlock) : (0, vue.unref)(lucide_vue_next.Lock)), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							}))], 8, _hoisted_17),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": selectedMovable.value ? "禁止移动" : "允许移动",
+								title: selectedMovable.value ? "禁止移动" : "允许移动",
+								disabled: !selected.value || selectedLocked.value,
+								onClick: _cache[1] || (_cache[1] = ($event) => toggleSelectedConstraint("movable"))
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Move), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 8, _hoisted_18),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": selectedResizable.value ? "禁止调整大小" : "允许调整大小",
+								title: selectedResizable.value ? "禁止调整大小" : "允许调整大小",
+								disabled: !selected.value || selectedLocked.value,
+								onClick: _cache[2] || (_cache[2] = ($event) => toggleSelectedConstraint("resizable"))
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Maximize2), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 8, _hoisted_19),
+							(0, vue.createElementVNode)("button", {
+								class: "icon-button theme-button",
+								type: "button",
+								"aria-label": theme.value === "dark" ? "切换到亮色主题" : "切换到暗色主题",
+								title: theme.value === "dark" ? "切换到亮色主题" : "切换到暗色主题",
+								onClick: toggleTheme
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(theme.value === "dark" ? (0, vue.unref)(lucide_vue_next.Sun) : (0, vue.unref)(lucide_vue_next.Moon)), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							}))], 8, _hoisted_20),
+							(0, vue.createElementVNode)("button", {
+								class: "preview-open-button",
+								type: "button",
+								"aria-label": "打开实时预览",
+								title: "打开实时预览",
+								onClick: openPreviewDialog
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Eye), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							}), _cache[21] || (_cache[21] = (0, vue.createElementVNode)("span", null, "实时预览", -1))]),
+							(0, vue.createElementVNode)("button", {
+								class: "mode-button",
+								type: "button",
+								"aria-pressed": previewMode.value,
+								"aria-label": previewMode.value ? "返回编辑模式" : "进入预览模式",
+								title: previewMode.value ? "返回编辑模式" : "进入预览模式",
+								onClick: togglePreview
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(previewMode.value ? (0, vue.unref)(lucide_vue_next.Pencil) : (0, vue.unref)(lucide_vue_next.Eye)), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(previewMode.value ? "编辑" : "预览"), 1)], 8, _hoisted_21)
+						])
+					]),
+					(0, vue.createElementVNode)("section", _hoisted_22, [
+						(0, vue.createElementVNode)("aside", _hoisted_23, [
+							(0, vue.createElementVNode)("div", _hoisted_24, [_cache[22] || (_cache[22] = (0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "eyebrow" }, "工作区"), (0, vue.createElementVNode)("h2", null, "物料")], -1)), (0, vue.createElementVNode)("span", _hoisted_25, (0, vue.toDisplayString)((0, vue.unref)(materials).getAll().length), 1)]),
+							(0, vue.createElementVNode)("div", _hoisted_26, [
+								(0, vue.createElementVNode)("label", _hoisted_27, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Search), {
+									size: 15,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								}), (0, vue.withDirectives)((0, vue.createElementVNode)("input", {
+									"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => materialQuery.value = $event),
+									type: "search",
+									placeholder: "搜索物料",
+									"aria-label": "搜索物料"
+								}, null, 512), [[vue.vModelText, materialQuery.value]])]),
+								(0, vue.createElementVNode)("div", {
+									class: "material-filter-row",
+									"data-layout-filter-menu": "",
+									onKeydown: (0, vue.withKeys)((0, vue.withModifiers)(handleFilterMenuKeydown, ["stop", "prevent"]), ["esc"])
+								}, [(0, vue.createElementVNode)("div", {
+									class: (0, vue.normalizeClass)(["material-select custom-select", { "is-open": categoryMenuOpen.value }]),
+									onPointerdown: _cache[6] || (_cache[6] = (0, vue.withModifiers)(() => {}, ["stop"]))
+								}, [(0, vue.createElementVNode)("button", {
+									class: "custom-select__trigger",
+									type: "button",
+									"aria-haspopup": "listbox",
+									"aria-expanded": categoryMenuOpen.value,
+									"aria-label": "物料分类",
+									title: `\u7269\u6599\u5206\u7C7B\uFF1A${activeMaterialCategoryLabel.value}`,
+									onClick: _cache[4] || (_cache[4] = (0, vue.withModifiers)(($event) => toggleFilterMenu("category"), ["stop"]))
+								}, [
+									(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Filter), {
+										size: 13,
+										"stroke-width": 1.9,
+										"aria-hidden": "true"
+									}),
+									(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(activeMaterialCategoryLabel.value), 1),
+									(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.ChevronDown), {
+										size: 12,
+										"stroke-width": 1.9,
+										"aria-hidden": "true"
+									})
+								], 8, _hoisted_29), categoryMenuOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_30, [(0, vue.createElementVNode)("button", {
+									class: "custom-select__option",
+									type: "button",
+									"aria-selected": !materialCategoryFilter.value,
+									onClick: _cache[5] || (_cache[5] = ($event) => selectMaterialCategory(""))
+								}, " 全部分类 ", 8, _hoisted_31), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(materialCategories.value, (category) => {
+									return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+										key: category.id,
+										class: "custom-select__option",
+										type: "button",
+										"aria-selected": materialCategoryFilter.value === category.id,
+										onClick: ($event) => selectMaterialCategory(category.id)
+									}, (0, vue.toDisplayString)(category.label), 9, _hoisted_32);
+								}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 34), hasMaterialFilters.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+									key: 0,
+									class: "material-filter-reset",
+									type: "button",
+									"aria-label": "清除物料筛选",
+									title: "清除筛选",
+									onClick: resetMaterialFilters
+								}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.X), {
+									size: 13,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})])) : (0, vue.createCommentVNode)("v-if", true)], 40, _hoisted_28),
+								(0, vue.createElementVNode)("div", _hoisted_33, [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(visibleMaterials.value.length) + " / " + (0, vue.toDisplayString)((0, vue.unref)(materials).getAll().length) + " 个物料", 1), hasMaterialFilters.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_34, "已筛选")) : (0, vue.createCommentVNode)("v-if", true)])
+							]),
+							!visibleMaterials.value.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_35, [
+								(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Search), {
+									size: 17,
+									"stroke-width": 1.7,
+									"aria-hidden": "true"
+								}),
+								_cache[23] || (_cache[23] = (0, vue.createElementVNode)("strong", null, "没有匹配的物料", -1)),
+								_cache[24] || (_cache[24] = (0, vue.createElementVNode)("span", null, "试试更换关键词或分类", -1)),
+								hasMaterialFilters.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+									key: 0,
+									type: "button",
+									onClick: resetMaterialFilters
+								}, " 清除筛选 ")) : (0, vue.createCommentVNode)("v-if", true)
+							])) : (0, vue.createCommentVNode)("v-if", true),
+							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleMaterials.value, (material) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+									key: material.type,
+									ref_for: true,
+									ref: (element) => setMaterialElement(material.type, element),
+									class: "material-source grid-stack-item",
+									role: "button",
+									tabindex: "0",
+									"data-material-type": material.type,
+									"data-layout-material": material.type,
+									"data-layout-props": materialProps(material.type),
+									"aria-label": `\u6DFB\u52A0${material.title ?? material.label ?? material.type}`,
+									onClick: ($event) => handleMaterialClick(material.type),
+									onKeydown: [(0, vue.withKeys)(($event) => add(material.type), ["enter"]), (0, vue.withKeys)((0, vue.withModifiers)(($event) => add(material.type), ["prevent"]), ["space"])]
+								}, [
+									(0, vue.createElementVNode)("span", _hoisted_37, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(materialIcon(material.type)), {
+										size: 18,
+										"stroke-width": 1.8
+									}))]),
+									(0, vue.createElementVNode)("span", _hoisted_38, [(0, vue.createElementVNode)("strong", null, (0, vue.toDisplayString)(material.title ?? material.label ?? material.type), 1), (0, vue.createElementVNode)("small", null, (0, vue.toDisplayString)(material.description ?? material.categoryLabel ?? "布局组件"), 1)]),
+									(0, vue.createElementVNode)("span", _hoisted_39, [(0, vue.createElementVNode)("span", _hoisted_40, (0, vue.toDisplayString)(material.defaultLayout?.w ?? material.size?.default.w ?? 1) + " × " + (0, vue.toDisplayString)(material.defaultLayout?.h ?? material.size?.default.h ?? 1), 1), (0, vue.createElementVNode)("span", _hoisted_41, [(0, vue.createElementVNode)("span", {
+										class: (0, vue.normalizeClass)(["material-renderer-badge", { "material-renderer-badge--vue": activeDevelopmentFramework.value === "vue" }]),
+										title: `\u5F53\u524D\u5F00\u53D1\u76EE\u6807\uFF1A${activeDevelopmentFrameworkLabel.value}`
+									}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(activeDevelopmentFramework.value === "vue" ? (0, vue.unref)(lucide_vue_next.PanelsTopLeft) : (0, vue.unref)(lucide_vue_next.Code2)), {
+										size: 11,
+										"stroke-width": 1.8,
+										"aria-hidden": "true"
+									})), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(activeDevelopmentFrameworkLabel.value), 1)], 10, _hoisted_42)])]),
+									(0, vue.createElementVNode)("span", _hoisted_43, [(0, vue.createElementVNode)("button", {
+										class: "material-code-button",
+										type: "button",
+										"aria-label": "查看当前物料代码",
+										title: "查看当前物料代码",
+										onPointerdown: _cache[7] || (_cache[7] = (0, vue.withModifiers)(() => {}, ["stop"])),
+										onClick: (0, vue.withModifiers)(($event) => openMaterialCode(material.type), ["stop"])
+									}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Code2), {
+										size: 14,
+										"stroke-width": 1.8,
+										"aria-hidden": "true"
+									})], 40, _hoisted_44), (0, vue.createElementVNode)("span", _hoisted_45, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Plus), {
+										size: 16,
+										"stroke-width": 1.8
+									})])])
+								], 40, _hoisted_36);
+							}), 128)),
+							(0, vue.createCommentVNode)("v-if", true),
+							(0, vue.createCommentVNode)("v-if", true)
+						]),
+						(0, vue.createElementVNode)("section", _hoisted_50, [(0, vue.createElementVNode)("div", _hoisted_51, [
+							(0, vue.createElementVNode)("div", {
+								class: (0, vue.normalizeClass)(["canvas-device-control custom-select", { "is-open": deviceMenuOpen.value }]),
+								onPointerdown: _cache[15] || (_cache[15] = (0, vue.withModifiers)(() => {}, ["stop"]))
+							}, [(0, vue.createElementVNode)("button", {
+								class: "custom-select__trigger",
+								type: "button",
+								"aria-haspopup": "listbox",
+								"aria-expanded": deviceMenuOpen.value,
+								"aria-label": "设备画布",
+								onClick: _cache[14] || (_cache[14] = (0, vue.withModifiers)(($event) => toggleFilterMenu("device"), ["stop"]))
+							}, [
+								((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(activeBreakpointIcon.value), {
+									size: 13,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})),
+								(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)), 1),
+								(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.ChevronDown), {
+									size: 12,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})
+							], 8, _hoisted_52), deviceMenuOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_53, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(layout.value.breakpoints, (breakpoint) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+									key: breakpoint.id,
+									class: "custom-select__option",
+									type: "button",
+									"aria-selected": activeBreakpoint.value === breakpoint.id,
+									"aria-label": breakpointLabel(breakpoint.id) + " / " + breakpoint.columns + " 列",
+									onClick: ($event) => selectBreakpoint(breakpoint.id)
+								}, [
+									((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(breakpointIcons[breakpoint.id] ?? (0, vue.unref)(lucide_vue_next.Monitor)), {
+										size: 13,
+										"stroke-width": 1.8,
+										"aria-hidden": "true"
+									})),
+									(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(breakpointLabel(breakpoint.id)), 1),
+									(0, vue.createElementVNode)("span", _hoisted_55, (0, vue.toDisplayString)(breakpoint.columns) + " 列", 1)
+								], 8, _hoisted_54);
+							}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 34),
+							(0, vue.createElementVNode)("button", {
+								class: "orientation-button",
+								type: "button",
+								"aria-label": canvasOrientation.value === "portrait" ? "切换为横屏" : "切换为竖屏",
+								title: canvasOrientation.value === "portrait" ? "切换为横屏" : "切换为竖屏",
+								onClick: toggleCanvasOrientation
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(canvasOrientation.value === "portrait" ? (0, vue.unref)(lucide_vue_next.ArrowLeftRight) : (0, vue.unref)(lucide_vue_next.ArrowUpDown)), {
+								size: 14,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							}))], 8, _hoisted_56),
+							_cache[27] || (_cache[27] = (0, vue.createElementVNode)("span", {
+								class: "canvas-toolbar__device-divider",
+								"aria-hidden": "true"
+							}, null, -1)),
+							(0, vue.createElementVNode)("div", _hoisted_57, [(0, vue.createElementVNode)("button", {
+								class: (0, vue.normalizeClass)(["canvas-tool-button", { active: canvasTool.value === "select" }]),
+								type: "button",
+								"aria-label": "选择组件",
+								title: "选择组件",
+								onClick: _cache[16] || (_cache[16] = ($event) => canvasTool.value = "select")
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.MousePointer2), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 2), (0, vue.createElementVNode)("button", {
+								class: (0, vue.normalizeClass)(["canvas-tool-button", { active: canvasTool.value === "pan" }]),
+								type: "button",
+								"aria-label": "移动画布",
+								title: "移动画布（也可按住空格拖动）",
+								onClick: _cache[17] || (_cache[17] = ($event) => canvasTool.value = canvasTool.value === "pan" ? "select" : "pan")
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Hand), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})], 2)]),
+							_cache[28] || (_cache[28] = (0, vue.createElementVNode)("div", {
+								class: "canvas-toolbar__divider",
+								"aria-hidden": "true"
+							}, null, -1)),
+							(0, vue.createElementVNode)("button", {
+								class: "canvas-tool-button",
+								type: "button",
+								"aria-label": "缩小画布",
+								title: "缩小画布",
+								onClick: _cache[18] || (_cache[18] = ($event) => zoomCanvas(-1))
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.ZoomOut), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})]),
+							(0, vue.createElementVNode)("span", _hoisted_58, (0, vue.toDisplayString)(canvasZoomLabel.value), 1),
+							(0, vue.createElementVNode)("button", {
+								class: "canvas-tool-button",
+								type: "button",
+								"aria-label": "放大画布",
+								title: "放大画布",
+								onClick: _cache[19] || (_cache[19] = ($event) => zoomCanvas(1))
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.ZoomIn), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})]),
+							(0, vue.createElementVNode)("button", {
+								class: "canvas-tool-button",
+								type: "button",
+								"aria-label": "适配画布",
+								title: "适配画布",
+								onClick: resetCanvasView
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Scan), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})]),
+							(0, vue.createElementVNode)("button", {
+								class: "canvas-tool-button",
+								type: "button",
+								"aria-label": "重置画布位置",
+								title: "重置画布位置",
+								onClick: resetCanvasPan
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.RotateCcw), {
+								size: 15,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})])
+						]), (0, vue.createElementVNode)("div", {
+							ref_key: "canvasViewport",
+							ref: canvasViewport,
+							class: (0, vue.normalizeClass)(["canvas-viewport", {
+								"is-panning": canvasPanning.value,
+								"is-pan-tool": canvasTool.value === "pan"
+							}]),
+							onWheel: handleCanvasWheel,
+							onPointerdownCapture: handleCanvasPointerDown,
+							onPointermove: handleCanvasPointerMove,
+							onPointerup: finishCanvasPan,
+							onPointercancel: finishCanvasPan
+						}, [(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(["canvas-scene", `is-${canvasOrientation.value}`]),
+							"data-canvas-width": canvasSize.value.width,
+							"data-canvas-height": canvasSize.value.height,
+							"data-canvas-orientation": canvasOrientation.value,
+							style: (0, vue.normalizeStyle)(canvasSceneStyle.value)
+						}, [
+							(0, vue.withDirectives)((0, vue.createElementVNode)("section", _hoisted_60, [(0, vue.createElementVNode)("header", _hoisted_61, [_cache[30] || (_cache[30] = (0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "stage-kicker" }, "编辑模式"), (0, vue.createElementVNode)("h2", null, "拖拽布局")], -1)), (0, vue.createElementVNode)("span", _hoisted_62, [_cache[29] || (_cache[29] = (0, vue.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, vue.createTextVNode)((0, vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)), 1)])]), (0, vue.createElementVNode)("div", {
+								ref_key: "editorGrid",
+								ref: editorGrid,
+								class: "grid-stack layout-editor-grid",
+								role: "grid",
+								"aria-label": "网格布局编辑器",
+								"aria-multiselectable": "true"
+							}, null, 512)], 512), [[vue.vShow, activeRoute.value === "editor" && !previewMode.value]]),
+							(0, vue.withDirectives)((0, vue.createElementVNode)("section", _hoisted_63, [_cache[31] || (_cache[31] = (0, vue.createElementVNode)("header", { class: "stage-header" }, [(0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, vue.createElementVNode)("h2", null, "组件渲染")]), (0, vue.createElementVNode)("span", { class: "stage-badge" }, [(0, vue.createElementVNode)("i", { "aria-hidden": "true" }), (0, vue.createTextVNode)("同步布局")])], -1)), (0, vue.createVNode)((0, vue.unref)(LGrid), {
+								document: layout.value,
+								breakpoint: activeBreakpoint.value,
+								materials: (0, vue.unref)(materials),
+								target: activeDevelopmentFramework.value
+							}, {
+								item: (0, vue.withCtx)(({ item }) => [(0, vue.createElementVNode)("button", {
+									class: (0, vue.normalizeClass)(["widget layout-item-shell layout-item-shell--interactive", { selected: selected.value === item.id }]),
+									type: "button",
+									"aria-label": `${itemTitle(item)}\uFF0C${materialLabel(item.type)}`,
+									onClick: ($event) => select(item.id)
+								}, [(0, vue.createVNode)((0, vue.unref)(LMaterialRenderer), (0, vue.mergeProps)({
+									item,
+									materials: (0, vue.unref)(materials),
+									target: activeDevelopmentFramework.value
+								}, item.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])], 10, _hoisted_64)]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])], 512), [[vue.vShow, activeRoute.value === "vue"]]),
+							(0, vue.withDirectives)((0, vue.createElementVNode)("section", {
+								class: "runtime-preview-stage",
+								"data-preview-framework": activeDevelopmentFramework.value,
+								"aria-label": "运行时预览画布"
+							}, [
+								(0, vue.createElementVNode)("header", _hoisted_66, [_cache[33] || (_cache[33] = (0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, vue.createElementVNode)("h2", null, "运行时预览")], -1)), (0, vue.createElementVNode)("span", _hoisted_67, [_cache[32] || (_cache[32] = (0, vue.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, vue.createTextVNode)((0, vue.toDisplayString)(activeDevelopmentFrameworkLabel.value) + " · 只读", 1)])]),
+								activeDevelopmentFramework.value === "vue" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LGrid), {
+									key: 0,
+									document: layout.value,
+									breakpoint: activeBreakpoint.value,
+									materials: (0, vue.unref)(materials),
+									target: activeDevelopmentFramework.value
+								}, {
+									item: (0, vue.withCtx)(({ item }) => [(0, vue.createVNode)((0, vue.unref)(LMaterialRenderer), (0, vue.mergeProps)({
+										item,
+										materials: (0, vue.unref)(materials),
+										target: activeDevelopmentFramework.value,
+										class: "preview-dialog__card"
+									}, item.props), null, 16, [
+										"item",
+										"materials",
+										"target"
+									])]),
+									_: 1
+								}, 8, [
+									"document",
+									"breakpoint",
+									"materials",
+									"target"
+								])) : (0, vue.createCommentVNode)("v-if", true),
+								(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
+									ref_key: "runtimePreview",
+									ref: runtimePreview,
+									class: "runtime-preview-grid",
+									"data-preview-renderer": "webcomponent"
+								}, null, 512), [[vue.vShow, activeDevelopmentFramework.value === "webcomponent"]])
+							], 8, _hoisted_65), [[vue.vShow, activeRoute.value === "runtime" && previewMode.value]]),
+							(0, vue.withDirectives)((0, vue.createElementVNode)("section", {
+								class: "vanilla-runtime-stage",
+								"data-preview-framework": activeDevelopmentFramework.value,
+								"aria-label": "原生运行时画布"
+							}, [
+								(0, vue.createElementVNode)("header", _hoisted_69, [_cache[35] || (_cache[35] = (0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, vue.createElementVNode)("h2", null, "原生运行时")], -1)), (0, vue.createElementVNode)("span", _hoisted_70, [_cache[34] || (_cache[34] = (0, vue.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, vue.createTextVNode)((0, vue.toDisplayString)(activeDevelopmentFrameworkLabel.value) + " · 只读", 1)])]),
+								activeDevelopmentFramework.value === "vue" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LGrid), {
+									key: 0,
+									document: layout.value,
+									breakpoint: activeBreakpoint.value,
+									materials: (0, vue.unref)(materials),
+									target: activeDevelopmentFramework.value
+								}, {
+									item: (0, vue.withCtx)(({ item }) => [(0, vue.createVNode)((0, vue.unref)(LMaterialRenderer), (0, vue.mergeProps)({
+										item,
+										materials: (0, vue.unref)(materials),
+										target: activeDevelopmentFramework.value,
+										class: "preview-dialog__card"
+									}, item.props), null, 16, [
+										"item",
+										"materials",
+										"target"
+									])]),
+									_: 1
+								}, 8, [
+									"document",
+									"breakpoint",
+									"materials",
+									"target"
+								])) : (0, vue.createCommentVNode)("v-if", true),
+								(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
+									ref_key: "vanillaRuntime",
+									ref: vanillaRuntime,
+									class: "runtime-preview-grid",
+									"data-preview-renderer": "webcomponent"
+								}, null, 512), [[vue.vShow, activeDevelopmentFramework.value === "webcomponent"]])
+							], 8, _hoisted_68), [[vue.vShow, activeRoute.value === "vanilla"]])
+						], 14, _hoisted_59)], 34)]),
+						(0, vue.createElementVNode)("aside", _hoisted_71, [
+							(0, vue.createElementVNode)("div", _hoisted_72, [
+								(0, vue.createElementVNode)("div", null, [_cache[36] || (_cache[36] = (0, vue.createElementVNode)("span", { class: "eyebrow" }, "实时输出", -1)), (0, vue.createElementVNode)("h2", null, (0, vue.toDisplayString)(activeCodeLabel.value), 1)]),
+								(0, vue.createElementVNode)("button", {
+									class: "copy-code-button",
+									type: "button",
+									"aria-label": copied.value ? "代码已复制" : "复制当前代码",
+									title: copied.value ? "代码已复制" : "复制当前代码",
+									onClick: copyActiveCode
+								}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(copied.value ? (0, vue.unref)(lucide_vue_next.CopyCheck) : (0, vue.unref)(lucide_vue_next.Copy)), {
+									size: 15,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								}))], 8, _hoisted_73),
+								(0, vue.createElementVNode)("button", {
+									class: "download-code-button",
+									type: "button",
+									"aria-label": "下载当前代码",
+									title: "下载当前代码",
+									onClick: downloadActiveCode
+								}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.Download), {
+									size: 15,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})])
+							]),
+							(0, vue.createElementVNode)("pre", _hoisted_74, [(0, vue.createElementVNode)("code", { innerHTML: highlightedCode.value }, null, 8, _hoisted_75)]),
+							(0, vue.createElementVNode)("div", _hoisted_76, [_cache[37] || (_cache[37] = (0, vue.createElementVNode)("span", {
+								class: "code-status__dot",
+								"aria-hidden": "true"
+							}, null, -1)), (0, vue.createElementVNode)("span", null, "已根据当前布局、" + (0, vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)) + "断点实时生成 · 共 " + (0, vue.toDisplayString)(activeCodeLineCount.value) + " 行，可滚动查看完整输出", 1)])
+						])
+					]),
+					(0, vue.createVNode)(vue.Transition, { name: "preview-dialog" }, {
+						default: (0, vue.withCtx)(() => [previewDialogOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+							key: 0,
+							class: "preview-dialog",
+							"data-preview-framework": activeDevelopmentFramework.value,
+							"data-theme": theme.value,
+							role: "dialog",
+							"aria-modal": "true",
+							"aria-labelledby": "layout-preview-title"
+						}, [(0, vue.createElementVNode)("button", {
+							class: "preview-dialog__backdrop",
+							type: "button",
+							"aria-label": "关闭实时预览",
+							onClick: closePreviewDialog
+						}), (0, vue.createElementVNode)("section", _hoisted_78, [
+							(0, vue.createElementVNode)("header", _hoisted_79, [_cache[39] || (_cache[39] = (0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", { class: "stage-kicker" }, "真实渲染"), (0, vue.createElementVNode)("h2", { id: "layout-preview-title" }, "实时预览")], -1)), (0, vue.createElementVNode)("div", _hoisted_80, [(0, vue.createElementVNode)("span", _hoisted_81, [_cache[38] || (_cache[38] = (0, vue.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, vue.createTextVNode)((0, vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)), 1)]), (0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": "关闭实时预览",
+								title: "关闭实时预览",
+								onClick: closePreviewDialog
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.X), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})])])]),
+							(0, vue.createElementVNode)("div", _hoisted_82, [(0, vue.createElementVNode)("div", _hoisted_83, [activeDevelopmentFramework.value === "vue" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LGrid), {
+								key: 0,
+								document: layout.value,
+								breakpoint: activeBreakpoint.value,
+								materials: (0, vue.unref)(materials),
+								target: activeDevelopmentFramework.value
+							}, {
+								item: (0, vue.withCtx)(({ item }) => [(0, vue.createVNode)((0, vue.unref)(LMaterialRenderer), (0, vue.mergeProps)({
+									item,
+									materials: (0, vue.unref)(materials),
+									target: activeDevelopmentFramework.value,
+									class: "preview-dialog__card"
+								}, item.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+								key: 1,
+								ref_key: "previewDialogRuntime",
+								ref: previewDialogRuntime,
+								class: "runtime-preview-grid preview-dialog__runtime-grid",
+								"data-preview-renderer": "webcomponent"
+							}, null, 512))])]),
+							(0, vue.createElementVNode)("footer", { class: "preview-dialog__footer" }, [_cache[40] || (_cache[40] = (0, vue.createElementVNode)("span", null, "此处展示当前布局的真实 CSS Grid 渲染结果", -1)), (0, vue.createElementVNode)("button", {
+								class: "preview-dialog__close-button",
+								type: "button",
+								onClick: closePreviewDialog
+							}, " 关闭预览 ")])
+						])], 8, _hoisted_77)) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 1
+					}),
+					(0, vue.createVNode)(vue.Transition, { name: "preview-dialog" }, {
+						default: (0, vue.withCtx)(() => [materialCodeDialog.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+							key: 0,
+							class: "preview-dialog material-code-dialog",
+							"data-material-code-dialog": "true",
+							"data-material-code-framework": activeDevelopmentFramework.value,
+							"data-material-code-type": materialCodeDialog.value.type,
+							"data-theme": theme.value,
+							role: "dialog",
+							"aria-modal": "true",
+							"aria-labelledby": "material-code-title"
+						}, [(0, vue.createElementVNode)("button", {
+							class: "preview-dialog__backdrop",
+							type: "button",
+							"aria-label": "关闭物料代码",
+							onClick: closeMaterialCode
+						}), (0, vue.createElementVNode)("section", _hoisted_85, [
+							(0, vue.createElementVNode)("header", _hoisted_86, [(0, vue.createElementVNode)("div", null, [
+								_cache[41] || (_cache[41] = (0, vue.createElementVNode)("span", { class: "stage-kicker" }, "注册表物料", -1)),
+								(0, vue.createElementVNode)("h2", _hoisted_87, (0, vue.toDisplayString)(materialCodeDialog.value.title ?? materialCodeDialog.value.label ?? materialCodeDialog.value.type), 1),
+								(0, vue.createElementVNode)("p", _hoisted_88, (0, vue.toDisplayString)(activeDevelopmentFramework.value === "vue" ? "Vue 3 真实组件用法" : "原生 Web Component 标签用法"), 1)
+							]), (0, vue.createElementVNode)("div", _hoisted_89, [(0, vue.createElementVNode)("span", _hoisted_90, [_cache[42] || (_cache[42] = (0, vue.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, vue.createTextVNode)((0, vue.toDisplayString)(activeDevelopmentFrameworkLabel.value), 1)]), (0, vue.createElementVNode)("button", {
+								class: "icon-button",
+								type: "button",
+								"aria-label": "关闭物料代码",
+								title: "关闭物料代码",
+								onClick: closeMaterialCode
+							}, [(0, vue.createVNode)((0, vue.unref)(lucide_vue_next.X), {
+								size: 16,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})])])]),
+							(0, vue.createElementVNode)("div", _hoisted_91, [(0, vue.createElementVNode)("pre", _hoisted_92, [(0, vue.createElementVNode)("code", { innerHTML: highlightedMaterialCode.value }, null, 8, _hoisted_93)])]),
+							(0, vue.createElementVNode)("footer", _hoisted_94, [(0, vue.createElementVNode)("span", null, "来自当前注册表的 " + (0, vue.toDisplayString)(activeDevelopmentFramework.value === "vue" ? "组件导出" : "自定义元素标签") + "，共 " + (0, vue.toDisplayString)(materialCodeLineCount.value) + " 行", 1), (0, vue.createElementVNode)("div", _hoisted_95, [(0, vue.createElementVNode)("button", {
+								class: "copy-code-button",
+								type: "button",
+								"aria-label": materialCodeCopied.value ? "代码已复制" : "复制物料代码",
+								title: materialCodeCopied.value ? "代码已复制" : "复制物料代码",
+								onClick: copyMaterialCode
+							}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(materialCodeCopied.value ? (0, vue.unref)(lucide_vue_next.CopyCheck) : (0, vue.unref)(lucide_vue_next.Copy)), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							}))], 8, _hoisted_96), (0, vue.createElementVNode)("button", {
+								class: "preview-dialog__close-button",
+								type: "button",
+								onClick: closeMaterialCode
+							}, " 关闭 ")])])
+						])], 8, _hoisted_84)) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 1
+					})
+				], 8, _hoisted_1);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/LLayoutWorkspace.vue
+	LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default.__file = "src/components/LLayoutWorkspace.vue";
+	var LLayoutWorkspace_default = LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
+	//#region src/components/LMaterialDragSource.ts
+	const LMaterialDragSource = (0, vue.defineComponent)({
+		name: "LMaterialDragSource",
+		props: {
+			/** Backwards-compatible shorthand when no full material definition is supplied. */
+			type: {
+				type: String,
+				default: void 0
+			},
+			material: {
+				type: Object,
+				default: void 0
+			},
+			props: {
+				type: Object,
+				default: () => ({})
+			},
+			placement: {
+				type: Object,
+				default: void 0
+			},
+			editor: {
+				type: Object,
+				required: true
+			}
+		},
+		setup(props, { slots }) {
+			let unregister = () => {};
+			let element;
+			const definition = props.material;
+			const materialType = definition?.type ?? props.type;
+			if (!materialType) throw new Error("LMaterialDragSource requires type or material.");
+			const materialProps = {
+				...definition?.defaults ?? {},
+				...props.props
+			};
+			const input = () => ({
+				type: materialType,
+				props: materialProps,
+				placement: {
+					x: props.placement?.x ?? 0,
+					y: props.placement?.y ?? 0,
+					w: props.placement?.w ?? definition?.defaultLayout?.w ?? definition?.size?.default.w ?? 1,
+					h: props.placement?.h ?? definition?.defaultLayout?.h ?? definition?.size?.default.h ?? 1
+				}
+			});
+			const start = (event) => {
+				props.editor.beginExternalDrag({
+					...input(),
+					element: event.currentTarget,
+					dataTransfer: event.dataTransfer ?? void 0
+				});
+			};
+			const end = () => props.editor.endExternalDrag();
+			(0, vue.onMounted)(() => {
+				if (element) unregister = props.editor.registerExternalDragSource({
+					...input(),
+					element
+				});
+				if (typeof document !== "undefined") document.addEventListener("dragend", end);
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				unregister();
+				if (typeof document !== "undefined") document.removeEventListener("dragend", end);
+			});
+			return () => (0, vue.h)("div", {
+				ref: (value) => {
+					element = value;
+				},
+				class: "ldesign-layout-material-drag-source grid-stack-item",
+				"data-material-type": materialType,
+				"data-material-category": definition?.category,
+				"data-material-title": definition?.title ?? definition?.label,
+				"aria-label": `\u6DFB\u52A0${definition?.title ?? definition?.label ?? materialType}`,
+				onDragstart: start
+			}, slots.default?.() ?? definition?.title ?? definition?.label ?? materialType);
+		}
+	});
+	//#endregion
+	//#region src/composables/useLayoutEditor.ts
+	function useLayoutEditor(options) {
+		const editor = (0, vue.shallowRef)((0, _composy_layout_editor.createLayoutEditor)(options));
+		(0, vue.onMounted)(() => editor.value.mount());
+		(0, vue.onBeforeUnmount)(() => editor.value.destroy());
+		return editor;
+	}
+	//#endregion
+	exports.LGrid = LGrid;
+	exports.LGridItem = LGridItem;
+	exports.LLayoutEditor = LLayoutEditor;
+	exports.LLayoutWorkspace = LLayoutWorkspace_default;
+	exports.LMaterialDragSource = LMaterialDragSource;
+	exports.LMaterialRenderer = LMaterialRenderer;
+	exports.LMetricCard = LMetricCard;
+	exports.LTrendCard = LTrendCard;
+	exports.useLayoutEditor = useLayoutEditor;
+});
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=index.js.map