@composy/layout-vue 0.0.1 → 0.0.2

package/es/components/LMaterialDragSource.d.ts

@@ -52,4 +52,3 @@ export declare const LMaterialDragSource: import("vue").DefineComponent<import("
     placement: Partial<LayoutPlacement>;
     material: MaterialDefinition<import("@composy/layout-core").JsonRecord>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=LMaterialDragSource.d.ts.map

package/es/components/LMaterialDragSource.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/components/LMaterialRenderer.d.ts

@@ -60,4 +60,3 @@ export declare const LMaterialRenderer: import("vue").DefineComponent<import("vu
     breakpointId: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type { LayoutRenderTarget };
-//# sourceMappingURL=LMaterialRenderer.d.ts.map

package/es/components/LMaterialRenderer.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/components/LMetricCard.d.ts

@@ -26,4 +26,3 @@ export declare const LMetricCard: import("vue").DefineComponent<import("vue").Ex
     title: string;
     value: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=LMetricCard.d.ts.map

package/es/components/LMetricCard.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/components/LTrendCard.d.ts

@@ -14,4 +14,3 @@ export declare const LTrendCard: import("vue").DefineComponent<import("vue").Ext
 }>> & Readonly<{}>, {
     title: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=LTrendCard.d.ts.map

package/es/components/LTrendCard.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/components/index.d.ts

@@ -7,4 +7,3 @@ 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.js

@@ -2,18 +2,18 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * 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 { LMaterialDragSource } from "./LMaterialDragSource.js";
+import { LMaterialRenderer } from "./LMaterialRenderer.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

@@ -23,4 +23,3 @@ export declare function renderMaterialFallback(materials: VueMaterialSource, ite
  * 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

@@ -1 +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"}
+{"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;AAI9D;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,cAAc,CAAA;AAgBvD,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

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -10,9 +10,16 @@
 import { h } from "vue";
 import { createMaterialRegistry } from "@composy/layout-core";
 //#region src/components/material-renderer.ts
+const registryCache = /* @__PURE__ */ new WeakMap();
 function resolveRegistry(source) {
 	if (!source) return void 0;
-	if (Array.isArray(source)) return createMaterialRegistry(source);
+	if (Array.isArray(source)) {
+		const cached = registryCache.get(source);
+		if (cached) return cached;
+		const registry = createMaterialRegistry(source);
+		registryCache.set(source, registry);
+		return registry;
+	}
 	return source;
 }
 function resolveMaterialDefinition(materials, type) {
@@ -88,7 +95,7 @@ function renderMaterialForTarget(materials, item, target, placement, breakpointI
 	}, 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, "");
+	return value.replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>[\s\S]*?<\/(?:script|style|iframe|object|embed|foreignObject)\s*>/gi, "").replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src|xlink:href|formaction|srcdoc)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, (match) => /javascript:|data:text\/html/i.test(match) ? "" : match);
 }
 //#endregion
 export { renderMaterialFallback, renderMaterialForTarget, resolveMaterialDefinition };

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

@@ -1 +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"}
+{"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\nconst registryCache = new WeakMap<object, MaterialRegistry>()\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)) {\n    const cached = registryCache.get(source)\n    if (cached) return cached\n    const registry = createMaterialRegistry(source)\n    registryCache.set(source, registry)\n    return registry\n  }\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(\n      /<(?:script|style|iframe|object|embed|foreignObject)\\b[^>]*>[\\s\\S]*?<\\/(?:script|style|iframe|object|embed|foreignObject)\\s*>/gi,\n      ''\n    )\n    .replace(\n      /<(?:script|style|iframe|object|embed|foreignObject)\\b[^>]*>/gi,\n      ''\n    )\n    .replace(/\\s+on[a-z]+\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]+)/gi, '')\n    .replace(\n      /\\s+(?:href|src|xlink:href|formaction|srcdoc)\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]+)/gi,\n      match => (/javascript:|data:text\\/html/i.test(match) ? '' : match)\n    )\n}\n"],"mappings":"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"}

package/es/composables/index.d.ts

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

package/es/composables/index.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/composables/useLayoutEditor.d.ts

@@ -1,3 +1,2 @@
 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.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/index.d.ts

@@ -4,4 +4,3 @@ 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.js

@@ -2,21 +2,19 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * 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 { LMaterialDragSource } from "./components/LMaterialDragSource.js";
+import { LMaterialRenderer } from "./components/LMaterialRenderer.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

@@ -1 +1 @@
-import './index.less';
+import './index.css';

package/es/style/index.css

@@ -0,0 +1 @@
+

package/es/style/index.js

@@ -1 +1 @@
-import './index.less';
+import './index.css';

package/es/style/workspace.css

@@ -120,6 +120,7 @@ button:focus-visible {
 }
 
 .topbar-center__shell {
+  min-width: -moz-max-content;
   min-width: max-content;
   padding: 4px 6px;
   display: flex;
@@ -858,7 +859,9 @@ button:focus-visible {
   color: var(--ink);
   text-align: left;
   cursor: grab;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   touch-action: none;
   box-shadow: 0 4px 14px rgb(48 65 95 / 6%);
   transition: 140ms ease;
@@ -1382,6 +1385,15 @@ body > .ui-draggable-dragging[data-layout-material] {
   flex: 1 0 auto;
 }
 
+/* The editor keeps a native runtime container mounted for fast framework
+ * switching. Vue mode renders the adapter grid in the same stage, so the
+ * native container must stay out of layout flow until Web Component mode is
+ * selected. */
+.runtime-preview-stage[data-preview-framework="vue"] > .runtime-preview-grid,
+.vanilla-runtime-stage[data-preview-framework="vue"] > .runtime-preview-grid {
+  display: none !important;
+}
+
 .layout-item-shell,
 .layout-card {
   position: relative;
@@ -1670,13 +1682,16 @@ body > .ui-draggable-dragging[data-layout-material] {
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
   font-size: 11px;
   line-height: 1.65;
-  tab-size: 2;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
   white-space: pre;
   scrollbar-width: thin;
 }
 
 .code-block code {
   display: block;
+  min-width: -moz-max-content;
   min-width: max-content;
   color: inherit;
 }
@@ -2368,3 +2383,4 @@ body > .ui-draggable-dragging[data-layout-material] {
   background: #27345c !important;
   color: #c5ceff !important;
 }
+

package/es/types.d.ts

@@ -23,4 +23,3 @@ export interface LLayoutEditorProps {
 export interface LLayoutEditorExpose {
     editor: LayoutEditor;
 }
-//# sourceMappingURL=types.d.ts.map

package/es/types.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/esm/components/LGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.d.ts","sourceRoot":"","sources":["../../src/components/LGrid.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,eAAO,MAAM,KAAK,gSA8FhB,CAAA"}

package/esm/components/LGrid.js

@@ -0,0 +1,91 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-10-12 17:52:50 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { renderMaterialForTarget } from "./material-renderer.js";
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { resolveGridStyle, resolveItemStyle } from "@composy/layout-runtime";
+//#region src/components/LGrid.ts
+const LGrid = defineComponent({
+	name: "LGrid",
+	props: {
+		document: {
+			type: Object,
+			required: true
+		},
+		breakpoint: {
+			type: String,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots, expose }) {
+		const root = ref();
+		const activeBreakpoint = ref(props.breakpoint ?? props.document.defaultBreakpointId);
+		const resolved = computed(() => props.document.breakpoints.find((bp) => bp.id === activeBreakpoint.value) ?? props.document.breakpoints[0]);
+		const gridStyle = computed(() => resolveGridStyle(props.document, resolved.value.id));
+		const resize = () => {
+			if (props.breakpoint || !root.value) return;
+			const width = root.value.getBoundingClientRect().width;
+			const match = props.document.breakpoints.find((bp) => (bp.minWidth === void 0 || width >= bp.minWidth) && (bp.maxWidth === void 0 || width < bp.maxWidth));
+			activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId;
+		};
+		let observer;
+		onMounted(() => {
+			if (typeof ResizeObserver !== "undefined" && root.value) {
+				observer = new ResizeObserver(resize);
+				observer.observe(root.value);
+			}
+			resize();
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(() => [props.breakpoint, props.document.defaultBreakpointId], ([value, defaultBreakpoint]) => {
+			activeBreakpoint.value = value ?? defaultBreakpoint;
+		});
+		expose({ getBreakpoint: () => activeBreakpoint.value });
+		return () => h("div", {
+			ref: root,
+			class: "ldesign-layout-grid",
+			style: gridStyle.value,
+			dir: gridStyle.value.direction
+		}, props.document.items.map((item) => {
+			const placement = item.layout[activeBreakpoint.value];
+			if (!placement || placement.hidden) return null;
+			return h("div", {
+				class: "ldesign-layout-item",
+				"data-layout-item-id": item.id,
+				"data-layout-type": item.type,
+				style: resolveItemStyle(item, activeBreakpoint.value),
+				tabindex: props.readonly ? void 0 : 0
+			}, slots.item?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? slots.default?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? renderMaterialForTarget(props.materials, item, props.target, placement, activeBreakpoint.value));
+		}));
+	}
+});
+//#endregion
+export { LGrid };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGrid.js.map

package/esm/components/LGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.js","names":[],"sources":["../../src/components/LGrid.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  type PropType,\n  watch,\n} from 'vue'\nimport { resolveGridStyle, resolveItemStyle } from '@composy/layout-runtime'\nimport type { LGridProps } from '../types'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGrid = defineComponent<LGridProps>({\n  name: 'LGrid',\n  props: {\n    document: { type: Object, required: true },\n    breakpoint: { type: String, default: undefined },\n    readonly: { type: Boolean, default: false },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots, expose }) {\n    const root = ref<HTMLElement>()\n    const activeBreakpoint = ref(\n      props.breakpoint ?? props.document.defaultBreakpointId\n    )\n    const resolved = computed(\n      () =>\n        props.document.breakpoints.find(\n          bp => bp.id === activeBreakpoint.value\n        ) ?? props.document.breakpoints[0]\n    )\n    const gridStyle = computed(() =>\n      resolveGridStyle(props.document, resolved.value.id)\n    )\n    const resize = () => {\n      if (props.breakpoint || !root.value) return\n      const width = root.value.getBoundingClientRect().width\n      const match = props.document.breakpoints.find(\n        bp =>\n          (bp.minWidth === undefined || width >= bp.minWidth) &&\n          (bp.maxWidth === undefined || width < bp.maxWidth)\n      )\n      activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId\n    }\n    let observer: ResizeObserver | undefined\n    onMounted(() => {\n      if (typeof ResizeObserver !== 'undefined' && root.value) {\n        observer = new ResizeObserver(resize)\n        observer.observe(root.value)\n      }\n      resize()\n    })\n    onBeforeUnmount(() => observer?.disconnect())\n    watch(\n      () => [props.breakpoint, props.document.defaultBreakpointId],\n      ([value, defaultBreakpoint]) => {\n        activeBreakpoint.value = value ?? defaultBreakpoint\n      }\n    )\n    expose({ getBreakpoint: () => activeBreakpoint.value })\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: 'ldesign-layout-grid',\n          style: gridStyle.value,\n          dir: gridStyle.value.direction,\n        },\n        props.document.items.map(item => {\n          const placement = item.layout[activeBreakpoint.value]\n          if (!placement || placement.hidden) return null\n          return h(\n            'div',\n            {\n              class: 'ldesign-layout-item',\n              'data-layout-item-id': item.id,\n              'data-layout-type': item.type,\n              style: resolveItemStyle(item, activeBreakpoint.value),\n              tabindex: props.readonly ? undefined : 0,\n            },\n            slots.item?.({\n              item,\n              placement,\n              breakpointId: activeBreakpoint.value,\n            }) ??\n              slots.default?.({\n                item,\n                placement,\n                breakpointId: activeBreakpoint.value,\n              }) ??\n              renderMaterialForTarget(\n                props.materials as VueMaterialSource,\n                item,\n                props.target as 'vue' | 'webcomponent',\n                placement,\n                activeBreakpoint.value\n              )\n          )\n        })\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,QAAQ,gBAA4B;CAC/C,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAQ,UAAU;EAAK;EACzC,YAAY;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC/C,UAAU;GAAE,MAAM;GAAS,SAAS;EAAM;EAC1C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,OAAO,UAAU;EAC9B,MAAM,OAAO,IAAiB;EAC9B,MAAM,mBAAmB,IACvB,MAAM,cAAc,MAAM,SAAS,mBACrC;EACA,MAAM,WAAW,eAEb,MAAM,SAAS,YAAY,MACzB,OAAM,GAAG,OAAO,iBAAiB,KACnC,KAAK,MAAM,SAAS,YAAY,EACpC;EACA,MAAM,YAAY,eAChB,iBAAiB,MAAM,UAAU,SAAS,MAAM,EAAE,CACpD;EACA,MAAM,eAAe;GACnB,IAAI,MAAM,cAAc,CAAC,KAAK,OAAO;GACrC,MAAM,QAAQ,KAAK,MAAM,sBAAsB,CAAA,CAAE;GACjD,MAAM,QAAQ,MAAM,SAAS,YAAY,MACvC,QACG,GAAG,aAAa,KAAA,KAAa,SAAS,GAAG,cACzC,GAAG,aAAa,KAAA,KAAa,QAAQ,GAAG,SAC7C;GACA,iBAAiB,QAAQ,OAAO,MAAM,MAAM,SAAS;EACvD;EACA,IAAI;EACJ,gBAAgB;GACd,IAAI,OAAO,mBAAmB,eAAe,KAAK,OAAO;IACvD,WAAW,IAAI,eAAe,MAAM;IACpC,SAAS,QAAQ,KAAK,KAAK;GAC7B;GACA,OAAO;EACT,CAAC;EACD,sBAAsB,UAAU,WAAW,CAAC;EAC5C,YACQ,CAAC,MAAM,YAAY,MAAM,SAAS,mBAAmB,IAC1D,CAAC,OAAO,uBAAuB;GAC9B,iBAAiB,QAAQ,SAAS;EACpC,CACF;EACA,OAAO,EAAE,qBAAqB,iBAAiB,MAAM,CAAC;EACtD,aACE,EACE,OACA;GACE,KAAK;GACL,OAAO;GACP,OAAO,UAAU;GACjB,KAAK,UAAU,MAAM;EACvB,GACA,MAAM,SAAS,MAAM,KAAI,SAAQ;GAC/B,MAAM,YAAY,KAAK,OAAO,iBAAiB;GAC/C,IAAI,CAAC,aAAa,UAAU,QAAQ,OAAO;GAC3C,OAAO,EACL,OACA;IACE,OAAO;IACP,uBAAuB,KAAK;IAC5B,oBAAoB,KAAK;IACzB,OAAO,iBAAiB,MAAM,iBAAiB,KAAK;IACpD,UAAU,MAAM,WAAW,KAAA,IAAY;GACzC,GACA,MAAM,OAAO;IACX;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACC,MAAM,UAAU;IACd;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACD,wBACE,MAAM,WACN,MACA,MAAM,QACN,WACA,iBAAiB,KACnB,CACJ;EACF,CAAC,CACH;CACJ;AACF,CAAC"}

package/esm/components/LGridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.d.ts","sourceRoot":"","sources":["../../src/components/LGridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEvE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAA;AAE5B,eAAO,MAAM,SAAS;;cAGM,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;;cAJ9B,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;4EA6BxD,CAAA"}

package/esm/components/LGridItem.js

@@ -0,0 +1,54 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-10-12 17:52:50 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { renderMaterialForTarget } from "./material-renderer.js";
+import { defineComponent, h } from "vue";
+import { resolveItemStyle } from "@composy/layout-runtime";
+//#region src/components/LGridItem.ts
+const LGridItem = defineComponent({
+	name: "LGridItem",
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		placement: {
+			type: Object,
+			required: true
+		},
+		breakpointId: {
+			type: String,
+			required: true
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots }) {
+		return () => h("div", {
+			class: "ldesign-layout-item",
+			"data-layout-item-id": props.item.id,
+			"data-layout-type": props.item.type,
+			style: resolveItemStyle(props.item, props.breakpointId)
+		}, slots.default?.({
+			item: props.item,
+			placement: props.placement,
+			breakpointId: props.breakpointId
+		}) ?? renderMaterialForTarget(props.materials, props.item, props.target, props.placement, props.breakpointId));
+	}
+});
+//#endregion
+export { LGridItem };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGridItem.js.map

package/esm/components/LGridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.js","names":[],"sources":["../../src/components/LGridItem.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from 'vue'\nimport type { LayoutNode, LayoutPlacement } from '@composy/layout-core'\nimport { resolveItemStyle } from '@composy/layout-runtime'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGridItem = defineComponent({\n  name: 'LGridItem',\n  props: {\n    item: { type: Object as () => LayoutNode, required: true },\n    placement: { type: Object as () => LayoutPlacement, required: true },\n    breakpointId: { type: String, required: true },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        'div',\n        {\n          class: 'ldesign-layout-item',\n          'data-layout-item-id': props.item.id,\n          'data-layout-type': props.item.type,\n          style: resolveItemStyle(props.item, props.breakpointId),\n        },\n        slots.default?.({\n          item: props.item,\n          placement: props.placement,\n          breakpointId: props.breakpointId,\n        }) ??\n          renderMaterialForTarget(\n            props.materials as VueMaterialSource,\n            props.item,\n            props.target as 'vue' | 'webcomponent',\n            props.placement,\n            props.breakpointId\n          )\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,YAAY,gBAAgB;CACvC,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAA4B,UAAU;EAAK;EACzD,WAAW;GAAE,MAAM;GAAiC,UAAU;EAAK;EACnE,cAAc;GAAE,MAAM;GAAQ,UAAU;EAAK;EAC7C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aACE,EACE,OACA;GACE,OAAO;GACP,uBAAuB,MAAM,KAAK;GAClC,oBAAoB,MAAM,KAAK;GAC/B,OAAO,iBAAiB,MAAM,MAAM,MAAM,YAAY;EACxD,GACA,MAAM,UAAU;GACd,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,cAAc,MAAM;EACtB,CAAC,KACC,wBACE,MAAM,WACN,MAAM,MACN,MAAM,QACN,MAAM,WACN,MAAM,YACR,CACJ;CACJ;AACF,CAAC"}

package/esm/components/LLayoutEditor.d.ts

@@ -0,0 +1,50 @@
+import { type PropType } from 'vue';
+import type { LayoutDocument, MaterialDefinition, MaterialRegistry } from '@composy/layout-core';
+import type { LayoutEditorEngine, LayoutEditorOptions } from '@composy/layout-editor';
+export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: PropType<MaterialRegistry | readonly MaterialDefinition[]>;
+        default: any;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:document" | "ready")[], "change" | "update:document" | "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: PropType<MaterialRegistry | readonly MaterialDefinition[]>;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:document"?: (...args: any[]) => any;
+    onReady?: (...args: any[]) => any;
+}>, {
+    mode: "edit" | "preview" | "readonly";
+    materials: MaterialRegistry | readonly MaterialDefinition<import("@composy/layout-core").JsonRecord>[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LLayoutEditor.d.ts.map

package/esm/components/LLayoutEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLayoutEditor.d.ts","sourceRoot":"","sources":["../../src/components/LLayoutEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAEd,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,eAAO,MAAM,aAAa;;cAGM,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;cAE5B,QAAQ,CAC/B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CACjD;;;;;;;cAVyB,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;cAE5B,QAAQ,CAC/B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CACjD;;;;;;;;;;4EA0DL,CAAA"}