@composy/layout-vue 0.0.1

package/es/components/LMaterialRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMaterialRenderer.js","names":[],"sources":["../../src/components/LMaterialRenderer.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from 'vue'\nimport type { LayoutNode, LayoutPlacement } from '@composy/layout-core'\nimport {\n  renderMaterialForTarget,\n  type LayoutRenderTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\n/**\n * A target-aware renderer for one registered layout material.\n *\n * `LGrid` owns the placement shell; this component owns the renderer lookup.\n * Consumers can therefore use the same item renderer in an editor, a preview,\n * a modal or their own grid implementation without duplicating framework\n * branching logic.\n */\nexport const LMaterialRenderer = defineComponent({\n  name: 'LMaterialRenderer',\n  props: {\n    item: { type: Object as PropType<LayoutNode>, required: true },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: {\n      type: String as PropType<LayoutRenderTarget>,\n      default: 'vue',\n    },\n    placement: {\n      type: Object as PropType<LayoutPlacement>,\n      default: undefined,\n    },\n    breakpointId: { type: String, default: 'desktop' },\n  },\n  setup(props, { attrs }) {\n    return () => {\n      const rendered = renderMaterialForTarget(\n        props.materials,\n        props.item,\n        props.target,\n        props.placement,\n        props.breakpointId\n      )\n      if (!rendered) return null\n      return h(rendered, attrs)\n    }\n  },\n})\n\nexport type { LayoutRenderTarget }\n"],"mappings":";;;;;;;;;;;;AAgBO,MAAM,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAgC,UAAU;EAAK;EAC7D,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GACN,MAAM;GACN,SAAS;EACX;EACA,WAAW;GACT,MAAM;GACN,SAAS,KAAA;EACX;EACA,cAAc;GAAE,MAAM;GAAQ,SAAS;EAAU;CACnD;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aAAa;GACX,MAAM,WAAW,wBACf,MAAM,WACN,MAAM,MACN,MAAM,QACN,MAAM,WACN,MAAM,YACR;GACA,IAAI,CAAC,UAAU,OAAO;GACtB,OAAO,EAAE,UAAU,KAAK;EAC1B;CACF;AACF,CAAC"}

package/es/components/LMetricCard.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Reference Vue material used by the layout examples and as a small,
+ * framework-native registration contract for consumers.
+ */
+export declare const LMetricCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    value: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LMetricCard.d.ts.map

package/es/components/LMetricCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMetricCard.d.ts","sourceRoot":"","sources":["../../src/components/LMetricCard.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;4EA2BtB,CAAA"}

package/es/components/LMetricCard.js

@@ -0,0 +1,39 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { defineComponent, h } from "vue";
+//#region src/components/LMetricCard.ts
+const LMetricCard = defineComponent({
+	name: "LMetricCard",
+	props: {
+		title: {
+			type: String,
+			default: "数据指标"
+		},
+		value: {
+			type: [String, Number],
+			default: void 0
+		}
+	},
+	setup(props) {
+		return () => h("article", {
+			class: "layout-card",
+			"data-layout-card": ""
+		}, [
+			h("div", { class: "layout-card__meta" }, [h("span", { class: "layout-card__type" }, "数据指标"), h("span", { class: "layout-card__status" }, "已配置")]),
+			h("h3", { class: "layout-card__title" }, props.title),
+			props.value === void 0 ? null : h("strong", { class: "layout-card__value" }, Number(props.value).toLocaleString("zh-CN")),
+			h("div", { class: "layout-card__footer" }, [h("span", null, "实时数据"), h("span", { class: "layout-card__spark" }, "趋势稳定")])
+		]);
+	}
+});
+//#endregion
+export { LMetricCard };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LMetricCard.js.map

package/es/components/LMetricCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMetricCard.js","names":[],"sources":["../../src/components/LMetricCard.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\n\n/**\n * Reference Vue material used by the layout examples and as a small,\n * framework-native registration contract for consumers.\n */\nexport const LMetricCard = defineComponent({\n  name: 'LMetricCard',\n  props: {\n    title: { type: String, default: '数据指标' },\n    value: { type: [String, Number], default: undefined },\n  },\n  setup(props) {\n    return () =>\n      h('article', { class: 'layout-card', 'data-layout-card': '' }, [\n        h('div', { class: 'layout-card__meta' }, [\n          h('span', { class: 'layout-card__type' }, '数据指标'),\n          h('span', { class: 'layout-card__status' }, '已配置'),\n        ]),\n        h('h3', { class: 'layout-card__title' }, props.title),\n        props.value === undefined\n          ? null\n          : h(\n              'strong',\n              { class: 'layout-card__value' },\n              Number(props.value).toLocaleString('zh-CN')\n            ),\n        h('div', { class: 'layout-card__footer' }, [\n          h('span', null, '实时数据'),\n          h('span', { class: 'layout-card__spark' }, '趋势稳定'),\n        ]),\n      ])\n  },\n})\n"],"mappings":";;;;;;;;;;;AAMO,MAAM,cAAc,gBAAgB;CACzC,MAAM;CACN,OAAO;EACL,OAAO;GAAE,MAAM;GAAQ,SAAS;EAAO;EACvC,OAAO;GAAE,MAAM,CAAC,QAAQ,MAAM;GAAG,SAAS,KAAA;EAAU;CACtD;CACA,MAAM,OAAO;EACX,aACE,EAAE,WAAW;GAAE,OAAO;GAAe,oBAAoB;EAAG,GAAG;GAC7D,EAAE,OAAO,EAAE,OAAO,oBAAoB,GAAG,CACvC,EAAE,QAAQ,EAAE,OAAO,oBAAoB,GAAG,MAAM,GAChD,EAAE,QAAQ,EAAE,OAAO,sBAAsB,GAAG,KAAK,CACnD,CAAC;GACD,EAAE,MAAM,EAAE,OAAO,qBAAqB,GAAG,MAAM,KAAK;GACpD,MAAM,UAAU,KAAA,IACZ,OACA,EACE,UACA,EAAE,OAAO,qBAAqB,GAC9B,OAAO,MAAM,KAAK,CAAA,CAAE,eAAe,OAAO,CAC5C;GACJ,EAAE,OAAO,EAAE,OAAO,sBAAsB,GAAG,CACzC,EAAE,QAAQ,MAAM,MAAM,GACtB,EAAE,QAAQ,EAAE,OAAO,qBAAqB,GAAG,MAAM,CACnD,CAAC;EACH,CAAC;CACL;AACF,CAAC"}

package/es/components/LTrendCard.d.ts

@@ -0,0 +1,17 @@
+/** Reference Vue chart material for renderer registration examples. */
+export declare const LTrendCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LTrendCard.d.ts.map

package/es/components/LTrendCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LTrendCard.d.ts","sourceRoot":"","sources":["../../src/components/LTrendCard.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,eAAO,MAAM,UAAU;;;;;;;;;;;;;;4EAwBrB,CAAA"}

package/es/components/LTrendCard.js

@@ -0,0 +1,36 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { defineComponent, h } from "vue";
+//#region src/components/LTrendCard.ts
+const LTrendCard = defineComponent({
+	name: "LTrendCard",
+	props: { title: {
+		type: String,
+		default: "趋势图表"
+	} },
+	setup(props) {
+		return () => h("article", {
+			class: "layout-card",
+			"data-layout-card": ""
+		}, [
+			h("div", { class: "layout-card__meta" }, [h("span", { class: "layout-card__type" }, "趋势图表"), h("span", { class: "layout-card__status" }, "已配置")]),
+			h("h3", { class: "layout-card__title" }, props.title),
+			h("span", {
+				class: "layout-card__chart",
+				"aria-hidden": "true"
+			}, Array.from({ length: 5 }, (_, index) => h("i", { key: index }))),
+			h("div", { class: "layout-card__footer" }, [h("span", null, "实时数据"), h("span", { class: "layout-card__spark" }, "趋势稳定")])
+		]);
+	}
+});
+//#endregion
+export { LTrendCard };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LTrendCard.js.map

package/es/components/LTrendCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LTrendCard.js","names":[],"sources":["../../src/components/LTrendCard.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\n\n/** Reference Vue chart material for renderer registration examples. */\nexport const LTrendCard = defineComponent({\n  name: 'LTrendCard',\n  props: {\n    title: { type: String, default: '趋势图表' },\n  },\n  setup(props) {\n    return () =>\n      h('article', { class: 'layout-card', 'data-layout-card': '' }, [\n        h('div', { class: 'layout-card__meta' }, [\n          h('span', { class: 'layout-card__type' }, '趋势图表'),\n          h('span', { class: 'layout-card__status' }, '已配置'),\n        ]),\n        h('h3', { class: 'layout-card__title' }, props.title),\n        h(\n          'span',\n          { class: 'layout-card__chart', 'aria-hidden': 'true' },\n          Array.from({ length: 5 }, (_, index) => h('i', { key: index }))\n        ),\n        h('div', { class: 'layout-card__footer' }, [\n          h('span', null, '实时数据'),\n          h('span', { class: 'layout-card__spark' }, '趋势稳定'),\n        ]),\n      ])\n  },\n})\n"],"mappings":";;;;;;;;;;;AAGO,MAAM,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAAQ,SAAS;CAAO,EACzC;CACA,MAAM,OAAO;EACX,aACE,EAAE,WAAW;GAAE,OAAO;GAAe,oBAAoB;EAAG,GAAG;GAC7D,EAAE,OAAO,EAAE,OAAO,oBAAoB,GAAG,CACvC,EAAE,QAAQ,EAAE,OAAO,oBAAoB,GAAG,MAAM,GAChD,EAAE,QAAQ,EAAE,OAAO,sBAAsB,GAAG,KAAK,CACnD,CAAC;GACD,EAAE,MAAM,EAAE,OAAO,qBAAqB,GAAG,MAAM,KAAK;GACpD,EACE,QACA;IAAE,OAAO;IAAsB,eAAe;GAAO,GACrD,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAAU,EAAE,KAAK,EAAE,KAAK,MAAM,CAAC,CAAC,CAChE;GACA,EAAE,OAAO,EAAE,OAAO,sBAAsB,GAAG,CACzC,EAAE,QAAQ,MAAM,MAAM,GACtB,EAAE,QAAQ,EAAE,OAAO,qBAAqB,GAAG,MAAM,CACnD,CAAC;EACH,CAAC;CACL;AACF,CAAC"}

package/es/components/index.d.ts

@@ -0,0 +1,10 @@
+export { LGrid } from './LGrid';
+export { LGridItem } from './LGridItem';
+export { LMaterialRenderer } from './LMaterialRenderer';
+export { LLayoutEditor } from './LLayoutEditor';
+export { default as LLayoutWorkspace } from './LLayoutWorkspace.vue';
+export { LMaterialDragSource } from './LMaterialDragSource';
+export { LMetricCard } from './LMetricCard';
+export { LTrendCard } from './LTrendCard';
+export type { LayoutRenderTarget, VueMaterialSource } from './material-renderer';
+//# sourceMappingURL=index.d.ts.map

package/es/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/es/components/index.js

@@ -0,0 +1,19 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { LGrid } from "./LGrid.js";
+import { LGridItem } from "./LGridItem.js";
+import { LMaterialRenderer } from "./LMaterialRenderer.js";
+import { LLayoutEditor } from "./LLayoutEditor.js";
+import { LMetricCard } from "./LMetricCard.js";
+import { LTrendCard } from "./LTrendCard.js";
+import LLayoutWorkspace_default from "./LLayoutWorkspace.js";
+import { LMaterialDragSource } from "./LMaterialDragSource.js";
+export { LGrid, LGridItem, LLayoutEditor, LLayoutWorkspace_default as LLayoutWorkspace, LMaterialDragSource, LMaterialRenderer, LMetricCard, LTrendCard };
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/es/components/material-renderer.d.ts

@@ -0,0 +1,26 @@
+import { type VNode } from 'vue';
+import { type LayoutNode, type LayoutPlacement, type MaterialDefinition, type MaterialRegistry } from '@composy/layout-core';
+export type VueMaterialSource = MaterialRegistry | readonly MaterialDefinition[] | undefined;
+/**
+ * The runtime target used by the layout renderer.  It intentionally contains
+ * only the two targets supported by the workspace today: a Vue component or a
+ * registered native custom element.
+ */
+export type LayoutRenderTarget = 'vue' | 'webcomponent';
+export declare function resolveMaterialDefinition(materials: VueMaterialSource, type: string): MaterialDefinition | undefined;
+/**
+ * Render the framework-specific fallback declared by a material.
+ * A host-provided item slot always takes precedence over this helper.
+ */
+export declare function renderMaterialFallback(materials: VueMaterialSource, item: LayoutNode, placement: LayoutPlacement, breakpointId: string): VNode | undefined;
+/**
+ * Render the registered renderer for a concrete target.
+ *
+ * Keeping this decision in one place is important: grid items, preview
+ * surfaces and integrations must not each invent their own component lookup.
+ * A material can still provide the legacy html renderer as a final fallback,
+ * but a Vue target never silently prefers a web component when its Vue
+ * renderer is present (and vice versa).
+ */
+export declare function renderMaterialForTarget(materials: VueMaterialSource, item: LayoutNode, target: LayoutRenderTarget, placement?: LayoutPlacement, breakpointId?: string): VNode | undefined;
+//# sourceMappingURL=material-renderer.d.ts.map

package/es/components/material-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.d.ts","sourceRoot":"","sources":["../../src/components/material-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAC7B,MAAM,MAAM,iBAAiB,GAC3B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAA;AAE9D;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,cAAc,CAAA;AAUvD,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,MAAM,GACX,kBAAkB,GAAG,SAAS,CAEhC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,eAAe,EAC1B,YAAY,EAAE,MAAM,GACnB,KAAK,GAAG,SAAS,CA0BnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,kBAAkB,EAC1B,SAAS,CAAC,EAAE,eAAe,EAC3B,YAAY,SAAY,GACvB,KAAK,GAAG,SAAS,CAoDnB"}

package/es/components/material-renderer.js

@@ -0,0 +1,96 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { h } from "vue";
+import { createMaterialRegistry } from "@composy/layout-core";
+//#region src/components/material-renderer.ts
+function resolveRegistry(source) {
+	if (!source) return void 0;
+	if (Array.isArray(source)) return 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 h(vueRenderer.component, {
+		...item.props ?? {},
+		...vueRenderer.tagName ? { is: vueRenderer.tagName } : {}
+	});
+	const webComponentRenderer = material?.renderers?.webcomponent;
+	if (webComponentRenderer?.tagName) return 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 h("div", { innerHTML: sanitizeMarkup(rendered) });
+		return rendered;
+	}
+	if (htmlRenderer?.tagName) return 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 h(renderer.component, props);
+	} else {
+		const renderer = material?.renderers?.webcomponent;
+		if (renderer?.tagName) return 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 h("div", { innerHTML: sanitizeMarkup(rendered) });
+		return rendered;
+	}
+	if (htmlRenderer?.tagName) return 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
+export { renderMaterialFallback, renderMaterialForTarget, resolveMaterialDefinition };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=material-renderer.js.map

package/es/components/material-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.js","names":[],"sources":["../../src/components/material-renderer.ts"],"sourcesContent":["import { h, type VNode } from 'vue'\nimport {\n  createMaterialRegistry,\n  type LayoutNode,\n  type LayoutPlacement,\n  type MaterialDefinition,\n  type MaterialRegistry,\n} from '@composy/layout-core'\nexport type VueMaterialSource =\n  MaterialRegistry | readonly MaterialDefinition[] | undefined\n\n/**\n * The runtime target used by the layout renderer.  It intentionally contains\n * only the two targets supported by the workspace today: a Vue component or a\n * registered native custom element.\n */\nexport type LayoutRenderTarget = 'vue' | 'webcomponent'\n\nfunction resolveRegistry(\n  source: VueMaterialSource\n): MaterialRegistry | undefined {\n  if (!source) return undefined\n  if (Array.isArray(source)) return createMaterialRegistry(source)\n  return source as MaterialRegistry\n}\n\nexport function resolveMaterialDefinition(\n  materials: VueMaterialSource,\n  type: string\n): MaterialDefinition | undefined {\n  return resolveRegistry(materials)?.get(type)\n}\n\n/**\n * Render the framework-specific fallback declared by a material.\n * A host-provided item slot always takes precedence over this helper.\n */\nexport function renderMaterialFallback(\n  materials: VueMaterialSource,\n  item: LayoutNode,\n  placement: LayoutPlacement,\n  breakpointId: string\n): VNode | undefined {\n  const material = resolveMaterialDefinition(materials, item.type)\n  const context = { item, placement, breakpointId }\n  const vueRenderer = material?.renderers?.vue\n  if (vueRenderer?.component) {\n    return h(vueRenderer.component as never, {\n      ...(item.props ?? {}),\n      ...(vueRenderer.tagName ? { is: vueRenderer.tagName } : {}),\n    })\n  }\n  const webComponentRenderer = material?.renderers?.webcomponent\n  if (webComponentRenderer?.tagName)\n    return h(webComponentRenderer.tagName, {\n      ...(item.props ?? {}),\n      materialProps: { ...(item.props ?? {}) },\n    })\n  const htmlRenderer = material?.renderers?.html\n  if (htmlRenderer?.render) {\n    const rendered = htmlRenderer.render(context)\n    if (typeof rendered === 'string')\n      return h('div', { innerHTML: sanitizeMarkup(rendered) })\n    return rendered as VNode | undefined\n  }\n  if (htmlRenderer?.tagName)\n    return h(htmlRenderer.tagName, { ...(item.props ?? {}) })\n  return undefined\n}\n\n/**\n * Render the registered renderer for a concrete target.\n *\n * Keeping this decision in one place is important: grid items, preview\n * surfaces and integrations must not each invent their own component lookup.\n * A material can still provide the legacy html renderer as a final fallback,\n * but a Vue target never silently prefers a web component when its Vue\n * renderer is present (and vice versa).\n */\nexport function renderMaterialForTarget(\n  materials: VueMaterialSource,\n  item: LayoutNode,\n  target: LayoutRenderTarget,\n  placement?: LayoutPlacement,\n  breakpointId = 'desktop'\n): VNode | undefined {\n  const material = resolveMaterialDefinition(materials, item.type)\n  const props = { ...(item.props ?? {}) }\n\n  if (target === 'vue') {\n    const renderer = material?.renderers?.vue\n    if (renderer?.component) return h(renderer.component as never, props)\n  } else {\n    const renderer = material?.renderers?.webcomponent\n    if (renderer?.tagName)\n      return h(renderer.tagName, {\n        ...props,\n        // Workspace-provided custom elements use this property to render the\n        // same registered material props as the editor/runtime adapters.\n        materialProps: props,\n        onVnodeMounted: vnode => {\n          const el = vnode.el as unknown as Element & {\n            materialProps?: Record<string, unknown>\n          }\n          if (el && 'materialProps' in el) el.materialProps = props\n        },\n        onVnodeUpdated: vnode => {\n          const el = vnode.el as unknown as Element & {\n            materialProps?: Record<string, unknown>\n          }\n          if (el && 'materialProps' in el) el.materialProps = props\n        },\n      })\n  }\n\n  const htmlRenderer = material?.renderers?.html\n  if (htmlRenderer?.render) {\n    const rendered = htmlRenderer.render({\n      item,\n      placement: placement ??\n        item.layout[breakpointId] ?? { x: 0, y: 0, w: 1, h: 1 },\n      breakpointId,\n    })\n    if (typeof rendered === 'string')\n      return h('div', { innerHTML: sanitizeMarkup(rendered) })\n    return rendered as VNode | undefined\n  }\n  if (htmlRenderer?.tagName) return h(htmlRenderer.tagName, props)\n\n  // Preserve the historical behavior for incomplete third-party definitions\n  // so registering only one renderer does not make an item disappear.\n  return renderMaterialFallback(\n    materials,\n    item,\n    placement ?? item.layout[breakpointId] ?? { x: 0, y: 0, w: 1, h: 1 },\n    breakpointId\n  )\n}\n\nfunction sanitizeMarkup(value: string): string {\n  return value\n    .replace(/<script\\b[^>]*>[\\s\\S]*?<\\/script\\s*>/gi, '')\n    .replace(/\\s+on[a-z]+\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]+)/gi, '')\n    .replace(/\\s+(?:href|src)\\s*=\\s*(\"|')\\s*javascript:[^\"']*\\1/gi, '')\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAS,gBACP,QAC8B;CAC9B,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,IAAI,MAAM,QAAQ,MAAM,GAAG,OAAO,uBAAuB,MAAM;CAC/D,OAAO;AACT;AAEO,SAAS,0BACd,WACA,MACgC;CAChC,OAAO,gBAAgB,SAAS,CAAA,EAAG,IAAI,IAAI;AAC7C;AAMO,SAAS,uBACd,WACA,MACA,WACA,cACmB;CACnB,MAAM,WAAW,0BAA0B,WAAW,KAAK,IAAI;CAC/D,MAAM,UAAU;EAAE;EAAM;EAAW;CAAa;CAChD,MAAM,cAAc,UAAU,WAAW;CACzC,IAAI,aAAa,WACf,OAAO,EAAE,YAAY,WAAoB;EACvC,GAAI,KAAK,SAAS,CAAC;EACnB,GAAI,YAAY,UAAU,EAAE,IAAI,YAAY,QAAQ,IAAI,CAAC;CAC3D,CAAC;CAEH,MAAM,uBAAuB,UAAU,WAAW;CAClD,IAAI,sBAAsB,SACxB,OAAO,EAAE,qBAAqB,SAAS;EACrC,GAAI,KAAK,SAAS,CAAC;EACnB,eAAe,EAAE,GAAI,KAAK,SAAS,CAAC,EAAG;CACzC,CAAC;CACH,MAAM,eAAe,UAAU,WAAW;CAC1C,IAAI,cAAc,QAAQ;EACxB,MAAM,WAAW,aAAa,OAAO,OAAO;EAC5C,IAAI,OAAO,aAAa,UACtB,OAAO,EAAE,OAAO,EAAE,WAAW,eAAe,QAAQ,EAAE,CAAC;EACzD,OAAO;CACT;CACA,IAAI,cAAc,SAChB,OAAO,EAAE,aAAa,SAAS,EAAE,GAAI,KAAK,SAAS,CAAC,EAAG,CAAC;AAE5D;AAWO,SAAS,wBACd,WACA,MACA,QACA,WACA,eAAe,WACI;CACnB,MAAM,WAAW,0BAA0B,WAAW,KAAK,IAAI;CAC/D,MAAM,QAAQ,EAAE,GAAI,KAAK,SAAS,CAAC,EAAG;CAEtC,IAAI,WAAW,OAAO;EACpB,MAAM,WAAW,UAAU,WAAW;EACtC,IAAI,UAAU,WAAW,OAAO,EAAE,SAAS,WAAoB,KAAK;CACtE,OAAO;EACL,MAAM,WAAW,UAAU,WAAW;EACtC,IAAI,UAAU,SACZ,OAAO,EAAE,SAAS,SAAS;GACzB,GAAG;GAGH,eAAe;GACf,iBAAgB,UAAS;IACvB,MAAM,KAAK,MAAM;IAGjB,IAAI,MAAM,mBAAmB,IAAI,GAAG,gBAAgB;GACtD;GACA,iBAAgB,UAAS;IACvB,MAAM,KAAK,MAAM;IAGjB,IAAI,MAAM,mBAAmB,IAAI,GAAG,gBAAgB;GACtD;EACF,CAAC;CACL;CAEA,MAAM,eAAe,UAAU,WAAW;CAC1C,IAAI,cAAc,QAAQ;EACxB,MAAM,WAAW,aAAa,OAAO;GACnC;GACA,WAAW,aACT,KAAK,OAAO,iBAAiB;IAAE,GAAG;IAAG,GAAG;IAAG,GAAG;IAAG,GAAG;GAAE;GACxD;EACF,CAAC;EACD,IAAI,OAAO,aAAa,UACtB,OAAO,EAAE,OAAO,EAAE,WAAW,eAAe,QAAQ,EAAE,CAAC;EACzD,OAAO;CACT;CACA,IAAI,cAAc,SAAS,OAAO,EAAE,aAAa,SAAS,KAAK;CAI/D,OAAO,uBACL,WACA,MACA,aAAa,KAAK,OAAO,iBAAiB;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,GAAG;CAAE,GACnE,YACF;AACF;AAEA,SAAS,eAAe,OAAuB;CAC7C,OAAO,MACJ,QAAQ,0CAA0C,EAAE,CAAA,CACpD,QAAQ,mDAAmD,EAAE,CAAA,CAC7D,QAAQ,uDAAuD,EAAE;AACtE"}

package/es/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useLayoutEditor } from './useLayoutEditor';
+//# sourceMappingURL=index.d.ts.map

package/es/composables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/es/composables/index.js

@@ -0,0 +1,12 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { useLayoutEditor } from "./useLayoutEditor.js";
+export { useLayoutEditor };
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/es/composables/useLayoutEditor.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutEditorOptions } from '@composy/layout-editor';
+export declare function useLayoutEditor(options: LayoutEditorOptions): import("vue").ShallowRef<import("@composy/layout-editor").LayoutEditor, import("@composy/layout-editor").LayoutEditor>;
+//# sourceMappingURL=useLayoutEditor.d.ts.map

package/es/composables/useLayoutEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEditor.d.ts","sourceRoot":"","sources":["../../src/composables/useLayoutEditor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEjE,wBAAgB,eAAe,CAAC,OAAO,EAAE,mBAAmB,0HAK3D"}

package/es/composables/useLayoutEditor.js

@@ -0,0 +1,22 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { createLayoutEditor } from "@composy/layout-editor";
+//#region src/composables/useLayoutEditor.ts
+function useLayoutEditor(options) {
+	const editor = shallowRef(createLayoutEditor(options));
+	onMounted(() => editor.value.mount());
+	onBeforeUnmount(() => editor.value.destroy());
+	return editor;
+}
+//#endregion
+export { useLayoutEditor };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=useLayoutEditor.js.map

package/es/composables/useLayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEditor.js","names":[],"sources":["../../src/composables/useLayoutEditor.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, shallowRef } from 'vue'\nimport { createLayoutEditor } from '@composy/layout-editor'\nimport type { LayoutEditorOptions } from '@composy/layout-editor'\n\nexport function useLayoutEditor(options: LayoutEditorOptions) {\n  const editor = shallowRef(createLayoutEditor(options))\n  onMounted(() => editor.value.mount())\n  onBeforeUnmount(() => editor.value.destroy())\n  return editor\n}\n"],"mappings":";;;;;;;;;;;;AAIO,SAAS,gBAAgB,SAA8B;CAC5D,MAAM,SAAS,WAAW,mBAAmB,OAAO,CAAC;CACrD,gBAAgB,OAAO,MAAM,MAAM,CAAC;CACpC,sBAAsB,OAAO,MAAM,QAAQ,CAAC;CAC5C,OAAO;AACT"}

package/es/index.d.ts

@@ -0,0 +1,7 @@
+export { LGrid, LGridItem, LMaterialRenderer, LLayoutEditor, LLayoutWorkspace, LMaterialDragSource, LMetricCard, LTrendCard, } from './components';
+export { useLayoutEditor } from './composables';
+export type * from './types';
+export type { LayoutRenderTarget, VueMaterialSource, } from './components/material-renderer';
+export type { LayoutDocument, LayoutNode, LayoutPlacement, MaterialDefinition, } from '@composy/layout-core';
+export type { LayoutEditor, LayoutEditorEngine, LayoutEditorOptions, } from '@composy/layout-editor';
+//# sourceMappingURL=index.d.ts.map

package/es/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,UAAU,GACX,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,mBAAmB,SAAS,CAAA;AAC5B,YAAY,EACV,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,gCAAgC,CAAA;AACvC,YAAY,EACV,cAAc,EACd,UAAU,EACV,eAAe,EACf,kBAAkB,GACnB,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,wBAAwB,CAAA"}

package/es/index.js

@@ -0,0 +1,22 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { LGrid } from "./components/LGrid.js";
+import { LGridItem } from "./components/LGridItem.js";
+import { LMaterialRenderer } from "./components/LMaterialRenderer.js";
+import { LLayoutEditor } from "./components/LLayoutEditor.js";
+import { LMetricCard } from "./components/LMetricCard.js";
+import { LTrendCard } from "./components/LTrendCard.js";
+import LLayoutWorkspace_default from "./components/LLayoutWorkspace.js";
+import { LMaterialDragSource } from "./components/LMaterialDragSource.js";
+import "./components/index.js";
+import { useLayoutEditor } from "./composables/useLayoutEditor.js";
+import "./composables/index.js";
+export { LGrid, LGridItem, LLayoutEditor, LLayoutWorkspace_default as LLayoutWorkspace, LMaterialDragSource, LMaterialRenderer, LMetricCard, LTrendCard, useLayoutEditor };
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/es/style/css.js

@@ -0,0 +1 @@
+import './index.less';

package/es/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/style/index.less

@@ -0,0 +1 @@
+// @ldesign styles