@composy/layout-vue 0.0.1 → 0.0.2

package/esm/components/LLayoutWorkspace.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,2220 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-10-12 17:52:50 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { LGrid } from "./LGrid.js";
+import { LMaterialRenderer } from "./LMaterialRenderer.js";
+import { LMetricCard } from "./LMetricCard.js";
+import { LTrendCard } from "./LTrendCard.js";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { createLayoutRuntime } from "@composy/layout-runtime";
+import { createLayoutDocument, createMaterialRegistry, responsiveWebBreakpoints } from "@composy/layout-core";
+import { createLayoutEditor } from "@composy/layout-editor";
+import { GridStack } from "gridstack";
+import "gridstack/dist/gridstack.min.css";
+import { createElement, icons } from "lucide";
+import { ArrowLeftRight, ArrowUpDown, ChartNoAxesColumnIncreasing, ChartSpline, ChevronDown, Code2, Copy, CopyCheck, Download, Eye, Filter, Grid2X2, Hand, Lock, Maximize2, Monitor, Moon, MousePointer2, Move, PanelsTopLeft, Pencil, Plus, Redo2, RotateCcw, Scan, Search, Smartphone, Sun, Tablet, Trash2, Undo2, Unlock, X, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { compileLayout } from "@composy/layout-compiler";
+import { createGridStackEditorEngine } from "@composy/layout-gridstack";
+//#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__ */ 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: Monitor,
+			tablet: Tablet,
+			mobile: Smartphone
+		};
+		const routeIcons = {
+			editor: Grid2X2,
+			vanilla: Code2,
+			runtime: Eye,
+			vue: PanelsTopLeft
+		};
+		const developmentFrameworks = [{
+			id: "webcomponent",
+			label: "原生",
+			description: "原生 Web Component 物料",
+			icon: Code2
+		}, {
+			id: "vue",
+			label: "Vue 3",
+			description: "Vue 3 组件物料",
+			icon: 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 = createElement(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"];
+				}
+				get materialProps() {
+					return { ...this.props };
+				}
+				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 createMaterialRegistry(builtinMaterials);
+			if (!Array.isArray(input)) return input;
+			return createMaterialRegistry(input);
+		}
+		const materials = resolveWorkspaceMaterials(workspaceProps.materials);
+		const initial = workspaceProps.document ?? createLayoutDocument({
+			id: "layout-alpha-demo",
+			breakpoints: 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 = ref();
+		const canvasViewport = ref();
+		const runtimePreview = ref();
+		const vanillaRuntime = ref();
+		const previewDialogRuntime = ref();
+		const materialQuery = ref("");
+		const activeMaterialCategory = ref();
+		const activeDevelopmentFramework = ref("vue");
+		const materialElements = /* @__PURE__ */ new Map();
+		const materialSourceDisposers = /* @__PURE__ */ new Map();
+		const materialCategories = computed(() => materials.getCategories());
+		const activeMaterialCategoryLabel = computed(() => {
+			if (!activeMaterialCategory.value) return "全部分类";
+			return materialCategories.value.find((category) => category.id === activeMaterialCategory.value)?.label ?? "全部分类";
+		});
+		const activeDevelopmentFrameworkLabel = computed(() => developmentFrameworkLabel(activeDevelopmentFramework.value));
+		const materialCategoryFilter = computed({
+			get: () => activeMaterialCategory.value ?? "",
+			set: (value) => {
+				activeMaterialCategory.value = value || void 0;
+			}
+		});
+		const hasMaterialFilters = computed(() => Boolean(materialQuery.value.trim()) || Boolean(activeMaterialCategory.value));
+		const visibleMaterials = computed(() => materials.search({
+			query: materialQuery.value,
+			category: activeMaterialCategory.value,
+			framework: activeDevelopmentFramework.value
+		}));
+		const layout = ref(structuredClone(initial));
+		const selected = ref();
+		const selectedIds = ref([]);
+		const activeBreakpoint = ref("desktop");
+		const canvasOrientation = ref("landscape");
+		const deviceMenuOpen = ref(false);
+		const categoryMenuOpen = ref(false);
+		const developmentModeMenuOpen = ref(false);
+		const copied = ref(false);
+		const previewMode = ref(false);
+		const previewDialogOpen = ref(false);
+		const materialCodeDialog = ref();
+		const materialCodeCopied = ref(false);
+		const activeRoute = ref("editor");
+		const theme = ref(workspaceProps.theme ?? "light");
+		const canvasZoom = ref(1);
+		const canvasPan = ref({
+			x: 0,
+			y: 0
+		});
+		const canvasTool = ref("select");
+		const canvasPanning = ref(false);
+		const canvasSpacePressed = ref(false);
+		const canvasPanOrigin = ref({
+			x: 0,
+			y: 0,
+			panX: 0,
+			panY: 0
+		});
+		let editor;
+		let vanillaRuntimeInstance;
+		let previewDialogRuntimeInstance;
+		let previousGridStackRenderCallback;
+		let interactionPreviewFrame;
+		const disposers = [];
+		const currentDocument = computed(() => layout.value);
+		const canvasSize = 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 = computed(() => breakpointIcons[activeBreakpoint.value] ?? Monitor);
+		computed(() => JSON.stringify(currentDocument.value, null, 2));
+		const compiledResult = computed(() => compileLayout(currentDocument.value, {
+			target: "html-css",
+			breakpointId: activeBreakpoint.value,
+			materials,
+			materialCompiler: {
+				supports: () => true,
+				compile: (item) => renderExportMaterialMarkup(item)
+			}
+		}));
+		const compiled = computed(() => formatCss(compiledResult.value.css ?? ""));
+		const htmlSource = computed(() => {
+			const result = compiledResult.value;
+			return `<style>
+${compiled.value}
+</style>
+
+${formatMarkup(result.html ?? "")}`;
+		});
+		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>`);
+		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 = 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>`;
+		});
+		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 = computed(() => activeDevelopmentFramework.value === "vue" ? generatedVueSource.value : htmlSource.value);
+		const activeCodeLabel = computed(() => activeDevelopmentFramework.value === "vue" ? "Vue组件代码" : "原生代码");
+		const activeCodeExtension = 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 = computed(() => {
+			const material = materialCodeDialog.value;
+			if (!material) return "";
+			return activeDevelopmentFramework.value === "vue" ? materialVueCode(material) : materialWebComponentCode(material);
+		});
+		const highlightedMaterialCode = computed(() => highlightCode(materialCode.value));
+		const materialCodeLineCount = 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 = computed(() => highlightCode(activeCode.value));
+		const activeCodeLineCount = computed(() => activeCode.value.split("\n").length);
+		const canvasSceneStyle = 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 = computed(() => `${Math.round(canvasZoom.value * 100)}%`);
+		const selectedItem = computed(() => layout.value.items.find((item) => item.id === selected.value));
+		const selectedLocked = computed(() => Boolean(selectedItem.value?.state?.locked));
+		const selectedMovable = computed(() => selectedItem.value?.constraints?.movable !== false);
+		const selectedResizable = 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();
+			nextTick(() => {
+				syncVanillaRuntime();
+				syncPreviewDialogRuntime();
+				if (previewMode.value && editor) {
+					editor.setMode("edit");
+					nextTick(() => editor?.setMode("preview"));
+				}
+			});
+		}
+		function resetMaterialFilters() {
+			materialQuery.value = "";
+			activeMaterialCategory.value = void 0;
+			closeFilterMenus();
+		}
+		function materialIcon(type) {
+			return type === "chart" ? ChartSpline : 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);
+			}
+		}
+		watch([
+			materialQuery,
+			activeMaterialCategory,
+			activeDevelopmentFramework
+		], () => 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;
+			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 = 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);
+		}
+		watch([
+			previewDialogOpen,
+			activeDevelopmentFramework,
+			activeBreakpoint,
+			layout
+		], () => 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 = 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();
+				nextTick(clearEditorWidgets);
+			} else if (previewMode.value) editor?.setMode("edit");
+			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);
+		}
+		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.renderCB;
+			GridStack.renderCB = (element, widget) => {
+				if (element && widget?.content !== void 0) element.innerHTML = String(widget.content);
+			};
+			const engine = createGridStackEditorEngine({
+				container: editorGrid.value,
+				gridOptions: {
+					acceptWidgets: true,
+					animate: false
+				},
+				createGrid: (options) => GridStack.init(options, editorGrid.value),
+				renderItem: ({ item }) => renderCardMarkup(item, { interactive: true })
+			});
+			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";
+				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));
+			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();
+		});
+		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.renderCB = previousGridStackRenderCallback;
+				previousGridStackRenderCallback = void 0;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("main", {
+				class: "layout-demo",
+				"data-layout-workspace": "",
+				"data-theme": theme.value,
+				"data-development-framework": activeDevelopmentFramework.value
+			}, [
+				createElementVNode("header", _hoisted_2, [
+					createElementVNode("div", _hoisted_3, [
+						createElementVNode("span", _hoisted_4, [createVNode(unref(Grid2X2), {
+							size: 18,
+							"stroke-width": 1.8
+						})]),
+						_cache[20] || (_cache[20] = createElementVNode("div", { class: "brand-copy" }, [createElementVNode("strong", null, "布局工作台"), createElementVNode("span", null, "所见即所得 · 网格布局")], -1)),
+						createElementVNode("div", {
+							class: normalizeClass(["development-mode custom-select", { "is-open": developmentModeMenuOpen.value }]),
+							"data-layout-filter-menu": "",
+							onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+						}, [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: withModifiers(toggleDevelopmentModeMenu, ["stop"])
+						}, [
+							(openBlock(), createBlock(resolveDynamicComponent(developmentFrameworks.find((framework) => framework.id === activeDevelopmentFramework.value)?.icon ?? unref(PanelsTopLeft)), {
+								size: 14,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})),
+							createElementVNode("span", null, toDisplayString(activeDevelopmentFrameworkLabel.value), 1),
+							createVNode(unref(ChevronDown), {
+								size: 12,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})
+						], 8, _hoisted_5), developmentModeMenuOpen.value ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(), createElementBlock(Fragment, null, renderList(developmentFrameworks, (framework) => {
+							return createElementVNode("button", {
+								key: framework.id,
+								class: "custom-select__option",
+								type: "button",
+								"aria-selected": activeDevelopmentFramework.value === framework.id,
+								onClick: ($event) => selectDevelopmentFramework(framework.id)
+							}, [(openBlock(), createBlock(resolveDynamicComponent(framework.icon), {
+								size: 14,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})), createElementVNode("span", null, [createElementVNode("strong", null, toDisplayString(framework.label), 1), createElementVNode("small", null, toDisplayString(framework.description), 1)])], 8, _hoisted_7);
+						}), 64))])) : createCommentVNode("v-if", true)], 34)
+					]),
+					createElementVNode("div", _hoisted_8, [createElementVNode("nav", _hoisted_9, [(openBlock(), createElementBlock(Fragment, null, renderList(routes, (demoRoute) => {
+						return 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)
+						}, [(openBlock(), createBlock(resolveDynamicComponent(routeIcons[demoRoute.id]), {
+							class: "route-icon",
+							size: 15,
+							"stroke-width": 1.8,
+							"aria-hidden": "true"
+						})), createElementVNode("span", null, toDisplayString(demoRoute.label), 1)], 8, _hoisted_10);
+					}), 64))]), createElementVNode("div", _hoisted_11, [(openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.breakpoints, (breakpoint) => {
+						return openBlock(), 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)
+						}, [(openBlock(), createBlock(resolveDynamicComponent(breakpointIcons[breakpoint.id] ?? unref(Monitor)), {
+							size: 14,
+							"stroke-width": 1.8,
+							"aria-hidden": "true"
+						})), createElementVNode("span", null, toDisplayString(breakpointLabel(breakpoint.id)), 1)], 8, _hoisted_12);
+					}), 128)), createCommentVNode("v-if", true)])]),
+					createElementVNode("div", _hoisted_13, [
+						createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "撤销",
+							title: "撤销",
+							disabled: !unref(editor)?.canUndo(),
+							onClick: undo
+						}, [createVNode(unref(Undo2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, _hoisted_14),
+						createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "重做",
+							title: "重做",
+							disabled: !unref(editor)?.canRedo(),
+							onClick: redo
+						}, [createVNode(unref(Redo2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, _hoisted_15),
+						createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "删除选中组件",
+							title: "删除选中组件",
+							disabled: !selected.value,
+							onClick: removeSelected
+						}, [createVNode(unref(Trash2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, _hoisted_16),
+						createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": selectedLocked.value ? "解锁选中组件" : "锁定选中组件",
+							title: selectedLocked.value ? "解锁选中组件" : "锁定选中组件",
+							disabled: !selected.value,
+							onClick: toggleSelectedLock
+						}, [(openBlock(), createBlock(resolveDynamicComponent(selectedLocked.value ? unref(Unlock) : unref(Lock)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, _hoisted_17),
+						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"))
+						}, [createVNode(unref(Move), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, _hoisted_18),
+						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"))
+						}, [createVNode(unref(Maximize2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, _hoisted_19),
+						createElementVNode("button", {
+							class: "icon-button theme-button",
+							type: "button",
+							"aria-label": theme.value === "dark" ? "切换到亮色主题" : "切换到暗色主题",
+							title: theme.value === "dark" ? "切换到亮色主题" : "切换到暗色主题",
+							onClick: toggleTheme
+						}, [(openBlock(), createBlock(resolveDynamicComponent(theme.value === "dark" ? unref(Sun) : unref(Moon)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, _hoisted_20),
+						createElementVNode("button", {
+							class: "preview-open-button",
+							type: "button",
+							"aria-label": "打开实时预览",
+							title: "打开实时预览",
+							onClick: openPreviewDialog
+						}, [createVNode(unref(Eye), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}), _cache[21] || (_cache[21] = createElementVNode("span", null, "实时预览", -1))]),
+						createElementVNode("button", {
+							class: "mode-button",
+							type: "button",
+							"aria-pressed": previewMode.value,
+							"aria-label": previewMode.value ? "返回编辑模式" : "进入预览模式",
+							title: previewMode.value ? "返回编辑模式" : "进入预览模式",
+							onClick: togglePreview
+						}, [(openBlock(), createBlock(resolveDynamicComponent(previewMode.value ? unref(Pencil) : unref(Eye)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})), createElementVNode("span", null, toDisplayString(previewMode.value ? "编辑" : "预览"), 1)], 8, _hoisted_21)
+					])
+				]),
+				createElementVNode("section", _hoisted_22, [
+					createElementVNode("aside", _hoisted_23, [
+						createElementVNode("div", _hoisted_24, [_cache[22] || (_cache[22] = createElementVNode("div", null, [createElementVNode("span", { class: "eyebrow" }, "工作区"), createElementVNode("h2", null, "物料")], -1)), createElementVNode("span", _hoisted_25, toDisplayString(unref(materials).getAll().length), 1)]),
+						createElementVNode("div", _hoisted_26, [
+							createElementVNode("label", _hoisted_27, [createVNode(unref(Search), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							}), withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => materialQuery.value = $event),
+								type: "search",
+								placeholder: "搜索物料",
+								"aria-label": "搜索物料"
+							}, null, 512), [[vModelText, materialQuery.value]])]),
+							createElementVNode("div", {
+								class: "material-filter-row",
+								"data-layout-filter-menu": "",
+								onKeydown: withKeys(withModifiers(handleFilterMenuKeydown, ["stop", "prevent"]), ["esc"])
+							}, [createElementVNode("div", {
+								class: normalizeClass(["material-select custom-select", { "is-open": categoryMenuOpen.value }]),
+								onPointerdown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
+							}, [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] = withModifiers(($event) => toggleFilterMenu("category"), ["stop"]))
+							}, [
+								createVNode(unref(Filter), {
+									size: 13,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								}),
+								createElementVNode("span", null, toDisplayString(activeMaterialCategoryLabel.value), 1),
+								createVNode(unref(ChevronDown), {
+									size: 12,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})
+							], 8, _hoisted_29), categoryMenuOpen.value ? (openBlock(), createElementBlock("div", _hoisted_30, [createElementVNode("button", {
+								class: "custom-select__option",
+								type: "button",
+								"aria-selected": !materialCategoryFilter.value,
+								onClick: _cache[5] || (_cache[5] = ($event) => selectMaterialCategory(""))
+							}, " 全部分类 ", 8, _hoisted_31), (openBlock(true), createElementBlock(Fragment, null, renderList(materialCategories.value, (category) => {
+								return openBlock(), createElementBlock("button", {
+									key: category.id,
+									class: "custom-select__option",
+									type: "button",
+									"aria-selected": materialCategoryFilter.value === category.id,
+									onClick: ($event) => selectMaterialCategory(category.id)
+								}, toDisplayString(category.label), 9, _hoisted_32);
+							}), 128))])) : createCommentVNode("v-if", true)], 34), hasMaterialFilters.value ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								class: "material-filter-reset",
+								type: "button",
+								"aria-label": "清除物料筛选",
+								title: "清除筛选",
+								onClick: resetMaterialFilters
+							}, [createVNode(unref(X), {
+								size: 13,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})])) : createCommentVNode("v-if", true)], 40, _hoisted_28),
+							createElementVNode("div", _hoisted_33, [createElementVNode("span", null, toDisplayString(visibleMaterials.value.length) + " / " + toDisplayString(unref(materials).getAll().length) + " 个物料", 1), hasMaterialFilters.value ? (openBlock(), createElementBlock("span", _hoisted_34, "已筛选")) : createCommentVNode("v-if", true)])
+						]),
+						!visibleMaterials.value.length ? (openBlock(), createElementBlock("div", _hoisted_35, [
+							createVNode(unref(Search), {
+								size: 17,
+								"stroke-width": 1.7,
+								"aria-hidden": "true"
+							}),
+							_cache[23] || (_cache[23] = createElementVNode("strong", null, "没有匹配的物料", -1)),
+							_cache[24] || (_cache[24] = createElementVNode("span", null, "试试更换关键词或分类", -1)),
+							hasMaterialFilters.value ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								onClick: resetMaterialFilters
+							}, " 清除筛选 ")) : createCommentVNode("v-if", true)
+						])) : createCommentVNode("v-if", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(visibleMaterials.value, (material) => {
+							return openBlock(), 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: [withKeys(($event) => add(material.type), ["enter"]), withKeys(withModifiers(($event) => add(material.type), ["prevent"]), ["space"])]
+							}, [
+								createElementVNode("span", _hoisted_37, [(openBlock(), createBlock(resolveDynamicComponent(materialIcon(material.type)), {
+									size: 18,
+									"stroke-width": 1.8
+								}))]),
+								createElementVNode("span", _hoisted_38, [createElementVNode("strong", null, toDisplayString(material.title ?? material.label ?? material.type), 1), createElementVNode("small", null, toDisplayString(material.description ?? material.categoryLabel ?? "布局组件"), 1)]),
+								createElementVNode("span", _hoisted_39, [createElementVNode("span", _hoisted_40, toDisplayString(material.defaultLayout?.w ?? material.size?.default.w ?? 1) + " × " + toDisplayString(material.defaultLayout?.h ?? material.size?.default.h ?? 1), 1), createElementVNode("span", _hoisted_41, [createElementVNode("span", {
+									class: normalizeClass(["material-renderer-badge", { "material-renderer-badge--vue": activeDevelopmentFramework.value === "vue" }]),
+									title: `\u5F53\u524D\u5F00\u53D1\u76EE\u6807\uFF1A${activeDevelopmentFrameworkLabel.value}`
+								}, [(openBlock(), createBlock(resolveDynamicComponent(activeDevelopmentFramework.value === "vue" ? unref(PanelsTopLeft) : unref(Code2)), {
+									size: 11,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})), createElementVNode("span", null, toDisplayString(activeDevelopmentFrameworkLabel.value), 1)], 10, _hoisted_42)])]),
+								createElementVNode("span", _hoisted_43, [createElementVNode("button", {
+									class: "material-code-button",
+									type: "button",
+									"aria-label": "查看当前物料代码",
+									title: "查看当前物料代码",
+									onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+									onClick: withModifiers(($event) => openMaterialCode(material.type), ["stop"])
+								}, [createVNode(unref(Code2), {
+									size: 14,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})], 40, _hoisted_44), createElementVNode("span", _hoisted_45, [createVNode(unref(Plus), {
+									size: 16,
+									"stroke-width": 1.8
+								})])])
+							], 40, _hoisted_36);
+						}), 128)),
+						createCommentVNode("v-if", true),
+						createCommentVNode("v-if", true)
+					]),
+					createElementVNode("section", _hoisted_50, [createElementVNode("div", _hoisted_51, [
+						createElementVNode("div", {
+							class: normalizeClass(["canvas-device-control custom-select", { "is-open": deviceMenuOpen.value }]),
+							onPointerdown: _cache[15] || (_cache[15] = withModifiers(() => {}, ["stop"]))
+						}, [createElementVNode("button", {
+							class: "custom-select__trigger",
+							type: "button",
+							"aria-haspopup": "listbox",
+							"aria-expanded": deviceMenuOpen.value,
+							"aria-label": "设备画布",
+							onClick: _cache[14] || (_cache[14] = withModifiers(($event) => toggleFilterMenu("device"), ["stop"]))
+						}, [
+							(openBlock(), createBlock(resolveDynamicComponent(activeBreakpointIcon.value), {
+								size: 13,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})),
+							createElementVNode("span", null, toDisplayString(breakpointLabel(activeBreakpoint.value)), 1),
+							createVNode(unref(ChevronDown), {
+								size: 12,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})
+						], 8, _hoisted_52), deviceMenuOpen.value ? (openBlock(), createElementBlock("div", _hoisted_53, [(openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.breakpoints, (breakpoint) => {
+							return openBlock(), createElementBlock("button", {
+								key: breakpoint.id,
+								class: "custom-select__option",
+								type: "button",
+								"aria-selected": activeBreakpoint.value === breakpoint.id,
+								"aria-label": `${breakpointLabel(breakpoint.id)} / ${breakpoint.columns} \u5217`,
+								onClick: ($event) => selectBreakpoint(breakpoint.id)
+							}, [
+								(openBlock(), createBlock(resolveDynamicComponent(breakpointIcons[breakpoint.id] ?? unref(Monitor)), {
+									size: 13,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})),
+								createElementVNode("span", null, toDisplayString(breakpointLabel(breakpoint.id)), 1),
+								createElementVNode("span", _hoisted_55, toDisplayString(breakpoint.columns) + " 列", 1)
+							], 8, _hoisted_54);
+						}), 128))])) : createCommentVNode("v-if", true)], 34),
+						createElementVNode("button", {
+							class: "orientation-button",
+							type: "button",
+							"aria-label": canvasOrientation.value === "portrait" ? "切换为横屏" : "切换为竖屏",
+							title: canvasOrientation.value === "portrait" ? "切换为横屏" : "切换为竖屏",
+							onClick: toggleCanvasOrientation
+						}, [(openBlock(), createBlock(resolveDynamicComponent(canvasOrientation.value === "portrait" ? unref(ArrowLeftRight) : unref(ArrowUpDown)), {
+							size: 14,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, _hoisted_56),
+						_cache[27] || (_cache[27] = createElementVNode("span", {
+							class: "canvas-toolbar__device-divider",
+							"aria-hidden": "true"
+						}, null, -1)),
+						createElementVNode("div", _hoisted_57, [createElementVNode("button", {
+							class: normalizeClass(["canvas-tool-button", { active: canvasTool.value === "select" }]),
+							type: "button",
+							"aria-label": "选择组件",
+							title: "选择组件",
+							onClick: _cache[16] || (_cache[16] = ($event) => canvasTool.value = "select")
+						}, [createVNode(unref(MousePointer2), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 2), createElementVNode("button", {
+							class: 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")
+						}, [createVNode(unref(Hand), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 2)]),
+						_cache[28] || (_cache[28] = createElementVNode("div", {
+							class: "canvas-toolbar__divider",
+							"aria-hidden": "true"
+						}, null, -1)),
+						createElementVNode("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "缩小画布",
+							title: "缩小画布",
+							onClick: _cache[18] || (_cache[18] = ($event) => zoomCanvas(-1))
+						}, [createVNode(unref(ZoomOut), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						createElementVNode("span", _hoisted_58, toDisplayString(canvasZoomLabel.value), 1),
+						createElementVNode("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "放大画布",
+							title: "放大画布",
+							onClick: _cache[19] || (_cache[19] = ($event) => zoomCanvas(1))
+						}, [createVNode(unref(ZoomIn), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						createElementVNode("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "适配画布",
+							title: "适配画布",
+							onClick: resetCanvasView
+						}, [createVNode(unref(Scan), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						createElementVNode("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "重置画布位置",
+							title: "重置画布位置",
+							onClick: resetCanvasPan
+						}, [createVNode(unref(RotateCcw), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])
+					]), createElementVNode("div", {
+						ref_key: "canvasViewport",
+						ref: canvasViewport,
+						class: normalizeClass(["canvas-viewport", {
+							"is-panning": canvasPanning.value,
+							"is-pan-tool": canvasTool.value === "pan"
+						}]),
+						onWheel: handleCanvasWheel,
+						onPointerdownCapture: handleCanvasPointerDown,
+						onPointermove: handleCanvasPointerMove,
+						onPointerup: finishCanvasPan,
+						onPointercancel: finishCanvasPan
+					}, [createElementVNode("div", {
+						class: normalizeClass(["canvas-scene", `is-${canvasOrientation.value}`]),
+						"data-canvas-width": canvasSize.value.width,
+						"data-canvas-height": canvasSize.value.height,
+						"data-canvas-orientation": canvasOrientation.value,
+						style: normalizeStyle(canvasSceneStyle.value)
+					}, [
+						withDirectives(createElementVNode("section", _hoisted_60, [createElementVNode("header", _hoisted_61, [_cache[30] || (_cache[30] = createElementVNode("div", null, [createElementVNode("span", { class: "stage-kicker" }, "编辑模式"), createElementVNode("h2", null, "拖拽布局")], -1)), createElementVNode("span", _hoisted_62, [_cache[29] || (_cache[29] = createElementVNode("i", { "aria-hidden": "true" }, null, -1)), createTextVNode(toDisplayString(breakpointLabel(activeBreakpoint.value)), 1)])]), createElementVNode("div", {
+							ref_key: "editorGrid",
+							ref: editorGrid,
+							class: "grid-stack layout-editor-grid",
+							role: "grid",
+							"aria-label": "网格布局编辑器",
+							"aria-multiselectable": "true"
+						}, null, 512)], 512), [[vShow, activeRoute.value === "editor" && !previewMode.value]]),
+						withDirectives(createElementVNode("section", _hoisted_63, [_cache[31] || (_cache[31] = createElementVNode("header", { class: "stage-header" }, [createElementVNode("div", null, [createElementVNode("span", { class: "stage-kicker" }, "预览模式"), createElementVNode("h2", null, "组件渲染")]), createElementVNode("span", { class: "stage-badge" }, [createElementVNode("i", { "aria-hidden": "true" }), createTextVNode("同步布局")])], -1)), createVNode(unref(LGrid), {
+							document: layout.value,
+							breakpoint: activeBreakpoint.value,
+							materials: unref(materials),
+							target: activeDevelopmentFramework.value
+						}, {
+							item: withCtx(({ item }) => [createElementVNode("button", {
+								class: 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)
+							}, [createVNode(unref(LMaterialRenderer), mergeProps({
+								item,
+								materials: unref(materials),
+								target: activeDevelopmentFramework.value
+							}, item.props), null, 16, [
+								"item",
+								"materials",
+								"target"
+							])], 10, _hoisted_64)]),
+							_: 1
+						}, 8, [
+							"document",
+							"breakpoint",
+							"materials",
+							"target"
+						])], 512), [[vShow, activeRoute.value === "vue"]]),
+						withDirectives(createElementVNode("section", {
+							class: "runtime-preview-stage",
+							"data-preview-framework": activeDevelopmentFramework.value,
+							"aria-label": "运行时预览画布"
+						}, [
+							createElementVNode("header", _hoisted_66, [_cache[33] || (_cache[33] = createElementVNode("div", null, [createElementVNode("span", { class: "stage-kicker" }, "预览模式"), createElementVNode("h2", null, "运行时预览")], -1)), createElementVNode("span", _hoisted_67, [_cache[32] || (_cache[32] = createElementVNode("i", { "aria-hidden": "true" }, null, -1)), createTextVNode(toDisplayString(activeDevelopmentFrameworkLabel.value) + " · 只读", 1)])]),
+							activeDevelopmentFramework.value === "vue" ? (openBlock(), createBlock(unref(LGrid), {
+								key: 0,
+								document: layout.value,
+								breakpoint: activeBreakpoint.value,
+								materials: unref(materials),
+								target: activeDevelopmentFramework.value
+							}, {
+								item: withCtx(({ item }) => [createVNode(unref(LMaterialRenderer), mergeProps({
+									item,
+									materials: unref(materials),
+									target: activeDevelopmentFramework.value,
+									class: "preview-dialog__card"
+								}, item.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])) : createCommentVNode("v-if", true),
+							withDirectives(createElementVNode("div", {
+								ref_key: "runtimePreview",
+								ref: runtimePreview,
+								class: "runtime-preview-grid",
+								"data-preview-renderer": "webcomponent"
+							}, null, 512), [[vShow, activeDevelopmentFramework.value === "webcomponent"]])
+						], 8, _hoisted_65), [[vShow, activeRoute.value === "runtime" && previewMode.value]]),
+						withDirectives(createElementVNode("section", {
+							class: "vanilla-runtime-stage",
+							"data-preview-framework": activeDevelopmentFramework.value,
+							"aria-label": "原生运行时画布"
+						}, [
+							createElementVNode("header", _hoisted_69, [_cache[35] || (_cache[35] = createElementVNode("div", null, [createElementVNode("span", { class: "stage-kicker" }, "预览模式"), createElementVNode("h2", null, "原生运行时")], -1)), createElementVNode("span", _hoisted_70, [_cache[34] || (_cache[34] = createElementVNode("i", { "aria-hidden": "true" }, null, -1)), createTextVNode(toDisplayString(activeDevelopmentFrameworkLabel.value) + " · 只读", 1)])]),
+							activeDevelopmentFramework.value === "vue" ? (openBlock(), createBlock(unref(LGrid), {
+								key: 0,
+								document: layout.value,
+								breakpoint: activeBreakpoint.value,
+								materials: unref(materials),
+								target: activeDevelopmentFramework.value
+							}, {
+								item: withCtx(({ item }) => [createVNode(unref(LMaterialRenderer), mergeProps({
+									item,
+									materials: unref(materials),
+									target: activeDevelopmentFramework.value,
+									class: "preview-dialog__card"
+								}, item.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])) : createCommentVNode("v-if", true),
+							withDirectives(createElementVNode("div", {
+								ref_key: "vanillaRuntime",
+								ref: vanillaRuntime,
+								class: "runtime-preview-grid",
+								"data-preview-renderer": "webcomponent"
+							}, null, 512), [[vShow, activeDevelopmentFramework.value === "webcomponent"]])
+						], 8, _hoisted_68), [[vShow, activeRoute.value === "vanilla"]])
+					], 14, _hoisted_59)], 34)]),
+					createElementVNode("aside", _hoisted_71, [
+						createElementVNode("div", _hoisted_72, [
+							createElementVNode("div", null, [_cache[36] || (_cache[36] = createElementVNode("span", { class: "eyebrow" }, "实时输出", -1)), createElementVNode("h2", null, toDisplayString(activeCodeLabel.value), 1)]),
+							createElementVNode("button", {
+								class: "copy-code-button",
+								type: "button",
+								"aria-label": copied.value ? "代码已复制" : "复制当前代码",
+								title: copied.value ? "代码已复制" : "复制当前代码",
+								onClick: copyActiveCode
+							}, [(openBlock(), createBlock(resolveDynamicComponent(copied.value ? unref(CopyCheck) : unref(Copy)), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							}))], 8, _hoisted_73),
+							createElementVNode("button", {
+								class: "download-code-button",
+								type: "button",
+								"aria-label": "下载当前代码",
+								title: "下载当前代码",
+								onClick: downloadActiveCode
+							}, [createVNode(unref(Download), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})])
+						]),
+						createElementVNode("pre", _hoisted_74, [createElementVNode("code", { innerHTML: highlightedCode.value }, null, 8, _hoisted_75)]),
+						createElementVNode("div", _hoisted_76, [_cache[37] || (_cache[37] = createElementVNode("span", {
+							class: "code-status__dot",
+							"aria-hidden": "true"
+						}, null, -1)), createElementVNode("span", null, "已根据当前布局、" + toDisplayString(breakpointLabel(activeBreakpoint.value)) + "断点实时生成 · 共 " + toDisplayString(activeCodeLineCount.value) + " 行，可滚动查看完整输出", 1)])
+					])
+				]),
+				createVNode(Transition, { name: "preview-dialog" }, {
+					default: withCtx(() => [previewDialogOpen.value ? (openBlock(), 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"
+					}, [createElementVNode("button", {
+						class: "preview-dialog__backdrop",
+						type: "button",
+						"aria-label": "关闭实时预览",
+						onClick: closePreviewDialog
+					}), createElementVNode("section", _hoisted_78, [
+						createElementVNode("header", _hoisted_79, [_cache[39] || (_cache[39] = createElementVNode("div", null, [createElementVNode("span", { class: "stage-kicker" }, "真实渲染"), createElementVNode("h2", { id: "layout-preview-title" }, "实时预览")], -1)), createElementVNode("div", _hoisted_80, [createElementVNode("span", _hoisted_81, [_cache[38] || (_cache[38] = createElementVNode("i", { "aria-hidden": "true" }, null, -1)), createTextVNode(toDisplayString(breakpointLabel(activeBreakpoint.value)), 1)]), createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "关闭实时预览",
+							title: "关闭实时预览",
+							onClick: closePreviewDialog
+						}, [createVNode(unref(X), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])])]),
+						createElementVNode("div", _hoisted_82, [createElementVNode("div", _hoisted_83, [activeDevelopmentFramework.value === "vue" ? (openBlock(), createBlock(unref(LGrid), {
+							key: 0,
+							document: layout.value,
+							breakpoint: activeBreakpoint.value,
+							materials: unref(materials),
+							target: activeDevelopmentFramework.value
+						}, {
+							item: withCtx(({ item }) => [createVNode(unref(LMaterialRenderer), mergeProps({
+								item,
+								materials: unref(materials),
+								target: activeDevelopmentFramework.value,
+								class: "preview-dialog__card"
+							}, item.props), null, 16, [
+								"item",
+								"materials",
+								"target"
+							])]),
+							_: 1
+						}, 8, [
+							"document",
+							"breakpoint",
+							"materials",
+							"target"
+						])) : (openBlock(), createElementBlock("div", {
+							key: 1,
+							ref_key: "previewDialogRuntime",
+							ref: previewDialogRuntime,
+							class: "runtime-preview-grid preview-dialog__runtime-grid",
+							"data-preview-renderer": "webcomponent"
+						}, null, 512))])]),
+						createElementVNode("footer", { class: "preview-dialog__footer" }, [_cache[40] || (_cache[40] = createElementVNode("span", null, "此处展示当前布局的真实 CSS Grid 渲染结果", -1)), createElementVNode("button", {
+							class: "preview-dialog__close-button",
+							type: "button",
+							onClick: closePreviewDialog
+						}, " 关闭预览 ")])
+					])], 8, _hoisted_77)) : createCommentVNode("v-if", true)]),
+					_: 1
+				}),
+				createVNode(Transition, { name: "preview-dialog" }, {
+					default: withCtx(() => [materialCodeDialog.value ? (openBlock(), 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"
+					}, [createElementVNode("button", {
+						class: "preview-dialog__backdrop",
+						type: "button",
+						"aria-label": "关闭物料代码",
+						onClick: closeMaterialCode
+					}), createElementVNode("section", _hoisted_85, [
+						createElementVNode("header", _hoisted_86, [createElementVNode("div", null, [
+							_cache[41] || (_cache[41] = createElementVNode("span", { class: "stage-kicker" }, "注册表物料", -1)),
+							createElementVNode("h2", _hoisted_87, toDisplayString(materialCodeDialog.value.title ?? materialCodeDialog.value.label ?? materialCodeDialog.value.type), 1),
+							createElementVNode("p", _hoisted_88, toDisplayString(activeDevelopmentFramework.value === "vue" ? "Vue 3 真实组件用法" : "原生 Web Component 标签用法"), 1)
+						]), createElementVNode("div", _hoisted_89, [createElementVNode("span", _hoisted_90, [_cache[42] || (_cache[42] = createElementVNode("i", { "aria-hidden": "true" }, null, -1)), createTextVNode(toDisplayString(activeDevelopmentFrameworkLabel.value), 1)]), createElementVNode("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "关闭物料代码",
+							title: "关闭物料代码",
+							onClick: closeMaterialCode
+						}, [createVNode(unref(X), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])])]),
+						createElementVNode("div", _hoisted_91, [createElementVNode("pre", _hoisted_92, [createElementVNode("code", { innerHTML: highlightedMaterialCode.value }, null, 8, _hoisted_93)])]),
+						createElementVNode("footer", _hoisted_94, [createElementVNode("span", null, "来自当前注册表的 " + toDisplayString(activeDevelopmentFramework.value === "vue" ? "组件导出" : "自定义元素标签") + "，共 " + toDisplayString(materialCodeLineCount.value) + " 行", 1), createElementVNode("div", _hoisted_95, [createElementVNode("button", {
+							class: "copy-code-button",
+							type: "button",
+							"aria-label": materialCodeCopied.value ? "代码已复制" : "复制物料代码",
+							title: materialCodeCopied.value ? "代码已复制" : "复制物料代码",
+							onClick: copyMaterialCode
+						}, [(openBlock(), createBlock(resolveDynamicComponent(materialCodeCopied.value ? unref(CopyCheck) : unref(Copy)), {
+							size: 15,
+							"stroke-width": 1.8,
+							"aria-hidden": "true"
+						}))], 8, _hoisted_96), createElementVNode("button", {
+							class: "preview-dialog__close-button",
+							type: "button",
+							onClick: closeMaterialCode
+						}, " 关闭 ")])])
+					])], 8, _hoisted_84)) : createCommentVNode("v-if", true)]),
+					_: 1
+				})
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default as default };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LLayoutWorkspace.vue_vue_type_script_setup_true_lang.js.map