@composy/layout-vue 0.0.1

package/lib/components/LMaterialRenderer.d.ts

@@ -0,0 +1,63 @@
+import { type PropType } from 'vue';
+import type { LayoutNode, LayoutPlacement } from '@composy/layout-core';
+import { type LayoutRenderTarget, type VueMaterialSource } from './material-renderer';
+/**
+ * A target-aware renderer for one registered layout material.
+ *
+ * `LGrid` owns the placement shell; this component owns the renderer lookup.
+ * Consumers can therefore use the same item renderer in an editor, a preview,
+ * a modal or their own grid implementation without duplicating framework
+ * branching logic.
+ */
+export declare const LMaterialRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<LayoutNode>;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: PropType<LayoutRenderTarget>;
+        default: string;
+    };
+    placement: {
+        type: PropType<LayoutPlacement>;
+        default: any;
+    };
+    breakpointId: {
+        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<{
+    item: {
+        type: PropType<LayoutNode>;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: PropType<LayoutRenderTarget>;
+        default: string;
+    };
+    placement: {
+        type: PropType<LayoutPlacement>;
+        default: any;
+    };
+    breakpointId: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    materials: VueMaterialSource;
+    target: LayoutRenderTarget;
+    placement: LayoutPlacement;
+    breakpointId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { LayoutRenderTarget };
+//# sourceMappingURL=LMaterialRenderer.d.ts.map

package/lib/components/LMetricCard.cjs

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

package/lib/components/LMetricCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMetricCard.cjs","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,eAAA,GAAA,IAAA,gBAAA,CAA8B;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,cAAA,GAAA,IAAA,EAAA,CACI,WAAW;GAAE,OAAO;GAAe,oBAAoB;EAAG,GAAG;cAC3D,OAAO,EAAE,OAAO,oBAAoB,GAAG,EAAA,GAAA,IAAA,EAAA,CACrC,QAAQ,EAAE,OAAO,oBAAoB,GAAG,MAAM,IAAA,GAAA,IAAA,EAAA,CAC9C,QAAQ,EAAE,OAAO,sBAAsB,GAAG,KAAK,CACnD,CAAC;cACC,MAAM,EAAE,OAAO,qBAAqB,GAAG,MAAM,KAAK;GACpD,MAAM,UAAU,KAAA,IACZ,QAAA,GAAA,IAAA,EAAA,CAEE,UACA,EAAE,OAAO,qBAAqB,GAC9B,OAAO,MAAM,KAAK,CAAA,CAAE,eAAe,OAAO,CAC5C;cACF,OAAO,EAAE,OAAO,sBAAsB,GAAG,EAAA,GAAA,IAAA,EAAA,CACvC,QAAQ,MAAM,MAAM,IAAA,GAAA,IAAA,EAAA,CACpB,QAAQ,EAAE,OAAO,qBAAqB,GAAG,MAAM,CACnD,CAAC;EACH,CAAC;CACL;AACF,CAAC"}

package/lib/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/lib/components/LTrendCard.cjs

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

package/lib/components/LTrendCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LTrendCard.cjs","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,cAAA,GAAA,IAAA,gBAAA,CAA6B;CACxC,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAAQ,SAAS;CAAO,EACzC;CACA,MAAM,OAAO;EACX,cAAA,GAAA,IAAA,EAAA,CACI,WAAW;GAAE,OAAO;GAAe,oBAAoB;EAAG,GAAG;cAC3D,OAAO,EAAE,OAAO,oBAAoB,GAAG,EAAA,GAAA,IAAA,EAAA,CACrC,QAAQ,EAAE,OAAO,oBAAoB,GAAG,MAAM,IAAA,GAAA,IAAA,EAAA,CAC9C,QAAQ,EAAE,OAAO,sBAAsB,GAAG,KAAK,CACnD,CAAC;cACC,MAAM,EAAE,OAAO,qBAAqB,GAAG,MAAM,KAAK;cAElD,QACA;IAAE,OAAO;IAAsB,eAAe;GAAO,GACrD,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,WAAA,GAAA,IAAA,EAAA,CAAY,KAAK,EAAE,KAAK,MAAM,CAAC,CAAC,CAChE;cACE,OAAO,EAAE,OAAO,sBAAsB,GAAG,EAAA,GAAA,IAAA,EAAA,CACvC,QAAQ,MAAM,MAAM,IAAA,GAAA,IAAA,EAAA,CACpB,QAAQ,EAAE,OAAO,qBAAqB,GAAG,MAAM,CACnD,CAAC;EACH,CAAC;CACL;AACF,CAAC"}

package/lib/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/lib/components/index.cjs

@@ -0,0 +1,27 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_LGrid = require("./LGrid.cjs");
+const require_LGridItem = require("./LGridItem.cjs");
+const require_LLayoutEditor = require("./LLayoutEditor.cjs");
+const require_LMaterialDragSource = require("./LMaterialDragSource.cjs");
+const require_LMaterialRenderer = require("./LMaterialRenderer.cjs");
+const require_LMetricCard = require("./LMetricCard.cjs");
+const require_LTrendCard = require("./LTrendCard.cjs");
+const require_LLayoutWorkspace = require("./LLayoutWorkspace.cjs");
+exports.LGrid = require_LGrid.LGrid;
+exports.LGridItem = require_LGridItem.LGridItem;
+exports.LLayoutEditor = require_LLayoutEditor.LLayoutEditor;
+exports.LLayoutWorkspace = require_LLayoutWorkspace.default;
+exports.LMaterialDragSource = require_LMaterialDragSource.LMaterialDragSource;
+exports.LMaterialRenderer = require_LMaterialRenderer.LMaterialRenderer;
+exports.LMetricCard = require_LMetricCard.LMetricCard;
+exports.LTrendCard = require_LTrendCard.LTrendCard;
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/lib/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/lib/components/material-renderer.cjs

@@ -0,0 +1,99 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+let _composy_layout_core = require("@composy/layout-core");
+//#region src/components/material-renderer.ts
+function resolveRegistry(source) {
+	if (!source) return void 0;
+	if (Array.isArray(source)) return (0, _composy_layout_core.createMaterialRegistry)(source);
+	return source;
+}
+function resolveMaterialDefinition(materials, type) {
+	return resolveRegistry(materials)?.get(type);
+}
+function renderMaterialFallback(materials, item, placement, breakpointId) {
+	const material = resolveMaterialDefinition(materials, item.type);
+	const context = {
+		item,
+		placement,
+		breakpointId
+	};
+	const vueRenderer = material?.renderers?.vue;
+	if (vueRenderer?.component) return (0, vue.h)(vueRenderer.component, {
+		...item.props ?? {},
+		...vueRenderer.tagName ? { is: vueRenderer.tagName } : {}
+	});
+	const webComponentRenderer = material?.renderers?.webcomponent;
+	if (webComponentRenderer?.tagName) return (0, vue.h)(webComponentRenderer.tagName, {
+		...item.props ?? {},
+		materialProps: { ...item.props ?? {} }
+	});
+	const htmlRenderer = material?.renderers?.html;
+	if (htmlRenderer?.render) {
+		const rendered = htmlRenderer.render(context);
+		if (typeof rendered === "string") return (0, vue.h)("div", { innerHTML: sanitizeMarkup(rendered) });
+		return rendered;
+	}
+	if (htmlRenderer?.tagName) return (0, vue.h)(htmlRenderer.tagName, { ...item.props ?? {} });
+}
+function renderMaterialForTarget(materials, item, target, placement, breakpointId = "desktop") {
+	const material = resolveMaterialDefinition(materials, item.type);
+	const props = { ...item.props ?? {} };
+	if (target === "vue") {
+		const renderer = material?.renderers?.vue;
+		if (renderer?.component) return (0, vue.h)(renderer.component, props);
+	} else {
+		const renderer = material?.renderers?.webcomponent;
+		if (renderer?.tagName) return (0, vue.h)(renderer.tagName, {
+			...props,
+			materialProps: props,
+			onVnodeMounted: (vnode) => {
+				const el = vnode.el;
+				if (el && "materialProps" in el) el.materialProps = props;
+			},
+			onVnodeUpdated: (vnode) => {
+				const el = vnode.el;
+				if (el && "materialProps" in el) el.materialProps = props;
+			}
+		});
+	}
+	const htmlRenderer = material?.renderers?.html;
+	if (htmlRenderer?.render) {
+		const rendered = htmlRenderer.render({
+			item,
+			placement: placement ?? item.layout[breakpointId] ?? {
+				x: 0,
+				y: 0,
+				w: 1,
+				h: 1
+			},
+			breakpointId
+		});
+		if (typeof rendered === "string") return (0, vue.h)("div", { innerHTML: sanitizeMarkup(rendered) });
+		return rendered;
+	}
+	if (htmlRenderer?.tagName) return (0, vue.h)(htmlRenderer.tagName, props);
+	return renderMaterialFallback(materials, item, placement ?? item.layout[breakpointId] ?? {
+		x: 0,
+		y: 0,
+		w: 1,
+		h: 1
+	}, breakpointId);
+}
+function sanitizeMarkup(value) {
+	return value.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi, "");
+}
+//#endregion
+exports.renderMaterialFallback = renderMaterialFallback;
+exports.renderMaterialForTarget = renderMaterialForTarget;
+exports.resolveMaterialDefinition = resolveMaterialDefinition;
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=material-renderer.cjs.map

package/lib/components/material-renderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.cjs","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":"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"}

package/lib/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/lib/composables/index.cjs

@@ -0,0 +1,13 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useLayoutEditor = require("./useLayoutEditor.cjs");
+exports.useLayoutEditor = require_useLayoutEditor.useLayoutEditor;
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/lib/composables/index.d.ts

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

package/lib/composables/useLayoutEditor.cjs

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

package/lib/composables/useLayoutEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEditor.cjs","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,UAAA,GAAA,IAAA,WAAA,EAAA,GAAA,uBAAA,mBAAA,CAAuC,OAAO,CAAC;CACrD,CAAA,GAAA,IAAA,UAAA,OAAgB,OAAO,MAAM,MAAM,CAAC;CACpC,CAAA,GAAA,IAAA,gBAAA,OAAsB,OAAO,MAAM,QAAQ,CAAC;CAC5C,OAAO;AACT"}

package/lib/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/lib/index.cjs

@@ -0,0 +1,29 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_LGrid = require("./components/LGrid.cjs");
+const require_LGridItem = require("./components/LGridItem.cjs");
+const require_LLayoutEditor = require("./components/LLayoutEditor.cjs");
+const require_LMaterialDragSource = require("./components/LMaterialDragSource.cjs");
+const require_LMaterialRenderer = require("./components/LMaterialRenderer.cjs");
+const require_LMetricCard = require("./components/LMetricCard.cjs");
+const require_LTrendCard = require("./components/LTrendCard.cjs");
+const require_LLayoutWorkspace = require("./components/LLayoutWorkspace.cjs");
+const require_useLayoutEditor = require("./composables/useLayoutEditor.cjs");
+exports.LGrid = require_LGrid.LGrid;
+exports.LGridItem = require_LGridItem.LGridItem;
+exports.LLayoutEditor = require_LLayoutEditor.LLayoutEditor;
+exports.LLayoutWorkspace = require_LLayoutWorkspace.default;
+exports.LMaterialDragSource = require_LMaterialDragSource.LMaterialDragSource;
+exports.LMaterialRenderer = require_LMaterialRenderer.LMaterialRenderer;
+exports.LMetricCard = require_LMetricCard.LMetricCard;
+exports.LTrendCard = require_LTrendCard.LTrendCard;
+exports.useLayoutEditor = require_useLayoutEditor.useLayoutEditor;
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/lib/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/lib/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/lib/style/css.js

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

package/lib/style/index.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=src/style/index.less.map */

package/lib/style/index.js

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