@composy/layout-runtime 0.0.1 → 0.0.2

package/esm/material-renderer.js

@@ -0,0 +1,102 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-10-12 17:44:18 *
+* 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 (isDomNode(rendered)) node = rendered;
+		else if (typeof rendered === "string") {
+			const wrapper = host.createElement("div");
+			wrapper.innerHTML = sanitizeMarkup(host, rendered);
+			node = wrapper;
+		}
+	}
+	if (!node) return void 0;
+	const appliedProps = /* @__PURE__ */ new Set();
+	const applyProps = (item) => {
+		if (!isElement(node, host)) return;
+		const nextProps = item.props ?? {};
+		for (const key of appliedProps) {
+			if (key in nextProps) continue;
+			node.removeAttribute(key);
+			delete node.dataset[`prop${toDataKey(key)}`];
+			appliedProps.delete(key);
+		}
+		for (const [key, value] of Object.entries(nextProps)) {
+			appliedProps.add(key);
+			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 isDomNode(value) {
+	return Boolean(value && typeof value === "object" && "nodeType" in value && typeof value.cloneNode === "function");
+}
+function isElement(value, document) {
+	if (!value || value.nodeType !== 1) return false;
+	const ElementConstructor = document.defaultView?.HTMLElement;
+	return ElementConstructor ? value instanceof ElementConstructor : typeof value.setAttribute === "function";
+}
+function sanitizeMarkup(document, value) {
+	const template = document.createElement("template");
+	template.innerHTML = value;
+	template.content.querySelectorAll("script,style,iframe,object,embed,foreignObject").forEach((node) => node.remove());
+	template.content.querySelectorAll("*").forEach((element) => {
+		for (const attribute of Array.from(element.attributes)) {
+			const name = attribute.name.toLowerCase();
+			const content = attribute.value.trim().toLowerCase();
+			if (name.startsWith("on") || [
+				"href",
+				"src",
+				"xlink:href",
+				"formaction",
+				"srcdoc"
+			].includes(name) && /^(?:javascript:|data:text\/html)/i.test(content)) element.removeAttribute(attribute.name);
+		}
+	});
+	return template.innerHTML;
+}
+//#endregion
+export { normalizeMaterialSource, renderRuntimeMaterial };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=material-renderer.js.map

package/esm/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 (isDomNode(rendered)) node = rendered\n    else if (typeof rendered === 'string') {\n      const wrapper = host.createElement('div')\n      wrapper.innerHTML = sanitizeMarkup(host, rendered)\n      node = wrapper\n    }\n  }\n  if (!node) return undefined\n\n  const appliedProps = new Set<string>()\n  const applyProps = (item: LayoutNode): void => {\n    if (!isElement(node, host)) return\n    const nextProps = item.props ?? {}\n    for (const key of appliedProps) {\n      if (key in nextProps) continue\n      node.removeAttribute(key)\n      delete node.dataset[`prop${toDataKey(key)}`]\n      appliedProps.delete(key)\n    }\n    for (const [key, value] of Object.entries(nextProps)) {\n      appliedProps.add(key)\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 isDomNode(value: unknown): value is Node {\n  return Boolean(\n    value &&\n    typeof value === 'object' &&\n    'nodeType' in value &&\n    typeof (value as { cloneNode?: unknown }).cloneNode === 'function'\n  )\n}\n\nfunction isElement(\n  value: Node | undefined,\n  document: Document\n): value is HTMLElement {\n  if (!value || value.nodeType !== 1) return false\n  const ElementConstructor = document.defaultView?.HTMLElement\n  return ElementConstructor\n    ? value instanceof ElementConstructor\n    : typeof (value as Element).setAttribute === 'function'\n}\n\nfunction sanitizeMarkup(document: Document, value: string): string {\n  const template = document.createElement('template')\n  template.innerHTML = value\n  template.content\n    .querySelectorAll('script,style,iframe,object,embed,foreignObject')\n    .forEach(node => node.remove())\n  template.content.querySelectorAll<HTMLElement>('*').forEach(element => {\n    for (const attribute of Array.from(element.attributes)) {\n      const name = attribute.name.toLowerCase()\n      const content = attribute.value.trim().toLowerCase()\n      if (\n        name.startsWith('on') ||\n        (['href', 'src', 'xlink:href', 'formaction', 'srcdoc'].includes(name) &&\n          /^(?:javascript:|data:text\\/html)/i.test(content))\n      )\n        element.removeAttribute(attribute.name)\n    }\n  })\n  return template.innerHTML\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,UAAU,QAAQ,GAAG,OAAO;OAAA,IACvB,OAAO,aAAa,UAAU;GACrC,MAAM,UAAU,KAAK,cAAc,KAAK;GACxC,QAAQ,YAAY,eAAe,MAAM,QAAQ;GACjD,OAAO;EACT;CACF;CACA,IAAI,CAAC,MAAM,OAAO,KAAA;CAElB,MAAM,+BAAe,IAAI,IAAY;CACrC,MAAM,cAAc,SAA2B;EAC7C,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG;EAC5B,MAAM,YAAY,KAAK,SAAS,CAAC;EACjC,KAAA,MAAW,OAAO,cAAc;GAC9B,IAAI,OAAO,WAAW;GACtB,KAAK,gBAAgB,GAAG;GACxB,OAAO,KAAK,QAAQ,OAAO,UAAU,GAAG;GACxC,aAAa,OAAO,GAAG;EACzB;EACA,KAAA,MAAW,CAAC,KAAK,UAAU,OAAO,QAAQ,SAAS,GAAG;GACpD,aAAa,IAAI,GAAG;GACpB,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,UAAU,OAA+B;CAChD,OAAO,QACL,SACA,OAAO,UAAU,YACjB,cAAc,SACd,OAAQ,MAAkC,cAAc,UAC1D;AACF;AAEA,SAAS,UACP,OACA,UACsB;CACtB,IAAI,CAAC,SAAS,MAAM,aAAa,GAAG,OAAO;CAC3C,MAAM,qBAAqB,SAAS,aAAa;CACjD,OAAO,qBACH,iBAAiB,qBACjB,OAAQ,MAAkB,iBAAiB;AACjD;AAEA,SAAS,eAAe,UAAoB,OAAuB;CACjE,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,YAAY;CACrB,SAAS,QACN,iBAAiB,gDAAgD,CAAA,CACjE,SAAQ,SAAQ,KAAK,OAAO,CAAC;CAChC,SAAS,QAAQ,iBAA8B,GAAG,CAAA,CAAE,SAAQ,YAAW;EACrE,KAAA,MAAW,aAAa,MAAM,KAAK,QAAQ,UAAU,GAAG;GACtD,MAAM,OAAO,UAAU,KAAK,YAAY;GACxC,MAAM,UAAU,UAAU,MAAM,KAAK,CAAA,CAAE,YAAY;GACnD,IACE,KAAK,WAAW,IAAI,KACnB;IAAC;IAAQ;IAAO;IAAc;IAAc;GAAQ,CAAA,CAAE,SAAS,IAAI,KAClE,oCAAoC,KAAK,OAAO,GAElD,QAAQ,gBAAgB,UAAU,IAAI;EAC1C;CACF,CAAC;CACD,OAAO,SAAS;AAClB"}

package/esm/runtime.js

@@ -0,0 +1,171 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-10-12 17:44:18 *
+* 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;
+			disposeHandle(id, handle);
+			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) {
+				const handle = handles.get(item.id);
+				if (handle) disposeHandle(item.id, handle);
+				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 disposeHandle(id, handle = handles.get(id)) {
+		if (!handle) return;
+		handles.delete(id);
+		try {
+			handle.destroy?.();
+		} 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) {
+			if (id && document && !document.breakpoints.some((bp) => bp.id === id)) {
+				options.onError?.(/* @__PURE__ */ new Error(`Unknown breakpoint ${id}.`));
+				return;
+			}
+			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 [id, handle] of handles) disposeHandle(id, handle);
+			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");
+			manualBreakpoint = void 0;
+			activeBreakpoint = void 0;
+			mounted = false;
+		}
+	};
+}
+//#endregion
+export { createLayoutRuntime, resolveGridStyle, resolveItemStyle };
+/*! End of @composy/layout-runtime | Powered by @composy/builder */
+//# sourceMappingURL=runtime.js.map

package/esm/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      disposeHandle(id, handle)\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    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) {\n        const handle = handles.get(item.id)\n        if (handle) disposeHandle(item.id, handle)\n        continue\n      }\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 disposeHandle(id: string, handle = handles.get(id)): void {\n    if (!handle) return\n    handles.delete(id)\n    try {\n      handle.destroy?.()\n    } catch (error) {\n      options.onError?.(error)\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      if (id && document && !document.breakpoints.some(bp => bp.id === id)) {\n        options.onError?.(new Error(`Unknown breakpoint ${id}.`))\n        return\n      }\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 [id, handle] of handles) disposeHandle(id, handle)\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      manualBreakpoint = undefined\n      activeBreakpoint = undefined\n      mounted = false\n    },\n  }\n}\n\nexport { resolveGridStyle, resolveItemStyle }\n"],"mappings":"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"}

package/esm/styles.js

@@ -0,0 +1,39 @@
+/*!
+* ***********************************
+* @composy/layout-runtime v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-10-12 17:44:18 *
+* 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 = `${Math.max(0, document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap)}px`;
+	if (document.grid.maxRows !== void 0) style.maxHeight = `${Math.max(0, 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/esm/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 = `${Math.max(\n      0,\n      document.grid.minRows * (grid.rowSize + grid.gap) - grid.gap\n    )}px`\n  if (document.grid.maxRows !== undefined)\n    style.maxHeight = `${Math.max(\n      0,\n      document.grid.maxRows * (grid.rowSize + grid.gap) - grid.gap\n    )}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,KAAK,IACxB,GACA,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,GAC3D,EAAC;CACH,IAAI,SAAS,KAAK,YAAY,KAAA,GAC5B,MAAM,YAAY,GAAG,KAAK,IACxB,GACA,SAAS,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,KAAK,GAC3D,EAAC;CACH,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

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-runtime v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:18 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/lib/{index.d.ts → index.d.cts}

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

package/lib/material-renderer.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-runtime v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:18 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -29,17 +29,26 @@ function renderRuntimeMaterial(context, materials) {
 			placement: context.placement,
 			breakpointId: context.breakpointId
 		});
-		if (rendered instanceof Node) node = rendered;
+		if (isDomNode(rendered)) node = rendered;
 		else if (typeof rendered === "string") {
 			const wrapper = host.createElement("div");
-			wrapper.innerHTML = sanitizeMarkup(rendered);
+			wrapper.innerHTML = sanitizeMarkup(host, rendered);
 			node = wrapper;
 		}
 	}
 	if (!node) return void 0;
+	const appliedProps = /* @__PURE__ */ new Set();
 	const applyProps = (item) => {
-		if (!(node instanceof HTMLElement)) return;
-		for (const [key, value] of Object.entries(item.props ?? {})) {
+		if (!isElement(node, host)) return;
+		const nextProps = item.props ?? {};
+		for (const key of appliedProps) {
+			if (key in nextProps) continue;
+			node.removeAttribute(key);
+			delete node.dataset[`prop${toDataKey(key)}`];
+			appliedProps.delete(key);
+		}
+		for (const [key, value] of Object.entries(nextProps)) {
+			appliedProps.add(key);
 			try {
 				node[key] = value;
 			} catch {}
@@ -62,8 +71,32 @@ function renderRuntimeMaterial(context, materials) {
 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 isDomNode(value) {
+	return Boolean(value && typeof value === "object" && "nodeType" in value && typeof value.cloneNode === "function");
+}
+function isElement(value, document) {
+	if (!value || value.nodeType !== 1) return false;
+	const ElementConstructor = document.defaultView?.HTMLElement;
+	return ElementConstructor ? value instanceof ElementConstructor : typeof value.setAttribute === "function";
+}
+function sanitizeMarkup(document, value) {
+	const template = document.createElement("template");
+	template.innerHTML = value;
+	template.content.querySelectorAll("script,style,iframe,object,embed,foreignObject").forEach((node) => node.remove());
+	template.content.querySelectorAll("*").forEach((element) => {
+		for (const attribute of Array.from(element.attributes)) {
+			const name = attribute.name.toLowerCase();
+			const content = attribute.value.trim().toLowerCase();
+			if (name.startsWith("on") || [
+				"href",
+				"src",
+				"xlink:href",
+				"formaction",
+				"srcdoc"
+			].includes(name) && /^(?:javascript:|data:text\/html)/i.test(content)) element.removeAttribute(attribute.name);
+		}
+	});
+	return template.innerHTML;
 }
 //#endregion
 exports.normalizeMaterialSource = normalizeMaterialSource;

package/lib/material-renderer.cjs.map

@@ -1 +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"}
+{"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 (isDomNode(rendered)) node = rendered\n    else if (typeof rendered === 'string') {\n      const wrapper = host.createElement('div')\n      wrapper.innerHTML = sanitizeMarkup(host, rendered)\n      node = wrapper\n    }\n  }\n  if (!node) return undefined\n\n  const appliedProps = new Set<string>()\n  const applyProps = (item: LayoutNode): void => {\n    if (!isElement(node, host)) return\n    const nextProps = item.props ?? {}\n    for (const key of appliedProps) {\n      if (key in nextProps) continue\n      node.removeAttribute(key)\n      delete node.dataset[`prop${toDataKey(key)}`]\n      appliedProps.delete(key)\n    }\n    for (const [key, value] of Object.entries(nextProps)) {\n      appliedProps.add(key)\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 isDomNode(value: unknown): value is Node {\n  return Boolean(\n    value &&\n    typeof value === 'object' &&\n    'nodeType' in value &&\n    typeof (value as { cloneNode?: unknown }).cloneNode === 'function'\n  )\n}\n\nfunction isElement(\n  value: Node | undefined,\n  document: Document\n): value is HTMLElement {\n  if (!value || value.nodeType !== 1) return false\n  const ElementConstructor = document.defaultView?.HTMLElement\n  return ElementConstructor\n    ? value instanceof ElementConstructor\n    : typeof (value as Element).setAttribute === 'function'\n}\n\nfunction sanitizeMarkup(document: Document, value: string): string {\n  const template = document.createElement('template')\n  template.innerHTML = value\n  template.content\n    .querySelectorAll('script,style,iframe,object,embed,foreignObject')\n    .forEach(node => node.remove())\n  template.content.querySelectorAll<HTMLElement>('*').forEach(element => {\n    for (const attribute of Array.from(element.attributes)) {\n      const name = attribute.name.toLowerCase()\n      const content = attribute.value.trim().toLowerCase()\n      if (\n        name.startsWith('on') ||\n        (['href', 'src', 'xlink:href', 'formaction', 'srcdoc'].includes(name) &&\n          /^(?:javascript:|data:text\\/html)/i.test(content))\n      )\n        element.removeAttribute(attribute.name)\n    }\n  })\n  return template.innerHTML\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,UAAU,QAAQ,GAAG,OAAO;OAAA,IACvB,OAAO,aAAa,UAAU;GACrC,MAAM,UAAU,KAAK,cAAc,KAAK;GACxC,QAAQ,YAAY,eAAe,MAAM,QAAQ;GACjD,OAAO;EACT;CACF;CACA,IAAI,CAAC,MAAM,OAAO,KAAA;CAElB,MAAM,+BAAe,IAAI,IAAY;CACrC,MAAM,cAAc,SAA2B;EAC7C,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG;EAC5B,MAAM,YAAY,KAAK,SAAS,CAAC;EACjC,KAAA,MAAW,OAAO,cAAc;GAC9B,IAAI,OAAO,WAAW;GACtB,KAAK,gBAAgB,GAAG;GACxB,OAAO,KAAK,QAAQ,OAAO,UAAU,GAAG;GACxC,aAAa,OAAO,GAAG;EACzB;EACA,KAAA,MAAW,CAAC,KAAK,UAAU,OAAO,QAAQ,SAAS,GAAG;GACpD,aAAa,IAAI,GAAG;GACpB,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,UAAU,OAA+B;CAChD,OAAO,QACL,SACA,OAAO,UAAU,YACjB,cAAc,SACd,OAAQ,MAAkC,cAAc,UAC1D;AACF;AAEA,SAAS,UACP,OACA,UACsB;CACtB,IAAI,CAAC,SAAS,MAAM,aAAa,GAAG,OAAO;CAC3C,MAAM,qBAAqB,SAAS,aAAa;CACjD,OAAO,qBACH,iBAAiB,qBACjB,OAAQ,MAAkB,iBAAiB;AACjD;AAEA,SAAS,eAAe,UAAoB,OAAuB;CACjE,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,YAAY;CACrB,SAAS,QACN,iBAAiB,gDAAgD,CAAA,CACjE,SAAQ,SAAQ,KAAK,OAAO,CAAC;CAChC,SAAS,QAAQ,iBAA8B,GAAG,CAAA,CAAE,SAAQ,YAAW;EACrE,KAAA,MAAW,aAAa,MAAM,KAAK,QAAQ,UAAU,GAAG;GACtD,MAAM,OAAO,UAAU,KAAK,YAAY;GACxC,MAAM,UAAU,UAAU,MAAM,KAAK,CAAA,CAAE,YAAY;GACnD,IACE,KAAK,WAAW,IAAI,KACnB;IAAC;IAAQ;IAAO;IAAc;IAAc;GAAQ,CAAA,CAAE,SAAS,IAAI,KAClE,oCAAoC,KAAK,OAAO,GAElD,QAAQ,gBAAgB,UAAU,IAAI;EAC1C;CACF,CAAC;CACD,OAAO,SAAS;AAClB"}

package/lib/{material-renderer.d.ts → material-renderer.d.cts}

@@ -3,4 +3,3 @@ 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/runtime.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-runtime v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:18 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -37,15 +37,11 @@ function createLayoutRuntime(options) {
 		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);
-			}
+			disposeHandle(id, handle);
+			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];
@@ -63,7 +59,11 @@ function createLayoutRuntime(options) {
 				shells.set(item.id, shell);
 			}
 			Object.assign(shell.style, require_styles.resolveItemStyle(item, breakpointId));
-			if (!placement) continue;
+			if (!placement) {
+				const handle = handles.get(item.id);
+				if (handle) disposeHandle(item.id, handle);
+				continue;
+			}
 			const context = {
 				shell,
 				item,
@@ -81,6 +81,15 @@ function createLayoutRuntime(options) {
 			}
 		}
 	}
+	function disposeHandle(id, handle = handles.get(id)) {
+		if (!handle) return;
+		handles.delete(id);
+		try {
+			handle.destroy?.();
+		} catch (error) {
+			options.onError?.(error);
+		}
+	}
 	function updateBreakpoint(width) {
 		if (!document || manualBreakpoint) return;
 		const next = (0, _composy_layout_core.resolveBreakpoint)(document, width).id;
@@ -121,6 +130,10 @@ function createLayoutRuntime(options) {
 			render();
 		},
 		setBreakpoint(id) {
+			if (id && document && !document.breakpoints.some((bp) => bp.id === id)) {
+				options.onError?.(/* @__PURE__ */ new Error(`Unknown breakpoint ${id}.`));
+				return;
+			}
 			manualBreakpoint = id;
 			if (id) activeBreakpoint = id;
 			else updateBreakpointFromContainer();
@@ -136,7 +149,7 @@ function createLayoutRuntime(options) {
 			if (!mounted) return;
 			observer?.disconnect();
 			observer = void 0;
-			for (const handle of handles.values()) handle.destroy?.();
+			for (const [id, handle] of handles) disposeHandle(id, handle);
 			handles.clear();
 			for (const shell of shells.values()) if (ownedShells.has(shell)) shell.remove();
 			shells.clear();
@@ -148,6 +161,8 @@ function createLayoutRuntime(options) {
 			options.container.style.removeProperty("direction");
 			options.container.style.removeProperty("min-height");
 			options.container.style.removeProperty("max-height");
+			manualBreakpoint = void 0;
+			activeBreakpoint = void 0;
 			mounted = false;
 		}
 	};

package/lib/runtime.cjs.map

@@ -1 +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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"}
+{"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      disposeHandle(id, handle)\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    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) {\n        const handle = handles.get(item.id)\n        if (handle) disposeHandle(item.id, handle)\n        continue\n      }\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 disposeHandle(id: string, handle = handles.get(id)): void {\n    if (!handle) return\n    handles.delete(id)\n    try {\n      handle.destroy?.()\n    } catch (error) {\n      options.onError?.(error)\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      if (id && document && !document.breakpoints.some(bp => bp.id === id)) {\n        options.onError?.(new Error(`Unknown breakpoint ${id}.`))\n        return\n      }\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 [id, handle] of handles) disposeHandle(id, handle)\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      manualBreakpoint = undefined\n      activeBreakpoint = undefined\n      mounted = false\n    },\n  }\n}\n\nexport { resolveGridStyle, resolveItemStyle }\n"],"mappings":";;;;;;;;;;;;;;;AA+CO,SAAS,oBACd,SACe;CACf,IAAI,WAAW,QAAQ;CACvB,IAAI,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM,0BAAU,IAAI,IAAgC;CACpD,MAAM,yBAAS,IAAI,IAAyB;CAC5C,MAAM,8BAAc,IAAI,IAAiB;CACzC,MAAM,YAAY,0BAAA,wBAAwB,QAAQ,SAAS;CAE3D,SAAS,SAAe;EACtB,IAAI,CAAC,WAAW,CAAC,UAAU;EAC3B,MAAM,UAAA,GAAA,qBAAA,uBAAA,CAAgC,QAAQ;EAC9C,IAAI,CAAC,OAAO,OAAO;GACjB,QAAQ,UACN,IAAI,MAAM,OAAO,OAAO,EAAC,EAAG,WAAW,yBAAyB,CAClE;GACA;EACF;EACA,MAAM,eACJ,oBAAoB,oBAAoB,SAAS;EACnD,mBAAmB;EACnB,MAAM,YAAY,eAAA,iBAAiB,UAAU,YAAY;EACzD,OAAO,OAAO,QAAQ,UAAU,OAAO,SAAS;EAChD,MAAM,aAAa,IAAI,IAAI,SAAS,MAAM,KAAI,SAAQ,KAAK,EAAE,CAAC;EAC9D,KAAA,MAAW,CAAC,IAAI,WAAW,SAAS;GAClC,IAAI,WAAW,IAAI,EAAE,GAAG;GACxB,cAAc,IAAI,MAAM;GACxB,MAAM,QAAQ,OAAO,IAAI,EAAE;GAC3B,IAAI,SAAS,YAAY,IAAI,KAAK,GAAG,MAAM,OAAO;GAClD,IAAI,OAAO,YAAY,OAAO,KAAK;GACnC,OAAO,OAAO,EAAE;EAClB;EACA,KAAA,MAAW,QAAQ,SAAS,OAAO;GACjC,MAAM,YAAY,KAAK,OAAO;GAC9B,IAAI,QAAQ,OAAO,IAAI,KAAK,EAAE;GAC9B,IAAI,CAAC,OAAO;IACV,QAAQ,QAAQ,eAAe,IAAI;IACnC,IAAI,CAAC,OAAO;KACV,QAAQ,QAAQ,UAAU,cAAc,cAAc,KAAK;KAC3D,MAAM,YAAY;KAClB,MAAM,QAAQ,eAAe,KAAK;KAClC,MAAM,QAAQ,aAAa,KAAK;KAChC,YAAY,IAAI,KAAK;KACrB,QAAQ,UAAU,YAAY,KAAK;IACrC;IACA,OAAO,IAAI,KAAK,IAAI,KAAK;GAC3B;GACA,OAAO,OAAO,MAAM,OAAO,eAAA,iBAAiB,MAAM,YAAY,CAAC;GAC/D,IAAI,CAAC,WAAW;IACd,MAAM,SAAS,QAAQ,IAAI,KAAK,EAAE;IAClC,IAAI,QAAQ,cAAc,KAAK,IAAI,MAAM;IACzC;GACF;GACA,MAAM,UAAU;IAAE;IAAO;IAAM;IAAW;GAAa;GACvD,IAAI;IACF,IAAI,SAAS,QAAQ,IAAI,KAAK,EAAE;IAChC,IAAI,CAAC,QAAQ;KACX,SAAS,QAAQ,aACZ,QAAQ,WAAW,OAAO,KAAK,CAAC,IAChC,0BAAA,sBAAsB,SAAS,SAAS,KAAK,CAAC;KACnD,QAAQ,IAAI,KAAK,IAAI,MAAM;IAC7B,OAAO,OAAO,SAAS,OAAO;GAChC,SAAS,OAAO;IACd,QAAQ,UAAU,KAAK;GACzB;EACF;CACF;CAEA,SAAS,cAAc,IAAY,SAAS,QAAQ,IAAI,EAAE,GAAS;EACjE,IAAI,CAAC,QAAQ;EACb,QAAQ,OAAO,EAAE;EACjB,IAAI;GACF,OAAO,UAAU;EACnB,SAAS,OAAO;GACd,QAAQ,UAAU,KAAK;EACzB;CACF;CAEA,SAAS,iBAAiB,OAAqB;EAC7C,IAAI,CAAC,YAAY,kBAAkB;EACnC,MAAM,QAAA,GAAA,qBAAA,kBAAA,CAAyB,UAAU,KAAK,CAAA,CAAE;EAChD,IAAI,SAAS,kBAAkB;GAC7B,MAAM,WAAW;GACjB,mBAAmB;GACnB,QAAQ,qBAAqB,IAAI;GACjC,IAAI,aAAa,MAAM,OAAO;EAChC;CACF;CAEA,SAAS,gCAAsC;EAC7C,IAAI,CAAC,YAAY,kBAAkB;EACnC,MAAM,QACJ,QAAQ,UAAU,sBAAsB,CAAA,CAAE,SAC1C,QAAQ,UAAU;EAIpB,IAAI,QAAQ,GAAG,iBAAiB,KAAK;OAAA,IAC5B,qBAAqB,SAAS,qBAAqB;GAC1D,MAAM,WAAW;GACjB,mBAAmB,SAAS;GAC5B,IAAI,UAAU,QAAQ,qBAAqB,gBAAgB;EAC7D;CACF;CAEA,OAAO;EACL,QAAQ;GACN,IAAI,SAAS;GACb,UAAU;GACV,IACE,QAAQ,kBAAkB,SAC1B,OAAO,mBAAmB,aAC1B;IACA,WAAW,IAAI,gBAAe,YAAW;KACvC,MAAM,QACJ,QAAQ,EAAC,EAAG,YAAY,SAAS,QAAQ,UAAU;KACrD,IAAI,QAAQ,GAAG,iBAAiB,KAAK;UAChC,8BAA8B;IACrC,CAAC;IACD,SAAS,QAAQ,QAAQ,SAAS;GACpC;GACA,8BAA8B;GAC9B,OAAO;EACT;EACA,OAAO,MAAM;GACX,WAAW;GACX,OAAO;EACT;EACA,cAAc,IAAI;GAChB,IAAI,MAAM,YAAY,CAAC,SAAS,YAAY,MAAK,OAAM,GAAG,OAAO,EAAE,GAAG;IACpE,QAAQ,0BAAU,IAAI,MAAM,sBAAsB,GAAE,EAAG,CAAC;IACxD;GACF;GACA,mBAAmB;GACnB,IAAI,IAAI,mBAAmB;QACtB,8BAA8B;GACnC,OAAO;EACT;EACA,gBAAgB;GACd,OAAO;EACT;EACA,eAAe;GACb,OAAO,QAAQ;EACjB;EACA,UAAU;GACR,IAAI,CAAC,SAAS;GACd,UAAU,WAAW;GACrB,WAAW,KAAA;GACX,KAAA,MAAW,CAAC,IAAI,WAAW,SAAS,cAAc,IAAI,MAAM;GAC5D,QAAQ,MAAM;GACd,KAAA,MAAW,SAAS,OAAO,OAAO,GAChC,IAAI,YAAY,IAAI,KAAK,GAAG,MAAM,OAAO;GAC3C,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,UAAU,MAAM,eAAe,SAAS;GAChD,QAAQ,UAAU,MAAM,eAAe,uBAAuB;GAC9D,QAAQ,UAAU,MAAM,eAAe,gBAAgB;GACvD,QAAQ,UAAU,MAAM,eAAe,KAAK;GAC5C,QAAQ,UAAU,MAAM,eAAe,WAAW;GAClD,QAAQ,UAAU,MAAM,eAAe,YAAY;GACnD,QAAQ,UAAU,MAAM,eAAe,YAAY;GACnD,mBAAmB,KAAA;GACnB,mBAAmB,KAAA;GACnB,UAAU;EACZ;CACF;AACF"}

package/lib/{runtime.d.ts → runtime.d.cts}

@@ -32,4 +32,3 @@ export interface LayoutRuntime {
 }
 export declare function createLayoutRuntime(options: LayoutRuntimeOptions): LayoutRuntime;
 export { resolveGridStyle, resolveItemStyle };
-//# sourceMappingURL=runtime.d.ts.map