@composy/layout-runtime 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0-alpha.0
+
+- Added the DOM-free CSS Grid runtime and responsive style serialization helpers.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LDesign Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @composy/layout-runtime
+
+DOM runtime for rendering a `LayoutDocument` with CSS Grid. It owns breakpoint resolution,
+responsive resize observation, item shell lifecycle, and renderer cleanup without importing
+GridStack or a UI framework.
+
+```ts
+import { createLayoutRuntime } from '@composy/layout-runtime'
+
+const runtime = createLayoutRuntime({ container, document })
+runtime.mount()
+```
+
+运行时也可接受 `materials`。没有提供 `renderItem` 时，优先创建物料声明的 Web
+Component，其次使用 HTML 标签或 `html.render`；提供 `renderItem` 时由宿主完全接管渲染。
+
+Use `update`, `setBreakpoint`, and `destroy` to control the runtime lifecycle.

package/dist/index.js

@@ -0,0 +1,243 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+"use strict";
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@composy/layout-core")) : typeof define === "function" && define.amd ? define(["exports", "@composy/layout-core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignLayoutRuntime = {}, global.ComposyLayoutCore));
+})(this, function(exports, _composy_layout_core) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/styles.ts
+	function resolveGridStyle(document, breakpointId) {
+		const grid = (0, _composy_layout_core.getEffectiveGrid)(document, breakpointId);
+		const breakpoint = (0, _composy_layout_core.getBreakpoint)(document, breakpointId);
+		const style = {
+			display: "grid",
+			gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+			gridAutoRows: `${grid.rowSize}px`,
+			gap: `${grid.gap}px`,
+			direction: grid.direction
+		};
+		if (document.grid.minRows !== void 0) style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+		if (document.grid.maxRows !== void 0) style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+		if (breakpoint?.canvasWidth) style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`;
+		return style;
+	}
+	function resolveItemStyle(node, breakpointId) {
+		const placement = node.layout[breakpointId];
+		if (!placement) return { display: "none" };
+		return {
+			gridColumn: `${placement.x + 1} / span ${placement.w}`,
+			gridRow: `${placement.y + 1} / span ${placement.h}`,
+			display: placement.hidden ? "none" : ""
+		};
+	}
+	//#endregion
+	//#region src/material-renderer.ts
+	function normalizeMaterialSource(source) {
+		if (!source) return void 0;
+		if (Array.isArray(source)) return (0, _composy_layout_core.createMaterialRegistry)(source);
+		return source;
+	}
+	function renderRuntimeMaterial(context, materials) {
+		const material = materials?.get(context.item.type);
+		const renderer = material?.renderers?.webcomponent ?? material?.renderers?.html;
+		if (!material || !renderer) return void 0;
+		const host = context.shell.ownerDocument;
+		let node;
+		if (renderer.tagName) node = host.createElement(renderer.tagName);
+		else if (renderer.render) {
+			const rendered = renderer.render({
+				item: context.item,
+				placement: context.placement,
+				breakpointId: context.breakpointId
+			});
+			if (rendered instanceof Node) node = rendered;
+			else if (typeof rendered === "string") {
+				const wrapper = host.createElement("div");
+				wrapper.innerHTML = sanitizeMarkup(rendered);
+				node = wrapper;
+			}
+		}
+		if (!node) return void 0;
+		const applyProps = (item) => {
+			if (!(node instanceof HTMLElement)) return;
+			for (const [key, value] of Object.entries(item.props ?? {})) {
+				try {
+					node[key] = value;
+				} catch {}
+				if (value === null || value === void 0 || typeof value === "object" || typeof value === "function") {
+					if (value !== null && value !== void 0) node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value);
+				} else node.setAttribute(key, String(value));
+			}
+		};
+		applyProps(context.item);
+		context.shell.replaceChildren(node);
+		return {
+			update(next) {
+				applyProps(next.item);
+			},
+			destroy() {
+				if (node?.parentNode === context.shell) context.shell.removeChild(node);
+			}
+		};
+	}
+	function toDataKey(value) {
+		return value.replace(/[^a-zA-Z0-9]/g, "");
+	}
+	function sanitizeMarkup(value) {
+		return value.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi, "");
+	}
+	//#endregion
+	//#region src/runtime.ts
+	function createLayoutRuntime(options) {
+		let document = options.document;
+		let mounted = false;
+		let manualBreakpoint;
+		let activeBreakpoint;
+		let observer;
+		const handles = /* @__PURE__ */ new Map();
+		const shells = /* @__PURE__ */ new Map();
+		const ownedShells = /* @__PURE__ */ new Set();
+		const materials = normalizeMaterialSource(options.materials);
+		function render() {
+			if (!mounted || !document) return;
+			const result = (0, _composy_layout_core.validateLayoutDocument)(document);
+			if (!result.valid) {
+				options.onError?.(new Error(result.issues[0]?.message ?? "Invalid layout document"));
+				return;
+			}
+			const breakpointId = manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId;
+			activeBreakpoint = breakpointId;
+			const gridStyle = resolveGridStyle(document, breakpointId);
+			Object.assign(options.container.style, gridStyle);
+			const currentIds = new Set(document.items.map((item) => item.id));
+			for (const [id, handle] of handles) {
+				if (currentIds.has(id)) continue;
+				try {
+					handle.destroy?.();
+				} finally {
+					handles.delete(id);
+					const shell = shells.get(id);
+					if (shell && ownedShells.has(shell)) shell.remove();
+					if (shell) ownedShells.delete(shell);
+					shells.delete(id);
+				}
+			}
+			for (const item of document.items) {
+				const placement = item.layout[breakpointId];
+				let shell = shells.get(item.id);
+				if (!shell) {
+					shell = options.getItemShell?.(item);
+					if (!shell) {
+						shell = options.container.ownerDocument.createElement("div");
+						shell.className = "ldesign-layout-item";
+						shell.dataset.layoutItemId = item.id;
+						shell.dataset.layoutType = item.type;
+						ownedShells.add(shell);
+						options.container.appendChild(shell);
+					}
+					shells.set(item.id, shell);
+				}
+				Object.assign(shell.style, resolveItemStyle(item, breakpointId));
+				if (!placement) continue;
+				const context = {
+					shell,
+					item,
+					placement,
+					breakpointId
+				};
+				try {
+					let handle = handles.get(item.id);
+					if (!handle) {
+						handle = options.renderItem ? options.renderItem(context) ?? {} : renderRuntimeMaterial(context, materials) ?? {};
+						handles.set(item.id, handle);
+					} else handle.update?.(context);
+				} catch (error) {
+					options.onError?.(error);
+				}
+			}
+		}
+		function updateBreakpoint(width) {
+			if (!document || manualBreakpoint) return;
+			const next = (0, _composy_layout_core.resolveBreakpoint)(document, width).id;
+			if (next !== activeBreakpoint) {
+				const previous = activeBreakpoint;
+				activeBreakpoint = next;
+				options.onBreakpointChange?.(next);
+				if (previous !== next) render();
+			}
+		}
+		function updateBreakpointFromContainer() {
+			if (!document || manualBreakpoint) return;
+			const width = options.container.getBoundingClientRect().width || options.container.clientWidth;
+			if (width > 0) updateBreakpoint(width);
+			else if (activeBreakpoint !== document.defaultBreakpointId) {
+				const previous = activeBreakpoint;
+				activeBreakpoint = document.defaultBreakpointId;
+				if (previous) options.onBreakpointChange?.(activeBreakpoint);
+			}
+		}
+		return {
+			mount() {
+				if (mounted) return;
+				mounted = true;
+				if (options.observeResize !== false && typeof ResizeObserver !== "undefined") {
+					observer = new ResizeObserver((entries) => {
+						const width = entries[0]?.contentRect.width ?? options.container.clientWidth;
+						if (width > 0) updateBreakpoint(width);
+						else updateBreakpointFromContainer();
+					});
+					observer.observe(options.container);
+				}
+				updateBreakpointFromContainer();
+				render();
+			},
+			update(next) {
+				document = next;
+				render();
+			},
+			setBreakpoint(id) {
+				manualBreakpoint = id;
+				if (id) activeBreakpoint = id;
+				else updateBreakpointFromContainer();
+				render();
+			},
+			getBreakpoint() {
+				return activeBreakpoint;
+			},
+			getContainer() {
+				return options.container;
+			},
+			destroy() {
+				if (!mounted) return;
+				observer?.disconnect();
+				observer = void 0;
+				for (const handle of handles.values()) handle.destroy?.();
+				handles.clear();
+				for (const shell of shells.values()) if (ownedShells.has(shell)) shell.remove();
+				shells.clear();
+				ownedShells.clear();
+				options.container.style.removeProperty("display");
+				options.container.style.removeProperty("grid-template-columns");
+				options.container.style.removeProperty("grid-auto-rows");
+				options.container.style.removeProperty("gap");
+				options.container.style.removeProperty("direction");
+				options.container.style.removeProperty("min-height");
+				options.container.style.removeProperty("max-height");
+				mounted = false;
+			}
+		};
+	}
+	//#endregion
+	exports.createLayoutRuntime = createLayoutRuntime;
+	exports.resolveGridStyle = resolveGridStyle;
+	exports.resolveItemStyle = resolveItemStyle;
+});
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/styles.ts","../src/material-renderer.ts","../src/runtime.ts"],"sourcesContent":["import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n} from '@composy/layout-core'\nimport { getEffectiveGrid, getBreakpoint } from '@composy/layout-core'\n\nexport interface GridStyleResult {\n  display: 'grid'\n  gridTemplateColumns: string\n  gridAutoRows: string\n  gap: string\n  direction: 'ltr' | 'rtl'\n  minHeight?: string\n  maxHeight?: string\n}\n\nexport function resolveGridStyle(\n  document: LayoutDocument,\n  breakpointId: BreakpointId\n): GridStyleResult {\n  const grid = getEffectiveGrid(document, breakpointId)\n  const breakpoint = getBreakpoint(document, breakpointId)\n  const style: GridStyleResult = {\n    display: 'grid',\n    gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,\n    gridAutoRows: `${grid.rowSize}px`,\n    gap: `${grid.gap}px`,\n    direction: grid.direction,\n  }\n  if (document.grid.minRows !== undefined)\n    style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (document.grid.maxRows !== undefined)\n    style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (breakpoint?.canvasWidth)\n    style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`\n  return style\n}\n\nexport function resolveItemStyle(\n  node: LayoutNode,\n  breakpointId: BreakpointId\n): Record<string, string> {\n  const placement = node.layout[breakpointId]\n  if (!placement) return { display: 'none' }\n  return {\n    gridColumn: `${placement.x + 1} / span ${placement.w}`,\n    gridRow: `${placement.y + 1} / span ${placement.h}`,\n    display: placement.hidden ? 'none' : '',\n  }\n}\n","import {\n  createMaterialRegistry,\n  type LayoutNode,\n  type MaterialDefinition,\n  type MaterialRegistry,\n} from '@composy/layout-core'\nimport type { LayoutRenderContext, LayoutRenderHandle } from './runtime'\n\nexport type RuntimeMaterialSource =\n  MaterialRegistry | readonly MaterialDefinition[] | undefined\n\nexport function normalizeMaterialSource(\n  source: RuntimeMaterialSource\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 renderRuntimeMaterial(\n  context: LayoutRenderContext,\n  materials: MaterialRegistry | undefined\n): LayoutRenderHandle | undefined {\n  const material = materials?.get(context.item.type)\n  const renderer =\n    material?.renderers?.webcomponent ?? material?.renderers?.html\n  if (!material || !renderer) return undefined\n\n  const host = context.shell.ownerDocument\n  let node: Node | undefined\n  if (renderer.tagName) {\n    node = host.createElement(renderer.tagName)\n  } else if (renderer.render) {\n    const rendered = renderer.render({\n      item: context.item,\n      placement: context.placement,\n      breakpointId: context.breakpointId,\n    })\n    if (rendered instanceof Node) node = rendered\n    else if (typeof rendered === 'string') {\n      const wrapper = host.createElement('div')\n      wrapper.innerHTML = sanitizeMarkup(rendered)\n      node = wrapper\n    }\n  }\n  if (!node) return undefined\n\n  const applyProps = (item: LayoutNode): void => {\n    if (!(node instanceof HTMLElement)) return\n    for (const [key, value] of Object.entries(item.props ?? {})) {\n      try {\n        ;(node as unknown as Record<string, unknown>)[key] = value\n      } catch {\n        // Some custom elements expose readonly properties. The attribute is a\n        // useful fallback for string-like values.\n      }\n      if (\n        value === null ||\n        value === undefined ||\n        typeof value === 'object' ||\n        typeof value === 'function'\n      ) {\n        if (value !== null && value !== undefined)\n          node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value)\n      } else node.setAttribute(key, String(value))\n    }\n  }\n  applyProps(context.item)\n  context.shell.replaceChildren(node)\n  return {\n    update(next) {\n      applyProps(next.item)\n    },\n    destroy() {\n      if (node?.parentNode === context.shell) context.shell.removeChild(node)\n    },\n  }\n}\n\nfunction toDataKey(value: string): string {\n  return value.replace(/[^a-zA-Z0-9]/g, '')\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","import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n  MaterialDefinition,\n  MaterialRegistry,\n} from '@composy/layout-core'\nimport { resolveBreakpoint, validateLayoutDocument } from '@composy/layout-core'\nimport { resolveGridStyle, resolveItemStyle } from './styles'\nimport {\n  normalizeMaterialSource,\n  renderRuntimeMaterial,\n} from './material-renderer'\n\nexport interface LayoutRenderContext {\n  shell: HTMLElement\n  item: LayoutNode\n  placement: LayoutPlacement\n  breakpointId: BreakpointId\n}\nexport interface LayoutRenderHandle {\n  update?(context: LayoutRenderContext): void\n  destroy?(): void\n}\nexport interface LayoutRuntimeOptions {\n  container: HTMLElement\n  document?: LayoutDocument\n  /** Lets a host adapter provide an existing light-DOM item shell. */\n  getItemShell?: (item: LayoutNode) => HTMLElement | undefined\n  renderItem?: (context: LayoutRenderContext) => LayoutRenderHandle | void\n  /** Material registry used by the framework-neutral default renderer. */\n  materials?: MaterialRegistry | readonly MaterialDefinition[]\n  observeResize?: boolean\n  onBreakpointChange?: (id: BreakpointId) => void\n  onError?: (error: unknown) => void\n}\n\nexport interface LayoutRuntime {\n  mount(): void\n  update(document: LayoutDocument): void\n  setBreakpoint(id?: BreakpointId): void\n  getBreakpoint(): BreakpointId | undefined\n  getContainer(): HTMLElement\n  destroy(): void\n}\n\nexport function createLayoutRuntime(\n  options: LayoutRuntimeOptions\n): LayoutRuntime {\n  let document = options.document\n  let mounted = false\n  let manualBreakpoint: BreakpointId | undefined\n  let activeBreakpoint: BreakpointId | undefined\n  let observer: ResizeObserver | undefined\n  const handles = new Map<string, LayoutRenderHandle>()\n  const shells = new Map<string, HTMLElement>()\n  const ownedShells = new Set<HTMLElement>()\n  const materials = normalizeMaterialSource(options.materials)\n\n  function render(): void {\n    if (!mounted || !document) return\n    const result = validateLayoutDocument(document)\n    if (!result.valid) {\n      options.onError?.(\n        new Error(result.issues[0]?.message ?? 'Invalid layout document')\n      )\n      return\n    }\n    const breakpointId =\n      manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId\n    activeBreakpoint = breakpointId\n    const gridStyle = resolveGridStyle(document, breakpointId)\n    Object.assign(options.container.style, gridStyle)\n    const currentIds = new Set(document.items.map(item => item.id))\n    for (const [id, handle] of handles) {\n      if (currentIds.has(id)) continue\n      try {\n        handle.destroy?.()\n      } finally {\n        handles.delete(id)\n        const shell = shells.get(id)\n        if (shell && ownedShells.has(shell)) shell.remove()\n        if (shell) ownedShells.delete(shell)\n        shells.delete(id)\n      }\n    }\n    for (const item of document.items) {\n      const placement = item.layout[breakpointId]\n      let shell = shells.get(item.id)\n      if (!shell) {\n        shell = options.getItemShell?.(item)\n        if (!shell) {\n          shell = options.container.ownerDocument.createElement('div')\n          shell.className = 'ldesign-layout-item'\n          shell.dataset.layoutItemId = item.id\n          shell.dataset.layoutType = item.type\n          ownedShells.add(shell)\n          options.container.appendChild(shell)\n        }\n        shells.set(item.id, shell)\n      }\n      Object.assign(shell.style, resolveItemStyle(item, breakpointId))\n      if (!placement) continue\n      const context = { shell, item, placement, breakpointId }\n      try {\n        let handle = handles.get(item.id)\n        if (!handle) {\n          handle = options.renderItem\n            ? (options.renderItem(context) ?? {})\n            : (renderRuntimeMaterial(context, materials) ?? {})\n          handles.set(item.id, handle)\n        } else handle.update?.(context)\n      } catch (error) {\n        options.onError?.(error)\n      }\n    }\n  }\n\n  function updateBreakpoint(width: number): void {\n    if (!document || manualBreakpoint) return\n    const next = resolveBreakpoint(document, width).id\n    if (next !== activeBreakpoint) {\n      const previous = activeBreakpoint\n      activeBreakpoint = next\n      options.onBreakpointChange?.(next)\n      if (previous !== next) render()\n    }\n  }\n\n  function updateBreakpointFromContainer(): void {\n    if (!document || manualBreakpoint) return\n    const width =\n      options.container.getBoundingClientRect().width ||\n      options.container.clientWidth\n    // A hidden or detached container has no measurable width. Keep the\n    // document default until the first real resize instead of selecting the\n    // smallest breakpoint for width 0.\n    if (width > 0) updateBreakpoint(width)\n    else if (activeBreakpoint !== document.defaultBreakpointId) {\n      const previous = activeBreakpoint\n      activeBreakpoint = document.defaultBreakpointId\n      if (previous) options.onBreakpointChange?.(activeBreakpoint)\n    }\n  }\n\n  return {\n    mount() {\n      if (mounted) return\n      mounted = true\n      if (\n        options.observeResize !== false &&\n        typeof ResizeObserver !== 'undefined'\n      ) {\n        observer = new ResizeObserver(entries => {\n          const width =\n            entries[0]?.contentRect.width ?? options.container.clientWidth\n          if (width > 0) updateBreakpoint(width)\n          else updateBreakpointFromContainer()\n        })\n        observer.observe(options.container)\n      }\n      updateBreakpointFromContainer()\n      render()\n    },\n    update(next) {\n      document = next\n      render()\n    },\n    setBreakpoint(id) {\n      manualBreakpoint = id\n      if (id) activeBreakpoint = id\n      else updateBreakpointFromContainer()\n      render()\n    },\n    getBreakpoint() {\n      return activeBreakpoint\n    },\n    getContainer() {\n      return options.container\n    },\n    destroy() {\n      if (!mounted) return\n      observer?.disconnect()\n      observer = undefined\n      for (const handle of handles.values()) handle.destroy?.()\n      handles.clear()\n      for (const shell of shells.values())\n        if (ownedShells.has(shell)) shell.remove()\n      shells.clear()\n      ownedShells.clear()\n      options.container.style.removeProperty('display')\n      options.container.style.removeProperty('grid-template-columns')\n      options.container.style.removeProperty('grid-auto-rows')\n      options.container.style.removeProperty('gap')\n      options.container.style.removeProperty('direction')\n      options.container.style.removeProperty('min-height')\n      options.container.style.removeProperty('max-height')\n      mounted = false\n    },\n  }\n}\n\nexport { resolveGridStyle, resolveItemStyle }\n"],"mappings":"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"}

package/dist/index.min.js

@@ -0,0 +1 @@
+"use strict";(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory(exports,require("@composy/layout-core")):typeof define==="function"&&define.amd?define(["exports","@composy/layout-core"],factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,factory(global.LDesignLayoutRuntime={},global.ComposyLayoutCore));})(this,function(exports,_composy_layout_core){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function resolveGridStyle(document,breakpointId){const grid=(0,_composy_layout_core.getEffectiveGrid)(document,breakpointId);const breakpoint=(0,_composy_layout_core.getBreakpoint)(document,breakpointId);const style={display:"grid",gridTemplateColumns:`repeat(${grid.columns},minmax(0,1fr))`,gridAutoRows:`${grid.rowSize}px`,gap:`${grid.gap}px`,direction:grid.direction};if(document.grid.minRows!==void 0)style.minHeight=`${document.grid.minRows*(grid.rowSize+grid.gap)-grid.gap}px`;if(document.grid.maxRows!==void 0)style.maxHeight=`${document.grid.maxRows*(grid.rowSize+grid.gap)-grid.gap}px`;if(breakpoint?.canvasWidth)style.gridTemplateColumns=`repeat(${grid.columns},minmax(0,1fr))`;return style;}function resolveItemStyle(node,breakpointId){const placement=node.layout[breakpointId];if(!placement)return{display:"none"};return{gridColumn:`${placement.x+1}/span ${placement.w}`,gridRow:`${placement.y+1}/span ${placement.h}`,display:placement.hidden?"none":""};}function normalizeMaterialSource(source){if(!source)return void 0;if(Array.isArray(source))return(0,_composy_layout_core.createMaterialRegistry)(source);return source;}function renderRuntimeMaterial(context,materials){const material=materials?.get(context.item.type);const renderer=material?.renderers?.webcomponent??material?.renderers?.html;if(!material||!renderer)return void 0;const host=context.shell.ownerDocument;let node;if(renderer.tagName)node=host.createElement(renderer.tagName);else if(renderer.render){const rendered=renderer.render({item:context.item,placement:context.placement,breakpointId:context.breakpointId});if(rendered instanceof Node)node=rendered;else if(typeof rendered==="string"){const wrapper=host.createElement("div");wrapper.innerHTML=sanitizeMarkup(rendered);node=wrapper;}}if(!node)return void 0;const applyProps=(item)=>{if(!(node instanceof HTMLElement))return;for(const[key,value]of Object.entries(item.props??{})){try{node[key]=value;}catch{}if(value===null||value===void 0||typeof value==="object"||typeof value==="function"){if(value!==null&&value!==void 0)node.dataset[`prop${toDataKey(key)}`]=JSON.stringify(value);}else node.setAttribute(key,String(value));}};applyProps(context.item);context.shell.replaceChildren(node);return{update(next){applyProps(next.item);},destroy(){if(node?.parentNode===context.shell)context.shell.removeChild(node);}};}function toDataKey(value){return value.replace(/[^a-zA-Z0-9]/g,"");}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,"");}function createLayoutRuntime(options){let document=options.document;let mounted=false;let manualBreakpoint;let activeBreakpoint;let observer;const handles=new Map();const shells=new Map();const ownedShells=new Set();const materials=normalizeMaterialSource(options.materials);function render(){if(!mounted||!document)return;const result=(0,_composy_layout_core.validateLayoutDocument)(document);if(!result.valid){options.onError?.(new Error(result.issues[0]?.message??"Invalid layout document"));return;}const breakpointId=manualBreakpoint??activeBreakpoint??document.defaultBreakpointId;activeBreakpoint=breakpointId;const gridStyle=resolveGridStyle(document,breakpointId);Object.assign(options.container.style,gridStyle);const currentIds=new Set(document.items.map((item)=>item.id));for(const[id,handle]of handles){if(currentIds.has(id))continue;try{handle.destroy?.();}finally{handles.delete(id);const shell=shells.get(id);if(shell&&ownedShells.has(shell))shell.remove();if(shell)ownedShells.delete(shell);shells.delete(id);}}for(const item of document.items){const placement=item.layout[breakpointId];let shell=shells.get(item.id);if(!shell){shell=options.getItemShell?.(item);if(!shell){shell=options.container.ownerDocument.createElement("div");shell.className="ldesign-layout-item";shell.dataset.layoutItemId=item.id;shell.dataset.layoutType=item.type;ownedShells.add(shell);options.container.appendChild(shell);}shells.set(item.id,shell);}Object.assign(shell.style,resolveItemStyle(item,breakpointId));if(!placement)continue;const context={shell,item,placement,breakpointId};try{let handle=handles.get(item.id);if(!handle){handle=options.renderItem?options.renderItem(context)??{}:renderRuntimeMaterial(context,materials)??{};handles.set(item.id,handle);}else handle.update?.(context);}catch(error){options.onError?.(error);}}}function updateBreakpoint(width){if(!document||manualBreakpoint)return;const next=(0,_composy_layout_core.resolveBreakpoint)(document,width).id;if(next!==activeBreakpoint){const previous=activeBreakpoint;activeBreakpoint=next;options.onBreakpointChange?.(next);if(previous!==next)render();}}function updateBreakpointFromContainer(){if(!document||manualBreakpoint)return;const width=options.container.getBoundingClientRect().width||options.container.clientWidth;if(width>0)updateBreakpoint(width);else if(activeBreakpoint!==document.defaultBreakpointId){const previous=activeBreakpoint;activeBreakpoint=document.defaultBreakpointId;if(previous)options.onBreakpointChange?.(activeBreakpoint);}}return{mount(){if(mounted)return;mounted=true;if(options.observeResize!==false&&typeof ResizeObserver!=="undefined"){observer=new ResizeObserver((entries)=>{const width=entries[0]?.contentRect.width??options.container.clientWidth;if(width>0)updateBreakpoint(width);else updateBreakpointFromContainer();});observer.observe(options.container);}updateBreakpointFromContainer();render();},update(next){document=next;render();},setBreakpoint(id){manualBreakpoint=id;if(id)activeBreakpoint=id;else updateBreakpointFromContainer();render();},getBreakpoint(){return activeBreakpoint;},getContainer(){return options.container;},destroy(){if(!mounted)return;observer?.disconnect();observer=void 0;for(const handle of handles.values())handle.destroy?.();handles.clear();for(const shell of shells.values())if(ownedShells.has(shell))shell.remove();shells.clear();ownedShells.clear();options.container.style.removeProperty("display");options.container.style.removeProperty("grid-template-columns");options.container.style.removeProperty("grid-auto-rows");options.container.style.removeProperty("gap");options.container.style.removeProperty("direction");options.container.style.removeProperty("min-height");options.container.style.removeProperty("max-height");mounted=false;}};}exports.createLayoutRuntime=createLayoutRuntime;exports.resolveGridStyle=resolveGridStyle;exports.resolveItemStyle=resolveItemStyle;});

package/es/index.d.ts

@@ -0,0 +1,3 @@
+export * from './styles';
+export * from './runtime';
+//# 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,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA"}

package/es/index.js

@@ -0,0 +1,13 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { resolveGridStyle, resolveItemStyle } from "./styles.js";
+import { createLayoutRuntime } from "./runtime.js";
+export { createLayoutRuntime, resolveGridStyle, resolveItemStyle };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */

package/es/material-renderer.d.ts

@@ -0,0 +1,6 @@
+import { type MaterialDefinition, type MaterialRegistry } from '@composy/layout-core';
+import type { LayoutRenderContext, LayoutRenderHandle } from './runtime';
+export type RuntimeMaterialSource = MaterialRegistry | readonly MaterialDefinition[] | undefined;
+export declare function normalizeMaterialSource(source: RuntimeMaterialSource): MaterialRegistry | undefined;
+export declare function renderRuntimeMaterial(context: LayoutRenderContext, materials: MaterialRegistry | undefined): LayoutRenderHandle | undefined;
+//# sourceMappingURL=material-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.d.ts","sourceRoot":"","sources":["../src/material-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAExE,MAAM,MAAM,qBAAqB,GAC/B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAA;AAE9D,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,qBAAqB,GAC5B,gBAAgB,GAAG,SAAS,CAI9B;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,gBAAgB,GAAG,SAAS,GACtC,kBAAkB,GAAG,SAAS,CAuDhC"}

package/es/material-renderer.js

@@ -0,0 +1,69 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { createMaterialRegistry } from "@composy/layout-core";
+//#region src/material-renderer.ts
+function normalizeMaterialSource(source) {
+	if (!source) return void 0;
+	if (Array.isArray(source)) return createMaterialRegistry(source);
+	return source;
+}
+function renderRuntimeMaterial(context, materials) {
+	const material = materials?.get(context.item.type);
+	const renderer = material?.renderers?.webcomponent ?? material?.renderers?.html;
+	if (!material || !renderer) return void 0;
+	const host = context.shell.ownerDocument;
+	let node;
+	if (renderer.tagName) node = host.createElement(renderer.tagName);
+	else if (renderer.render) {
+		const rendered = renderer.render({
+			item: context.item,
+			placement: context.placement,
+			breakpointId: context.breakpointId
+		});
+		if (rendered instanceof Node) node = rendered;
+		else if (typeof rendered === "string") {
+			const wrapper = host.createElement("div");
+			wrapper.innerHTML = sanitizeMarkup(rendered);
+			node = wrapper;
+		}
+	}
+	if (!node) return void 0;
+	const applyProps = (item) => {
+		if (!(node instanceof HTMLElement)) return;
+		for (const [key, value] of Object.entries(item.props ?? {})) {
+			try {
+				node[key] = value;
+			} catch {}
+			if (value === null || value === void 0 || typeof value === "object" || typeof value === "function") {
+				if (value !== null && value !== void 0) node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value);
+			} else node.setAttribute(key, String(value));
+		}
+	};
+	applyProps(context.item);
+	context.shell.replaceChildren(node);
+	return {
+		update(next) {
+			applyProps(next.item);
+		},
+		destroy() {
+			if (node?.parentNode === context.shell) context.shell.removeChild(node);
+		}
+	};
+}
+function toDataKey(value) {
+	return value.replace(/[^a-zA-Z0-9]/g, "");
+}
+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 { normalizeMaterialSource, renderRuntimeMaterial };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=material-renderer.js.map

package/es/material-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.js","names":[],"sources":["../src/material-renderer.ts"],"sourcesContent":["import {\n  createMaterialRegistry,\n  type LayoutNode,\n  type MaterialDefinition,\n  type MaterialRegistry,\n} from '@composy/layout-core'\nimport type { LayoutRenderContext, LayoutRenderHandle } from './runtime'\n\nexport type RuntimeMaterialSource =\n  MaterialRegistry | readonly MaterialDefinition[] | undefined\n\nexport function normalizeMaterialSource(\n  source: RuntimeMaterialSource\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 renderRuntimeMaterial(\n  context: LayoutRenderContext,\n  materials: MaterialRegistry | undefined\n): LayoutRenderHandle | undefined {\n  const material = materials?.get(context.item.type)\n  const renderer =\n    material?.renderers?.webcomponent ?? material?.renderers?.html\n  if (!material || !renderer) return undefined\n\n  const host = context.shell.ownerDocument\n  let node: Node | undefined\n  if (renderer.tagName) {\n    node = host.createElement(renderer.tagName)\n  } else if (renderer.render) {\n    const rendered = renderer.render({\n      item: context.item,\n      placement: context.placement,\n      breakpointId: context.breakpointId,\n    })\n    if (rendered instanceof Node) node = rendered\n    else if (typeof rendered === 'string') {\n      const wrapper = host.createElement('div')\n      wrapper.innerHTML = sanitizeMarkup(rendered)\n      node = wrapper\n    }\n  }\n  if (!node) return undefined\n\n  const applyProps = (item: LayoutNode): void => {\n    if (!(node instanceof HTMLElement)) return\n    for (const [key, value] of Object.entries(item.props ?? {})) {\n      try {\n        ;(node as unknown as Record<string, unknown>)[key] = value\n      } catch {\n        // Some custom elements expose readonly properties. The attribute is a\n        // useful fallback for string-like values.\n      }\n      if (\n        value === null ||\n        value === undefined ||\n        typeof value === 'object' ||\n        typeof value === 'function'\n      ) {\n        if (value !== null && value !== undefined)\n          node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value)\n      } else node.setAttribute(key, String(value))\n    }\n  }\n  applyProps(context.item)\n  context.shell.replaceChildren(node)\n  return {\n    update(next) {\n      applyProps(next.item)\n    },\n    destroy() {\n      if (node?.parentNode === context.shell) context.shell.removeChild(node)\n    },\n  }\n}\n\nfunction toDataKey(value: string): string {\n  return value.replace(/[^a-zA-Z0-9]/g, '')\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":";;;;;;;;;;;AAWO,SAAS,wBACd,QAC8B;CAC9B,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,IAAI,MAAM,QAAQ,MAAM,GAAG,OAAO,uBAAuB,MAAM;CAC/D,OAAO;AACT;AAEO,SAAS,sBACd,SACA,WACgC;CAChC,MAAM,WAAW,WAAW,IAAI,QAAQ,KAAK,IAAI;CACjD,MAAM,WACJ,UAAU,WAAW,gBAAgB,UAAU,WAAW;CAC5D,IAAI,CAAC,YAAY,CAAC,UAAU,OAAO,KAAA;CAEnC,MAAM,OAAO,QAAQ,MAAM;CAC3B,IAAI;CACJ,IAAI,SAAS,SACX,OAAO,KAAK,cAAc,SAAS,OAAO;MAC5C,IAAW,SAAS,QAAQ;EAC1B,MAAM,WAAW,SAAS,OAAO;GAC/B,MAAM,QAAQ;GACd,WAAW,QAAQ;GACnB,cAAc,QAAQ;EACxB,CAAC;EACD,IAAI,oBAAoB,MAAM,OAAO;OAAA,IAC5B,OAAO,aAAa,UAAU;GACrC,MAAM,UAAU,KAAK,cAAc,KAAK;GACxC,QAAQ,YAAY,eAAe,QAAQ;GAC3C,OAAO;EACT;CACF;CACA,IAAI,CAAC,MAAM,OAAO,KAAA;CAElB,MAAM,cAAc,SAA2B;EAC7C,IAAI,EAAE,gBAAgB,cAAc;EACpC,KAAA,MAAW,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,SAAS,CAAC,CAAC,GAAG;GAC3D,IAAI;IACA,KAA4C,OAAO;GACvD,QAAQ,CAGR;GACA,IACE,UAAU,QACV,UAAU,KAAA,KACV,OAAO,UAAU,YACjB,OAAO,UAAU;QAEb,UAAU,QAAQ,UAAU,KAAA,GAC9B,KAAK,QAAQ,OAAO,UAAU,GAAG,OAAO,KAAK,UAAU,KAAK;GAAA,OACzD,KAAK,aAAa,KAAK,OAAO,KAAK,CAAC;EAC7C;CACF;CACA,WAAW,QAAQ,IAAI;CACvB,QAAQ,MAAM,gBAAgB,IAAI;CAClC,OAAO;EACL,OAAO,MAAM;GACX,WAAW,KAAK,IAAI;EACtB;EACA,UAAU;GACR,IAAI,MAAM,eAAe,QAAQ,OAAO,QAAQ,MAAM,YAAY,IAAI;EACxE;CACF;AACF;AAEA,SAAS,UAAU,OAAuB;CACxC,OAAO,MAAM,QAAQ,iBAAiB,EAAE;AAC1C;AAEA,SAAS,eAAe,OAAuB;CAC7C,OAAO,MACJ,QAAQ,0CAA0C,EAAE,CAAA,CACpD,QAAQ,mDAAmD,EAAE,CAAA,CAC7D,QAAQ,uDAAuD,EAAE;AACtE"}

package/es/runtime.d.ts

@@ -0,0 +1,35 @@
+import type { BreakpointId, LayoutDocument, LayoutNode, LayoutPlacement, MaterialDefinition, MaterialRegistry } from '@composy/layout-core';
+import { resolveGridStyle, resolveItemStyle } from './styles';
+export interface LayoutRenderContext {
+    shell: HTMLElement;
+    item: LayoutNode;
+    placement: LayoutPlacement;
+    breakpointId: BreakpointId;
+}
+export interface LayoutRenderHandle {
+    update?(context: LayoutRenderContext): void;
+    destroy?(): void;
+}
+export interface LayoutRuntimeOptions {
+    container: HTMLElement;
+    document?: LayoutDocument;
+    /** Lets a host adapter provide an existing light-DOM item shell. */
+    getItemShell?: (item: LayoutNode) => HTMLElement | undefined;
+    renderItem?: (context: LayoutRenderContext) => LayoutRenderHandle | void;
+    /** Material registry used by the framework-neutral default renderer. */
+    materials?: MaterialRegistry | readonly MaterialDefinition[];
+    observeResize?: boolean;
+    onBreakpointChange?: (id: BreakpointId) => void;
+    onError?: (error: unknown) => void;
+}
+export interface LayoutRuntime {
+    mount(): void;
+    update(document: LayoutDocument): void;
+    setBreakpoint(id?: BreakpointId): void;
+    getBreakpoint(): BreakpointId | undefined;
+    getContainer(): HTMLElement;
+    destroy(): void;
+}
+export declare function createLayoutRuntime(options: LayoutRuntimeOptions): LayoutRuntime;
+export { resolveGridStyle, resolveItemStyle };
+//# sourceMappingURL=runtime.d.ts.map

package/es/runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAM7D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;IAChB,SAAS,EAAE,eAAe,CAAA;IAC1B,YAAY,EAAE,YAAY,CAAA;CAC3B;AACD,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC3C,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB;AACD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,WAAW,CAAA;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,GAAG,SAAS,CAAA;IAC5D,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,kBAAkB,GAAG,IAAI,CAAA;IACxE,wEAAwE;IACxE,SAAS,CAAC,EAAE,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CAAA;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,IAAI,CAAA;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,IAAI,IAAI,CAAA;IACb,MAAM,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACtC,aAAa,IAAI,YAAY,GAAG,SAAS,CAAA;IACzC,YAAY,IAAI,WAAW,CAAA;IAC3B,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,oBAAoB,GAC5B,aAAa,CAwJf;AAED,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/es/runtime.js

@@ -0,0 +1,156 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { resolveGridStyle, resolveItemStyle } from "./styles.js";
+import { normalizeMaterialSource, renderRuntimeMaterial } from "./material-renderer.js";
+import { resolveBreakpoint, validateLayoutDocument } from "@composy/layout-core";
+//#region src/runtime.ts
+function createLayoutRuntime(options) {
+	let document = options.document;
+	let mounted = false;
+	let manualBreakpoint;
+	let activeBreakpoint;
+	let observer;
+	const handles = /* @__PURE__ */ new Map();
+	const shells = /* @__PURE__ */ new Map();
+	const ownedShells = /* @__PURE__ */ new Set();
+	const materials = normalizeMaterialSource(options.materials);
+	function render() {
+		if (!mounted || !document) return;
+		const result = validateLayoutDocument(document);
+		if (!result.valid) {
+			options.onError?.(new Error(result.issues[0]?.message ?? "Invalid layout document"));
+			return;
+		}
+		const breakpointId = manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId;
+		activeBreakpoint = breakpointId;
+		const gridStyle = resolveGridStyle(document, breakpointId);
+		Object.assign(options.container.style, gridStyle);
+		const currentIds = new Set(document.items.map((item) => item.id));
+		for (const [id, handle] of handles) {
+			if (currentIds.has(id)) continue;
+			try {
+				handle.destroy?.();
+			} finally {
+				handles.delete(id);
+				const shell = shells.get(id);
+				if (shell && ownedShells.has(shell)) shell.remove();
+				if (shell) ownedShells.delete(shell);
+				shells.delete(id);
+			}
+		}
+		for (const item of document.items) {
+			const placement = item.layout[breakpointId];
+			let shell = shells.get(item.id);
+			if (!shell) {
+				shell = options.getItemShell?.(item);
+				if (!shell) {
+					shell = options.container.ownerDocument.createElement("div");
+					shell.className = "ldesign-layout-item";
+					shell.dataset.layoutItemId = item.id;
+					shell.dataset.layoutType = item.type;
+					ownedShells.add(shell);
+					options.container.appendChild(shell);
+				}
+				shells.set(item.id, shell);
+			}
+			Object.assign(shell.style, resolveItemStyle(item, breakpointId));
+			if (!placement) continue;
+			const context = {
+				shell,
+				item,
+				placement,
+				breakpointId
+			};
+			try {
+				let handle = handles.get(item.id);
+				if (!handle) {
+					handle = options.renderItem ? options.renderItem(context) ?? {} : renderRuntimeMaterial(context, materials) ?? {};
+					handles.set(item.id, handle);
+				} else handle.update?.(context);
+			} catch (error) {
+				options.onError?.(error);
+			}
+		}
+	}
+	function updateBreakpoint(width) {
+		if (!document || manualBreakpoint) return;
+		const next = resolveBreakpoint(document, width).id;
+		if (next !== activeBreakpoint) {
+			const previous = activeBreakpoint;
+			activeBreakpoint = next;
+			options.onBreakpointChange?.(next);
+			if (previous !== next) render();
+		}
+	}
+	function updateBreakpointFromContainer() {
+		if (!document || manualBreakpoint) return;
+		const width = options.container.getBoundingClientRect().width || options.container.clientWidth;
+		if (width > 0) updateBreakpoint(width);
+		else if (activeBreakpoint !== document.defaultBreakpointId) {
+			const previous = activeBreakpoint;
+			activeBreakpoint = document.defaultBreakpointId;
+			if (previous) options.onBreakpointChange?.(activeBreakpoint);
+		}
+	}
+	return {
+		mount() {
+			if (mounted) return;
+			mounted = true;
+			if (options.observeResize !== false && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver((entries) => {
+					const width = entries[0]?.contentRect.width ?? options.container.clientWidth;
+					if (width > 0) updateBreakpoint(width);
+					else updateBreakpointFromContainer();
+				});
+				observer.observe(options.container);
+			}
+			updateBreakpointFromContainer();
+			render();
+		},
+		update(next) {
+			document = next;
+			render();
+		},
+		setBreakpoint(id) {
+			manualBreakpoint = id;
+			if (id) activeBreakpoint = id;
+			else updateBreakpointFromContainer();
+			render();
+		},
+		getBreakpoint() {
+			return activeBreakpoint;
+		},
+		getContainer() {
+			return options.container;
+		},
+		destroy() {
+			if (!mounted) return;
+			observer?.disconnect();
+			observer = void 0;
+			for (const handle of handles.values()) handle.destroy?.();
+			handles.clear();
+			for (const shell of shells.values()) if (ownedShells.has(shell)) shell.remove();
+			shells.clear();
+			ownedShells.clear();
+			options.container.style.removeProperty("display");
+			options.container.style.removeProperty("grid-template-columns");
+			options.container.style.removeProperty("grid-auto-rows");
+			options.container.style.removeProperty("gap");
+			options.container.style.removeProperty("direction");
+			options.container.style.removeProperty("min-height");
+			options.container.style.removeProperty("max-height");
+			mounted = false;
+		}
+	};
+}
+//#endregion
+export { createLayoutRuntime, resolveGridStyle, resolveItemStyle };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=runtime.js.map

package/es/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","names":[],"sources":["../src/runtime.ts"],"sourcesContent":["import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n  MaterialDefinition,\n  MaterialRegistry,\n} from '@composy/layout-core'\nimport { resolveBreakpoint, validateLayoutDocument } from '@composy/layout-core'\nimport { resolveGridStyle, resolveItemStyle } from './styles'\nimport {\n  normalizeMaterialSource,\n  renderRuntimeMaterial,\n} from './material-renderer'\n\nexport interface LayoutRenderContext {\n  shell: HTMLElement\n  item: LayoutNode\n  placement: LayoutPlacement\n  breakpointId: BreakpointId\n}\nexport interface LayoutRenderHandle {\n  update?(context: LayoutRenderContext): void\n  destroy?(): void\n}\nexport interface LayoutRuntimeOptions {\n  container: HTMLElement\n  document?: LayoutDocument\n  /** Lets a host adapter provide an existing light-DOM item shell. */\n  getItemShell?: (item: LayoutNode) => HTMLElement | undefined\n  renderItem?: (context: LayoutRenderContext) => LayoutRenderHandle | void\n  /** Material registry used by the framework-neutral default renderer. */\n  materials?: MaterialRegistry | readonly MaterialDefinition[]\n  observeResize?: boolean\n  onBreakpointChange?: (id: BreakpointId) => void\n  onError?: (error: unknown) => void\n}\n\nexport interface LayoutRuntime {\n  mount(): void\n  update(document: LayoutDocument): void\n  setBreakpoint(id?: BreakpointId): void\n  getBreakpoint(): BreakpointId | undefined\n  getContainer(): HTMLElement\n  destroy(): void\n}\n\nexport function createLayoutRuntime(\n  options: LayoutRuntimeOptions\n): LayoutRuntime {\n  let document = options.document\n  let mounted = false\n  let manualBreakpoint: BreakpointId | undefined\n  let activeBreakpoint: BreakpointId | undefined\n  let observer: ResizeObserver | undefined\n  const handles = new Map<string, LayoutRenderHandle>()\n  const shells = new Map<string, HTMLElement>()\n  const ownedShells = new Set<HTMLElement>()\n  const materials = normalizeMaterialSource(options.materials)\n\n  function render(): void {\n    if (!mounted || !document) return\n    const result = validateLayoutDocument(document)\n    if (!result.valid) {\n      options.onError?.(\n        new Error(result.issues[0]?.message ?? 'Invalid layout document')\n      )\n      return\n    }\n    const breakpointId =\n      manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId\n    activeBreakpoint = breakpointId\n    const gridStyle = resolveGridStyle(document, breakpointId)\n    Object.assign(options.container.style, gridStyle)\n    const currentIds = new Set(document.items.map(item => item.id))\n    for (const [id, handle] of handles) {\n      if (currentIds.has(id)) continue\n      try {\n        handle.destroy?.()\n      } finally {\n        handles.delete(id)\n        const shell = shells.get(id)\n        if (shell && ownedShells.has(shell)) shell.remove()\n        if (shell) ownedShells.delete(shell)\n        shells.delete(id)\n      }\n    }\n    for (const item of document.items) {\n      const placement = item.layout[breakpointId]\n      let shell = shells.get(item.id)\n      if (!shell) {\n        shell = options.getItemShell?.(item)\n        if (!shell) {\n          shell = options.container.ownerDocument.createElement('div')\n          shell.className = 'ldesign-layout-item'\n          shell.dataset.layoutItemId = item.id\n          shell.dataset.layoutType = item.type\n          ownedShells.add(shell)\n          options.container.appendChild(shell)\n        }\n        shells.set(item.id, shell)\n      }\n      Object.assign(shell.style, resolveItemStyle(item, breakpointId))\n      if (!placement) continue\n      const context = { shell, item, placement, breakpointId }\n      try {\n        let handle = handles.get(item.id)\n        if (!handle) {\n          handle = options.renderItem\n            ? (options.renderItem(context) ?? {})\n            : (renderRuntimeMaterial(context, materials) ?? {})\n          handles.set(item.id, handle)\n        } else handle.update?.(context)\n      } catch (error) {\n        options.onError?.(error)\n      }\n    }\n  }\n\n  function updateBreakpoint(width: number): void {\n    if (!document || manualBreakpoint) return\n    const next = resolveBreakpoint(document, width).id\n    if (next !== activeBreakpoint) {\n      const previous = activeBreakpoint\n      activeBreakpoint = next\n      options.onBreakpointChange?.(next)\n      if (previous !== next) render()\n    }\n  }\n\n  function updateBreakpointFromContainer(): void {\n    if (!document || manualBreakpoint) return\n    const width =\n      options.container.getBoundingClientRect().width ||\n      options.container.clientWidth\n    // A hidden or detached container has no measurable width. Keep the\n    // document default until the first real resize instead of selecting the\n    // smallest breakpoint for width 0.\n    if (width > 0) updateBreakpoint(width)\n    else if (activeBreakpoint !== document.defaultBreakpointId) {\n      const previous = activeBreakpoint\n      activeBreakpoint = document.defaultBreakpointId\n      if (previous) options.onBreakpointChange?.(activeBreakpoint)\n    }\n  }\n\n  return {\n    mount() {\n      if (mounted) return\n      mounted = true\n      if (\n        options.observeResize !== false &&\n        typeof ResizeObserver !== 'undefined'\n      ) {\n        observer = new ResizeObserver(entries => {\n          const width =\n            entries[0]?.contentRect.width ?? options.container.clientWidth\n          if (width > 0) updateBreakpoint(width)\n          else updateBreakpointFromContainer()\n        })\n        observer.observe(options.container)\n      }\n      updateBreakpointFromContainer()\n      render()\n    },\n    update(next) {\n      document = next\n      render()\n    },\n    setBreakpoint(id) {\n      manualBreakpoint = id\n      if (id) activeBreakpoint = id\n      else updateBreakpointFromContainer()\n      render()\n    },\n    getBreakpoint() {\n      return activeBreakpoint\n    },\n    getContainer() {\n      return options.container\n    },\n    destroy() {\n      if (!mounted) return\n      observer?.disconnect()\n      observer = undefined\n      for (const handle of handles.values()) handle.destroy?.()\n      handles.clear()\n      for (const shell of shells.values())\n        if (ownedShells.has(shell)) shell.remove()\n      shells.clear()\n      ownedShells.clear()\n      options.container.style.removeProperty('display')\n      options.container.style.removeProperty('grid-template-columns')\n      options.container.style.removeProperty('grid-auto-rows')\n      options.container.style.removeProperty('gap')\n      options.container.style.removeProperty('direction')\n      options.container.style.removeProperty('min-height')\n      options.container.style.removeProperty('max-height')\n      mounted = false\n    },\n  }\n}\n\nexport { resolveGridStyle, resolveItemStyle }\n"],"mappings":"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"}

package/es/styles.d.ts

@@ -0,0 +1,13 @@
+import type { BreakpointId, LayoutDocument, LayoutNode } from '@composy/layout-core';
+export interface GridStyleResult {
+    display: 'grid';
+    gridTemplateColumns: string;
+    gridAutoRows: string;
+    gap: string;
+    direction: 'ltr' | 'rtl';
+    minHeight?: string;
+    maxHeight?: string;
+}
+export declare function resolveGridStyle(document: LayoutDocument, breakpointId: BreakpointId): GridStyleResult;
+export declare function resolveItemStyle(node: LayoutNode, breakpointId: BreakpointId): Record<string, string>;
+//# sourceMappingURL=styles.d.ts.map

package/es/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EAEX,MAAM,sBAAsB,CAAA;AAG7B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAA;IACf,mBAAmB,EAAE,MAAM,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,KAAK,GAAG,KAAK,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EACxB,YAAY,EAAE,YAAY,GACzB,eAAe,CAiBjB;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,UAAU,EAChB,YAAY,EAAE,YAAY,GACzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQxB"}

package/es/styles.js

@@ -0,0 +1,39 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { getBreakpoint, getEffectiveGrid } from "@composy/layout-core";
+//#region src/styles.ts
+function resolveGridStyle(document, breakpointId) {
+	const grid = getEffectiveGrid(document, breakpointId);
+	const breakpoint = getBreakpoint(document, breakpointId);
+	const style = {
+		display: "grid",
+		gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+		gridAutoRows: `${grid.rowSize}px`,
+		gap: `${grid.gap}px`,
+		direction: grid.direction
+	};
+	if (document.grid.minRows !== void 0) style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+	if (document.grid.maxRows !== void 0) style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+	if (breakpoint?.canvasWidth) style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`;
+	return style;
+}
+function resolveItemStyle(node, breakpointId) {
+	const placement = node.layout[breakpointId];
+	if (!placement) return { display: "none" };
+	return {
+		gridColumn: `${placement.x + 1} / span ${placement.w}`,
+		gridRow: `${placement.y + 1} / span ${placement.h}`,
+		display: placement.hidden ? "none" : ""
+	};
+}
+//#endregion
+export { resolveGridStyle, resolveItemStyle };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=styles.js.map

package/es/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../src/styles.ts"],"sourcesContent":["import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n} from '@composy/layout-core'\nimport { getEffectiveGrid, getBreakpoint } from '@composy/layout-core'\n\nexport interface GridStyleResult {\n  display: 'grid'\n  gridTemplateColumns: string\n  gridAutoRows: string\n  gap: string\n  direction: 'ltr' | 'rtl'\n  minHeight?: string\n  maxHeight?: string\n}\n\nexport function resolveGridStyle(\n  document: LayoutDocument,\n  breakpointId: BreakpointId\n): GridStyleResult {\n  const grid = getEffectiveGrid(document, breakpointId)\n  const breakpoint = getBreakpoint(document, breakpointId)\n  const style: GridStyleResult = {\n    display: 'grid',\n    gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,\n    gridAutoRows: `${grid.rowSize}px`,\n    gap: `${grid.gap}px`,\n    direction: grid.direction,\n  }\n  if (document.grid.minRows !== undefined)\n    style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (document.grid.maxRows !== undefined)\n    style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (breakpoint?.canvasWidth)\n    style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`\n  return style\n}\n\nexport function resolveItemStyle(\n  node: LayoutNode,\n  breakpointId: BreakpointId\n): Record<string, string> {\n  const placement = node.layout[breakpointId]\n  if (!placement) return { display: 'none' }\n  return {\n    gridColumn: `${placement.x + 1} / span ${placement.w}`,\n    gridRow: `${placement.y + 1} / span ${placement.h}`,\n    display: placement.hidden ? 'none' : '',\n  }\n}\n"],"mappings":";;;;;;;;;;;AAkBO,SAAS,iBACd,UACA,cACiB;CACjB,MAAM,OAAO,iBAAiB,UAAU,YAAY;CACpD,MAAM,aAAa,cAAc,UAAU,YAAY;CACvD,MAAM,QAAyB;EAC7B,SAAS;EACT,qBAAqB,UAAU,KAAK,QAAO;EAC3C,cAAc,GAAG,KAAK,QAAO;EAC7B,KAAK,GAAG,KAAK,IAAG;EAChB,WAAW,KAAK;CAClB;CACA,IAAI,SAAS,KAAK,YAAY,KAAA,GAC5B,MAAM,YAAY,GAAG,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,IAAG;CACnF,IAAI,SAAS,KAAK,YAAY,KAAA,GAC5B,MAAM,YAAY,GAAG,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,IAAG;CACnF,IAAI,YAAY,aACd,MAAM,sBAAsB,UAAU,KAAK,QAAO;CACpD,OAAO;AACT;AAEO,SAAS,iBACd,MACA,cACwB;CACxB,MAAM,YAAY,KAAK,OAAO;CAC9B,IAAI,CAAC,WAAW,OAAO,EAAE,SAAS,OAAO;CACzC,OAAO;EACL,YAAY,GAAG,UAAU,IAAI,EAAC,UAAW,UAAU;EACnD,SAAS,GAAG,UAAU,IAAI,EAAC,UAAW,UAAU;EAChD,SAAS,UAAU,SAAS,SAAS;CACvC;AACF"}

package/lib/index.cjs

@@ -0,0 +1,17 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_styles = require("./styles.cjs");
+const require_runtime = require("./runtime.cjs");
+exports.createLayoutRuntime = require_runtime.createLayoutRuntime;
+exports.resolveGridStyle = require_styles.resolveGridStyle;
+exports.resolveItemStyle = require_styles.resolveItemStyle;
+/*! End of @composy/layout-runtime | Powered by @composy/builder */

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './styles';
+export * from './runtime';
+//# sourceMappingURL=index.d.ts.map

package/lib/material-renderer.cjs

@@ -0,0 +1,72 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _composy_layout_core = require("@composy/layout-core");
+//#region src/material-renderer.ts
+function normalizeMaterialSource(source) {
+	if (!source) return void 0;
+	if (Array.isArray(source)) return (0, _composy_layout_core.createMaterialRegistry)(source);
+	return source;
+}
+function renderRuntimeMaterial(context, materials) {
+	const material = materials?.get(context.item.type);
+	const renderer = material?.renderers?.webcomponent ?? material?.renderers?.html;
+	if (!material || !renderer) return void 0;
+	const host = context.shell.ownerDocument;
+	let node;
+	if (renderer.tagName) node = host.createElement(renderer.tagName);
+	else if (renderer.render) {
+		const rendered = renderer.render({
+			item: context.item,
+			placement: context.placement,
+			breakpointId: context.breakpointId
+		});
+		if (rendered instanceof Node) node = rendered;
+		else if (typeof rendered === "string") {
+			const wrapper = host.createElement("div");
+			wrapper.innerHTML = sanitizeMarkup(rendered);
+			node = wrapper;
+		}
+	}
+	if (!node) return void 0;
+	const applyProps = (item) => {
+		if (!(node instanceof HTMLElement)) return;
+		for (const [key, value] of Object.entries(item.props ?? {})) {
+			try {
+				node[key] = value;
+			} catch {}
+			if (value === null || value === void 0 || typeof value === "object" || typeof value === "function") {
+				if (value !== null && value !== void 0) node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value);
+			} else node.setAttribute(key, String(value));
+		}
+	};
+	applyProps(context.item);
+	context.shell.replaceChildren(node);
+	return {
+		update(next) {
+			applyProps(next.item);
+		},
+		destroy() {
+			if (node?.parentNode === context.shell) context.shell.removeChild(node);
+		}
+	};
+}
+function toDataKey(value) {
+	return value.replace(/[^a-zA-Z0-9]/g, "");
+}
+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.normalizeMaterialSource = normalizeMaterialSource;
+exports.renderRuntimeMaterial = renderRuntimeMaterial;
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=material-renderer.cjs.map

package/lib/material-renderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-renderer.cjs","names":[],"sources":["../src/material-renderer.ts"],"sourcesContent":["import {\n  createMaterialRegistry,\n  type LayoutNode,\n  type MaterialDefinition,\n  type MaterialRegistry,\n} from '@composy/layout-core'\nimport type { LayoutRenderContext, LayoutRenderHandle } from './runtime'\n\nexport type RuntimeMaterialSource =\n  MaterialRegistry | readonly MaterialDefinition[] | undefined\n\nexport function normalizeMaterialSource(\n  source: RuntimeMaterialSource\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 renderRuntimeMaterial(\n  context: LayoutRenderContext,\n  materials: MaterialRegistry | undefined\n): LayoutRenderHandle | undefined {\n  const material = materials?.get(context.item.type)\n  const renderer =\n    material?.renderers?.webcomponent ?? material?.renderers?.html\n  if (!material || !renderer) return undefined\n\n  const host = context.shell.ownerDocument\n  let node: Node | undefined\n  if (renderer.tagName) {\n    node = host.createElement(renderer.tagName)\n  } else if (renderer.render) {\n    const rendered = renderer.render({\n      item: context.item,\n      placement: context.placement,\n      breakpointId: context.breakpointId,\n    })\n    if (rendered instanceof Node) node = rendered\n    else if (typeof rendered === 'string') {\n      const wrapper = host.createElement('div')\n      wrapper.innerHTML = sanitizeMarkup(rendered)\n      node = wrapper\n    }\n  }\n  if (!node) return undefined\n\n  const applyProps = (item: LayoutNode): void => {\n    if (!(node instanceof HTMLElement)) return\n    for (const [key, value] of Object.entries(item.props ?? {})) {\n      try {\n        ;(node as unknown as Record<string, unknown>)[key] = value\n      } catch {\n        // Some custom elements expose readonly properties. The attribute is a\n        // useful fallback for string-like values.\n      }\n      if (\n        value === null ||\n        value === undefined ||\n        typeof value === 'object' ||\n        typeof value === 'function'\n      ) {\n        if (value !== null && value !== undefined)\n          node.dataset[`prop${toDataKey(key)}`] = JSON.stringify(value)\n      } else node.setAttribute(key, String(value))\n    }\n  }\n  applyProps(context.item)\n  context.shell.replaceChildren(node)\n  return {\n    update(next) {\n      applyProps(next.item)\n    },\n    destroy() {\n      if (node?.parentNode === context.shell) context.shell.removeChild(node)\n    },\n  }\n}\n\nfunction toDataKey(value: string): string {\n  return value.replace(/[^a-zA-Z0-9]/g, '')\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":";;;;;;;;;;;;;AAWO,SAAS,wBACd,QAC8B;CAC9B,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,IAAI,MAAM,QAAQ,MAAM,GAAG,QAAA,GAAA,qBAAA,uBAAA,CAA8B,MAAM;CAC/D,OAAO;AACT;AAEO,SAAS,sBACd,SACA,WACgC;CAChC,MAAM,WAAW,WAAW,IAAI,QAAQ,KAAK,IAAI;CACjD,MAAM,WACJ,UAAU,WAAW,gBAAgB,UAAU,WAAW;CAC5D,IAAI,CAAC,YAAY,CAAC,UAAU,OAAO,KAAA;CAEnC,MAAM,OAAO,QAAQ,MAAM;CAC3B,IAAI;CACJ,IAAI,SAAS,SACX,OAAO,KAAK,cAAc,SAAS,OAAO;MAC5C,IAAW,SAAS,QAAQ;EAC1B,MAAM,WAAW,SAAS,OAAO;GAC/B,MAAM,QAAQ;GACd,WAAW,QAAQ;GACnB,cAAc,QAAQ;EACxB,CAAC;EACD,IAAI,oBAAoB,MAAM,OAAO;OAAA,IAC5B,OAAO,aAAa,UAAU;GACrC,MAAM,UAAU,KAAK,cAAc,KAAK;GACxC,QAAQ,YAAY,eAAe,QAAQ;GAC3C,OAAO;EACT;CACF;CACA,IAAI,CAAC,MAAM,OAAO,KAAA;CAElB,MAAM,cAAc,SAA2B;EAC7C,IAAI,EAAE,gBAAgB,cAAc;EACpC,KAAA,MAAW,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,SAAS,CAAC,CAAC,GAAG;GAC3D,IAAI;IACA,KAA4C,OAAO;GACvD,QAAQ,CAGR;GACA,IACE,UAAU,QACV,UAAU,KAAA,KACV,OAAO,UAAU,YACjB,OAAO,UAAU;QAEb,UAAU,QAAQ,UAAU,KAAA,GAC9B,KAAK,QAAQ,OAAO,UAAU,GAAG,OAAO,KAAK,UAAU,KAAK;GAAA,OACzD,KAAK,aAAa,KAAK,OAAO,KAAK,CAAC;EAC7C;CACF;CACA,WAAW,QAAQ,IAAI;CACvB,QAAQ,MAAM,gBAAgB,IAAI;CAClC,OAAO;EACL,OAAO,MAAM;GACX,WAAW,KAAK,IAAI;EACtB;EACA,UAAU;GACR,IAAI,MAAM,eAAe,QAAQ,OAAO,QAAQ,MAAM,YAAY,IAAI;EACxE;CACF;AACF;AAEA,SAAS,UAAU,OAAuB;CACxC,OAAO,MAAM,QAAQ,iBAAiB,EAAE;AAC1C;AAEA,SAAS,eAAe,OAAuB;CAC7C,OAAO,MACJ,QAAQ,0CAA0C,EAAE,CAAA,CACpD,QAAQ,mDAAmD,EAAE,CAAA,CAC7D,QAAQ,uDAAuD,EAAE;AACtE"}

package/lib/material-renderer.d.ts

@@ -0,0 +1,6 @@
+import { type MaterialDefinition, type MaterialRegistry } from '@composy/layout-core';
+import type { LayoutRenderContext, LayoutRenderHandle } from './runtime';
+export type RuntimeMaterialSource = MaterialRegistry | readonly MaterialDefinition[] | undefined;
+export declare function normalizeMaterialSource(source: RuntimeMaterialSource): MaterialRegistry | undefined;
+export declare function renderRuntimeMaterial(context: LayoutRenderContext, materials: MaterialRegistry | undefined): LayoutRenderHandle | undefined;
+//# sourceMappingURL=material-renderer.d.ts.map

package/lib/package.json

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

package/lib/runtime.cjs

@@ -0,0 +1,160 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_styles = require("./styles.cjs");
+const require_material_renderer = require("./material-renderer.cjs");
+let _composy_layout_core = require("@composy/layout-core");
+//#region src/runtime.ts
+function createLayoutRuntime(options) {
+	let document = options.document;
+	let mounted = false;
+	let manualBreakpoint;
+	let activeBreakpoint;
+	let observer;
+	const handles = /* @__PURE__ */ new Map();
+	const shells = /* @__PURE__ */ new Map();
+	const ownedShells = /* @__PURE__ */ new Set();
+	const materials = require_material_renderer.normalizeMaterialSource(options.materials);
+	function render() {
+		if (!mounted || !document) return;
+		const result = (0, _composy_layout_core.validateLayoutDocument)(document);
+		if (!result.valid) {
+			options.onError?.(new Error(result.issues[0]?.message ?? "Invalid layout document"));
+			return;
+		}
+		const breakpointId = manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId;
+		activeBreakpoint = breakpointId;
+		const gridStyle = require_styles.resolveGridStyle(document, breakpointId);
+		Object.assign(options.container.style, gridStyle);
+		const currentIds = new Set(document.items.map((item) => item.id));
+		for (const [id, handle] of handles) {
+			if (currentIds.has(id)) continue;
+			try {
+				handle.destroy?.();
+			} finally {
+				handles.delete(id);
+				const shell = shells.get(id);
+				if (shell && ownedShells.has(shell)) shell.remove();
+				if (shell) ownedShells.delete(shell);
+				shells.delete(id);
+			}
+		}
+		for (const item of document.items) {
+			const placement = item.layout[breakpointId];
+			let shell = shells.get(item.id);
+			if (!shell) {
+				shell = options.getItemShell?.(item);
+				if (!shell) {
+					shell = options.container.ownerDocument.createElement("div");
+					shell.className = "ldesign-layout-item";
+					shell.dataset.layoutItemId = item.id;
+					shell.dataset.layoutType = item.type;
+					ownedShells.add(shell);
+					options.container.appendChild(shell);
+				}
+				shells.set(item.id, shell);
+			}
+			Object.assign(shell.style, require_styles.resolveItemStyle(item, breakpointId));
+			if (!placement) continue;
+			const context = {
+				shell,
+				item,
+				placement,
+				breakpointId
+			};
+			try {
+				let handle = handles.get(item.id);
+				if (!handle) {
+					handle = options.renderItem ? options.renderItem(context) ?? {} : require_material_renderer.renderRuntimeMaterial(context, materials) ?? {};
+					handles.set(item.id, handle);
+				} else handle.update?.(context);
+			} catch (error) {
+				options.onError?.(error);
+			}
+		}
+	}
+	function updateBreakpoint(width) {
+		if (!document || manualBreakpoint) return;
+		const next = (0, _composy_layout_core.resolveBreakpoint)(document, width).id;
+		if (next !== activeBreakpoint) {
+			const previous = activeBreakpoint;
+			activeBreakpoint = next;
+			options.onBreakpointChange?.(next);
+			if (previous !== next) render();
+		}
+	}
+	function updateBreakpointFromContainer() {
+		if (!document || manualBreakpoint) return;
+		const width = options.container.getBoundingClientRect().width || options.container.clientWidth;
+		if (width > 0) updateBreakpoint(width);
+		else if (activeBreakpoint !== document.defaultBreakpointId) {
+			const previous = activeBreakpoint;
+			activeBreakpoint = document.defaultBreakpointId;
+			if (previous) options.onBreakpointChange?.(activeBreakpoint);
+		}
+	}
+	return {
+		mount() {
+			if (mounted) return;
+			mounted = true;
+			if (options.observeResize !== false && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver((entries) => {
+					const width = entries[0]?.contentRect.width ?? options.container.clientWidth;
+					if (width > 0) updateBreakpoint(width);
+					else updateBreakpointFromContainer();
+				});
+				observer.observe(options.container);
+			}
+			updateBreakpointFromContainer();
+			render();
+		},
+		update(next) {
+			document = next;
+			render();
+		},
+		setBreakpoint(id) {
+			manualBreakpoint = id;
+			if (id) activeBreakpoint = id;
+			else updateBreakpointFromContainer();
+			render();
+		},
+		getBreakpoint() {
+			return activeBreakpoint;
+		},
+		getContainer() {
+			return options.container;
+		},
+		destroy() {
+			if (!mounted) return;
+			observer?.disconnect();
+			observer = void 0;
+			for (const handle of handles.values()) handle.destroy?.();
+			handles.clear();
+			for (const shell of shells.values()) if (ownedShells.has(shell)) shell.remove();
+			shells.clear();
+			ownedShells.clear();
+			options.container.style.removeProperty("display");
+			options.container.style.removeProperty("grid-template-columns");
+			options.container.style.removeProperty("grid-auto-rows");
+			options.container.style.removeProperty("gap");
+			options.container.style.removeProperty("direction");
+			options.container.style.removeProperty("min-height");
+			options.container.style.removeProperty("max-height");
+			mounted = false;
+		}
+	};
+}
+//#endregion
+exports.createLayoutRuntime = createLayoutRuntime;
+exports.resolveGridStyle = require_styles.resolveGridStyle;
+exports.resolveItemStyle = require_styles.resolveItemStyle;
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=runtime.cjs.map

package/lib/runtime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.cjs","names":[],"sources":["../src/runtime.ts"],"sourcesContent":["import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n  MaterialDefinition,\n  MaterialRegistry,\n} from '@composy/layout-core'\nimport { resolveBreakpoint, validateLayoutDocument } from '@composy/layout-core'\nimport { resolveGridStyle, resolveItemStyle } from './styles'\nimport {\n  normalizeMaterialSource,\n  renderRuntimeMaterial,\n} from './material-renderer'\n\nexport interface LayoutRenderContext {\n  shell: HTMLElement\n  item: LayoutNode\n  placement: LayoutPlacement\n  breakpointId: BreakpointId\n}\nexport interface LayoutRenderHandle {\n  update?(context: LayoutRenderContext): void\n  destroy?(): void\n}\nexport interface LayoutRuntimeOptions {\n  container: HTMLElement\n  document?: LayoutDocument\n  /** Lets a host adapter provide an existing light-DOM item shell. */\n  getItemShell?: (item: LayoutNode) => HTMLElement | undefined\n  renderItem?: (context: LayoutRenderContext) => LayoutRenderHandle | void\n  /** Material registry used by the framework-neutral default renderer. */\n  materials?: MaterialRegistry | readonly MaterialDefinition[]\n  observeResize?: boolean\n  onBreakpointChange?: (id: BreakpointId) => void\n  onError?: (error: unknown) => void\n}\n\nexport interface LayoutRuntime {\n  mount(): void\n  update(document: LayoutDocument): void\n  setBreakpoint(id?: BreakpointId): void\n  getBreakpoint(): BreakpointId | undefined\n  getContainer(): HTMLElement\n  destroy(): void\n}\n\nexport function createLayoutRuntime(\n  options: LayoutRuntimeOptions\n): LayoutRuntime {\n  let document = options.document\n  let mounted = false\n  let manualBreakpoint: BreakpointId | undefined\n  let activeBreakpoint: BreakpointId | undefined\n  let observer: ResizeObserver | undefined\n  const handles = new Map<string, LayoutRenderHandle>()\n  const shells = new Map<string, HTMLElement>()\n  const ownedShells = new Set<HTMLElement>()\n  const materials = normalizeMaterialSource(options.materials)\n\n  function render(): void {\n    if (!mounted || !document) return\n    const result = validateLayoutDocument(document)\n    if (!result.valid) {\n      options.onError?.(\n        new Error(result.issues[0]?.message ?? 'Invalid layout document')\n      )\n      return\n    }\n    const breakpointId =\n      manualBreakpoint ?? activeBreakpoint ?? document.defaultBreakpointId\n    activeBreakpoint = breakpointId\n    const gridStyle = resolveGridStyle(document, breakpointId)\n    Object.assign(options.container.style, gridStyle)\n    const currentIds = new Set(document.items.map(item => item.id))\n    for (const [id, handle] of handles) {\n      if (currentIds.has(id)) continue\n      try {\n        handle.destroy?.()\n      } finally {\n        handles.delete(id)\n        const shell = shells.get(id)\n        if (shell && ownedShells.has(shell)) shell.remove()\n        if (shell) ownedShells.delete(shell)\n        shells.delete(id)\n      }\n    }\n    for (const item of document.items) {\n      const placement = item.layout[breakpointId]\n      let shell = shells.get(item.id)\n      if (!shell) {\n        shell = options.getItemShell?.(item)\n        if (!shell) {\n          shell = options.container.ownerDocument.createElement('div')\n          shell.className = 'ldesign-layout-item'\n          shell.dataset.layoutItemId = item.id\n          shell.dataset.layoutType = item.type\n          ownedShells.add(shell)\n          options.container.appendChild(shell)\n        }\n        shells.set(item.id, shell)\n      }\n      Object.assign(shell.style, resolveItemStyle(item, breakpointId))\n      if (!placement) continue\n      const context = { shell, item, placement, breakpointId }\n      try {\n        let handle = handles.get(item.id)\n        if (!handle) {\n          handle = options.renderItem\n            ? (options.renderItem(context) ?? {})\n            : (renderRuntimeMaterial(context, materials) ?? {})\n          handles.set(item.id, handle)\n        } else handle.update?.(context)\n      } catch (error) {\n        options.onError?.(error)\n      }\n    }\n  }\n\n  function updateBreakpoint(width: number): void {\n    if (!document || manualBreakpoint) return\n    const next = resolveBreakpoint(document, width).id\n    if (next !== activeBreakpoint) {\n      const previous = activeBreakpoint\n      activeBreakpoint = next\n      options.onBreakpointChange?.(next)\n      if (previous !== next) render()\n    }\n  }\n\n  function updateBreakpointFromContainer(): void {\n    if (!document || manualBreakpoint) return\n    const width =\n      options.container.getBoundingClientRect().width ||\n      options.container.clientWidth\n    // A hidden or detached container has no measurable width. Keep the\n    // document default until the first real resize instead of selecting the\n    // smallest breakpoint for width 0.\n    if (width > 0) updateBreakpoint(width)\n    else if (activeBreakpoint !== document.defaultBreakpointId) {\n      const previous = activeBreakpoint\n      activeBreakpoint = document.defaultBreakpointId\n      if (previous) options.onBreakpointChange?.(activeBreakpoint)\n    }\n  }\n\n  return {\n    mount() {\n      if (mounted) return\n      mounted = true\n      if (\n        options.observeResize !== false &&\n        typeof ResizeObserver !== 'undefined'\n      ) {\n        observer = new ResizeObserver(entries => {\n          const width =\n            entries[0]?.contentRect.width ?? options.container.clientWidth\n          if (width > 0) updateBreakpoint(width)\n          else updateBreakpointFromContainer()\n        })\n        observer.observe(options.container)\n      }\n      updateBreakpointFromContainer()\n      render()\n    },\n    update(next) {\n      document = next\n      render()\n    },\n    setBreakpoint(id) {\n      manualBreakpoint = id\n      if (id) activeBreakpoint = id\n      else updateBreakpointFromContainer()\n      render()\n    },\n    getBreakpoint() {\n      return activeBreakpoint\n    },\n    getContainer() {\n      return options.container\n    },\n    destroy() {\n      if (!mounted) return\n      observer?.disconnect()\n      observer = undefined\n      for (const handle of handles.values()) handle.destroy?.()\n      handles.clear()\n      for (const shell of shells.values())\n        if (ownedShells.has(shell)) shell.remove()\n      shells.clear()\n      ownedShells.clear()\n      options.container.style.removeProperty('display')\n      options.container.style.removeProperty('grid-template-columns')\n      options.container.style.removeProperty('grid-auto-rows')\n      options.container.style.removeProperty('gap')\n      options.container.style.removeProperty('direction')\n      options.container.style.removeProperty('min-height')\n      options.container.style.removeProperty('max-height')\n      mounted = false\n    },\n  }\n}\n\nexport { resolveGridStyle, resolveItemStyle }\n"],"mappings":"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"}

package/lib/runtime.d.ts

@@ -0,0 +1,35 @@
+import type { BreakpointId, LayoutDocument, LayoutNode, LayoutPlacement, MaterialDefinition, MaterialRegistry } from '@composy/layout-core';
+import { resolveGridStyle, resolveItemStyle } from './styles';
+export interface LayoutRenderContext {
+    shell: HTMLElement;
+    item: LayoutNode;
+    placement: LayoutPlacement;
+    breakpointId: BreakpointId;
+}
+export interface LayoutRenderHandle {
+    update?(context: LayoutRenderContext): void;
+    destroy?(): void;
+}
+export interface LayoutRuntimeOptions {
+    container: HTMLElement;
+    document?: LayoutDocument;
+    /** Lets a host adapter provide an existing light-DOM item shell. */
+    getItemShell?: (item: LayoutNode) => HTMLElement | undefined;
+    renderItem?: (context: LayoutRenderContext) => LayoutRenderHandle | void;
+    /** Material registry used by the framework-neutral default renderer. */
+    materials?: MaterialRegistry | readonly MaterialDefinition[];
+    observeResize?: boolean;
+    onBreakpointChange?: (id: BreakpointId) => void;
+    onError?: (error: unknown) => void;
+}
+export interface LayoutRuntime {
+    mount(): void;
+    update(document: LayoutDocument): void;
+    setBreakpoint(id?: BreakpointId): void;
+    getBreakpoint(): BreakpointId | undefined;
+    getContainer(): HTMLElement;
+    destroy(): void;
+}
+export declare function createLayoutRuntime(options: LayoutRuntimeOptions): LayoutRuntime;
+export { resolveGridStyle, resolveItemStyle };
+//# sourceMappingURL=runtime.d.ts.map

package/lib/styles.cjs

@@ -0,0 +1,42 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _composy_layout_core = require("@composy/layout-core");
+//#region src/styles.ts
+function resolveGridStyle(document, breakpointId) {
+	const grid = (0, _composy_layout_core.getEffectiveGrid)(document, breakpointId);
+	const breakpoint = (0, _composy_layout_core.getBreakpoint)(document, breakpointId);
+	const style = {
+		display: "grid",
+		gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+		gridAutoRows: `${grid.rowSize}px`,
+		gap: `${grid.gap}px`,
+		direction: grid.direction
+	};
+	if (document.grid.minRows !== void 0) style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+	if (document.grid.maxRows !== void 0) style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`;
+	if (breakpoint?.canvasWidth) style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`;
+	return style;
+}
+function resolveItemStyle(node, breakpointId) {
+	const placement = node.layout[breakpointId];
+	if (!placement) return { display: "none" };
+	return {
+		gridColumn: `${placement.x + 1} / span ${placement.w}`,
+		gridRow: `${placement.y + 1} / span ${placement.h}`,
+		display: placement.hidden ? "none" : ""
+	};
+}
+//#endregion
+exports.resolveGridStyle = resolveGridStyle;
+exports.resolveItemStyle = resolveItemStyle;
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=styles.cjs.map

package/lib/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs","names":[],"sources":["../src/styles.ts"],"sourcesContent":["import type {\n  BreakpointId,\n  LayoutDocument,\n  LayoutNode,\n  LayoutPlacement,\n} from '@composy/layout-core'\nimport { getEffectiveGrid, getBreakpoint } from '@composy/layout-core'\n\nexport interface GridStyleResult {\n  display: 'grid'\n  gridTemplateColumns: string\n  gridAutoRows: string\n  gap: string\n  direction: 'ltr' | 'rtl'\n  minHeight?: string\n  maxHeight?: string\n}\n\nexport function resolveGridStyle(\n  document: LayoutDocument,\n  breakpointId: BreakpointId\n): GridStyleResult {\n  const grid = getEffectiveGrid(document, breakpointId)\n  const breakpoint = getBreakpoint(document, breakpointId)\n  const style: GridStyleResult = {\n    display: 'grid',\n    gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,\n    gridAutoRows: `${grid.rowSize}px`,\n    gap: `${grid.gap}px`,\n    direction: grid.direction,\n  }\n  if (document.grid.minRows !== undefined)\n    style.minHeight = `${document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (document.grid.maxRows !== undefined)\n    style.maxHeight = `${document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap}px`\n  if (breakpoint?.canvasWidth)\n    style.gridTemplateColumns = `repeat(${grid.columns}, minmax(0, 1fr))`\n  return style\n}\n\nexport function resolveItemStyle(\n  node: LayoutNode,\n  breakpointId: BreakpointId\n): Record<string, string> {\n  const placement = node.layout[breakpointId]\n  if (!placement) return { display: 'none' }\n  return {\n    gridColumn: `${placement.x + 1} / span ${placement.w}`,\n    gridRow: `${placement.y + 1} / span ${placement.h}`,\n    display: placement.hidden ? 'none' : '',\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAkBO,SAAS,iBACd,UACA,cACiB;CACjB,MAAM,QAAA,GAAA,qBAAA,iBAAA,CAAwB,UAAU,YAAY;CACpD,MAAM,cAAA,GAAA,qBAAA,cAAA,CAA2B,UAAU,YAAY;CACvD,MAAM,QAAyB;EAC7B,SAAS;EACT,qBAAqB,UAAU,KAAK,QAAO;EAC3C,cAAc,GAAG,KAAK,QAAO;EAC7B,KAAK,GAAG,KAAK,IAAG;EAChB,WAAW,KAAK;CAClB;CACA,IAAI,SAAS,KAAK,YAAY,KAAA,GAC5B,MAAM,YAAY,GAAG,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,IAAG;CACnF,IAAI,SAAS,KAAK,YAAY,KAAA,GAC5B,MAAM,YAAY,GAAG,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,IAAG;CACnF,IAAI,YAAY,aACd,MAAM,sBAAsB,UAAU,KAAK,QAAO;CACpD,OAAO;AACT;AAEO,SAAS,iBACd,MACA,cACwB;CACxB,MAAM,YAAY,KAAK,OAAO;CAC9B,IAAI,CAAC,WAAW,OAAO,EAAE,SAAS,OAAO;CACzC,OAAO;EACL,YAAY,GAAG,UAAU,IAAI,EAAC,UAAW,UAAU;EACnD,SAAS,GAAG,UAAU,IAAI,EAAC,UAAW,UAAU;EAChD,SAAS,UAAU,SAAS,SAAS;CACvC;AACF"}

package/lib/styles.d.ts

@@ -0,0 +1,13 @@
+import type { BreakpointId, LayoutDocument, LayoutNode } from '@composy/layout-core';
+export interface GridStyleResult {
+    display: 'grid';
+    gridTemplateColumns: string;
+    gridAutoRows: string;
+    gap: string;
+    direction: 'ltr' | 'rtl';
+    minHeight?: string;
+    maxHeight?: string;
+}
+export declare function resolveGridStyle(document: LayoutDocument, breakpointId: BreakpointId): GridStyleResult;
+export declare function resolveItemStyle(node: LayoutNode, breakpointId: BreakpointId): Record<string, string>;
+//# sourceMappingURL=styles.d.ts.map

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@composy/layout-runtime",
+  "version": "0.0.1",
+  "description": "DOM-free CSS Grid style resolvers and runtime for LDesign Layout",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./es/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "unpkg": "./dist/index.min.js",
+  "jsdelivr": "./dist/index.min.js",
+  "files": [
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "es",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "ldesign-builder build",
+    "type-check": "tsc --noEmit",
+    "test:run": "ltesting run:unit"
+  },
+  "dependencies": {
+    "@composy/layout-core": "^0.0.1"
+  },
+  "devDependencies": {
+    "@composy/builder": "^0.0.1",
+    "@composy/testing": "^0.0.1",
+    "@composy/layout-shared-test": "^0.0.1",
+    "typescript": "5.9.3",
+    "vitest": "4.1.10"
+  },
+  "publishConfig": {
+    "registry": "http://npm.longrise.cn:6286/"
+  },
+  "typings": "./es/index.d.ts",
+  "browser": "./dist/index.js"
+}