@copilotkit/a2ui-renderer 1.55.0-next.8 → 1.55.0

package/dist/A2UIViewer.mjs

@@ -1,152 +0,0 @@
-"use client";
-
-import { A2UIProvider, useA2UIActions } from "./react-renderer/core/A2UIProvider.mjs";
-import A2UIRenderer from "./react-renderer/core/A2UIRenderer.mjs";
-import { initializeDefaultCatalog } from "./react-renderer/registry/defaultCatalog.mjs";
-import { injectStyles } from "./react-renderer/styles/index.mjs";
-import { theme } from "./theme/viewer-theme.mjs";
-import React, { useEffect, useId, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/A2UIViewer.tsx
-let initialized = false;
-function ensureInitialized() {
-	if (!initialized) {
-		initializeDefaultCatalog();
-		injectStyles();
-		initialized = true;
-	}
-}
-/**
-* A2UIViewer renders an A2UI component tree from a JSON definition and data.
-* It re-renders cleanly when props change, discarding previous state.
-*/
-function A2UIViewer({ root, components, data, onAction, styles, className }) {
-	ensureInitialized();
-	const baseId = useId();
-	const surfaceId = useMemo(() => {
-		const definitionKey = `${root}-${JSON.stringify(components)}`;
-		let hash = 0;
-		for (let i = 0; i < definitionKey.length; i++) {
-			const char = definitionKey.charCodeAt(i);
-			hash = (hash << 5) - hash + char;
-			hash = hash & hash;
-		}
-		return `surface${baseId.replace(/:/g, "-")}${hash}`;
-	}, [
-		baseId,
-		root,
-		components
-	]);
-	const handleAction = useMemo(() => {
-		if (!onAction) return void 0;
-		return (message) => {
-			const userAction = message.userAction;
-			if (userAction) onAction({
-				actionName: userAction.name,
-				sourceComponentId: userAction.sourceComponentId,
-				timestamp: userAction.timestamp,
-				context: userAction.context ?? {}
-			});
-		};
-	}, [onAction]);
-	if (!components || components.length === 0) return /* @__PURE__ */ jsx("div", {
-		className,
-		style: {
-			padding: 16,
-			color: "#666",
-			fontFamily: "system-ui"
-		},
-		children: "No content to display"
-	});
-	return /* @__PURE__ */ jsx(A2UIProvider, {
-		onAction: handleAction,
-		theme,
-		children: /* @__PURE__ */ jsx(A2UIViewerInner, {
-			surfaceId,
-			root,
-			components,
-			data: data ?? {},
-			styles,
-			className
-		})
-	});
-}
-/**
-* Inner component that processes messages within the provider context.
-*/
-function A2UIViewerInner({ surfaceId, root, components, data, styles, className }) {
-	const { processMessages } = useA2UIActions();
-	const lastProcessedRef = useRef("");
-	useEffect(() => {
-		const key = `${surfaceId}-${JSON.stringify(components)}-${JSON.stringify(data)}`;
-		if (key === lastProcessedRef.current) return;
-		lastProcessedRef.current = key;
-		const messages = [{ beginRendering: {
-			surfaceId,
-			root,
-			styles: styles ?? {}
-		} }, { surfaceUpdate: {
-			surfaceId,
-			components
-		} }];
-		if (data && Object.keys(data).length > 0) {
-			const contents = objectToValueMaps(data);
-			if (contents.length > 0) messages.push({ dataModelUpdate: {
-				surfaceId,
-				path: "/",
-				contents
-			} });
-		}
-		processMessages(messages);
-	}, [
-		processMessages,
-		surfaceId,
-		root,
-		components,
-		data,
-		styles
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		children: /* @__PURE__ */ jsx(A2UIRenderer, { surfaceId })
-	});
-}
-/**
-* Converts a nested JavaScript object to the ValueMap[] format
-* expected by A2UI's dataModelUpdate message.
-*/
-function objectToValueMaps(obj) {
-	return Object.entries(obj).map(([key, value]) => valueToValueMap(key, value));
-}
-/**
-* Converts a single key-value pair to a ValueMap.
-*/
-function valueToValueMap(key, value) {
-	if (typeof value === "string") return {
-		key,
-		valueString: value
-	};
-	if (typeof value === "number") return {
-		key,
-		valueNumber: value
-	};
-	if (typeof value === "boolean") return {
-		key,
-		valueBoolean: value
-	};
-	if (value === null || value === void 0) return { key };
-	if (Array.isArray(value)) return {
-		key,
-		valueMap: value.map((item, index) => valueToValueMap(String(index), item))
-	};
-	if (typeof value === "object") return {
-		key,
-		valueMap: objectToValueMaps(value)
-	};
-	return { key };
-}
-
-//#endregion
-export { A2UIViewer };
-//# sourceMappingURL=A2UIViewer.mjs.map

package/dist/A2UIViewer.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"A2UIViewer.mjs","names":["viewerTheme"],"sources":["../src/A2UIViewer.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useMemo, useEffect, useRef } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport { v0_8 } from \"@a2ui/lit\";\nimport {\n  A2UIProvider,\n  useA2UIActions,\n} from \"./react-renderer/core/A2UIProvider\";\nimport { A2UIRenderer } from \"./react-renderer/core/A2UIRenderer\";\nimport { initializeDefaultCatalog } from \"./react-renderer/registry/defaultCatalog\";\nimport { litTheme } from \"./react-renderer/theme/litTheme\";\nimport { injectStyles } from \"./react-renderer/styles\";\nimport { theme as viewerTheme } from \"./theme/viewer-theme.js\";\n\n// Re-export types that consumers may need\nexport interface ComponentInstance {\n  id: string;\n  component: Record<string, unknown>;\n}\n\nexport interface A2UIActionEvent {\n  actionName: string;\n  sourceComponentId: string;\n  timestamp: string;\n  context: Record<string, unknown>;\n}\n\nexport interface A2UIViewerProps {\n  /** ID of the root component to render */\n  root: string;\n  /** Component definitions - array of ComponentInstance */\n  components: v0_8.Types.ComponentInstance[];\n  /** Data model - nested object, e.g. { user: { name: \"John\" }, items: [\"a\", \"b\"] } */\n  data?: Record<string, unknown>;\n  /** Called when user triggers an action (button click, etc.) */\n  onAction?: (action: A2UIActionEvent) => void;\n  /** Surface styles (primaryColor, font, logoUrl) */\n  styles?: Record<string, string>;\n  /** Optional className for the container */\n  className?: string;\n}\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n  if (!initialized) {\n    initializeDefaultCatalog();\n    injectStyles();\n    initialized = true;\n  }\n}\n\n/**\n * A2UIViewer renders an A2UI component tree from a JSON definition and data.\n * It re-renders cleanly when props change, discarding previous state.\n */\nexport function A2UIViewer({\n  root,\n  components,\n  data,\n  onAction,\n  styles,\n  className,\n}: A2UIViewerProps): React.JSX.Element {\n  ensureInitialized();\n\n  // Use React's useId for SSR-safe base ID\n  const baseId = useId();\n\n  // Generate a stable surfaceId that changes when definition changes\n  const surfaceId = useMemo(() => {\n    const definitionKey = `${root}-${JSON.stringify(components)}`;\n    let hash = 0;\n    for (let i = 0; i < definitionKey.length; i++) {\n      const char = definitionKey.charCodeAt(i);\n      hash = (hash << 5) - hash + char;\n      hash = hash & hash;\n    }\n    return `surface${baseId.replace(/:/g, \"-\")}${hash}`;\n  }, [baseId, root, components]);\n\n  // Convert onAction callback to internal format\n  const handleAction = useMemo(() => {\n    if (!onAction) return undefined;\n\n    return (message: Types.A2UIClientEventMessage) => {\n      const userAction = message.userAction;\n      if (userAction) {\n        onAction({\n          actionName: userAction.name,\n          sourceComponentId: userAction.sourceComponentId,\n          timestamp: userAction.timestamp,\n          context: userAction.context ?? {},\n        });\n      }\n    };\n  }, [onAction]);\n\n  // Show placeholder if no components provided\n  if (!components || components.length === 0) {\n    return (\n      <div\n        className={className}\n        style={{ padding: 16, color: \"#666\", fontFamily: \"system-ui\" }}\n      >\n        No content to display\n      </div>\n    );\n  }\n\n  return (\n    <A2UIProvider onAction={handleAction} theme={viewerTheme}>\n      <A2UIViewerInner\n        surfaceId={surfaceId}\n        root={root}\n        components={components}\n        data={data ?? {}}\n        styles={styles}\n        className={className}\n      />\n    </A2UIProvider>\n  );\n}\n\n/**\n * Inner component that processes messages within the provider context.\n */\nfunction A2UIViewerInner({\n  surfaceId,\n  root,\n  components,\n  data,\n  styles,\n  className,\n}: {\n  surfaceId: string;\n  root: string;\n  components: v0_8.Types.ComponentInstance[];\n  data: Record<string, unknown>;\n  styles?: Record<string, string>;\n  className?: string;\n}) {\n  const { processMessages } = useA2UIActions();\n  const lastProcessedRef = useRef<string>(\"\");\n\n  // Process messages when props change\n  useEffect(() => {\n    const key = `${surfaceId}-${JSON.stringify(components)}-${JSON.stringify(data)}`;\n    if (key === lastProcessedRef.current) return;\n    lastProcessedRef.current = key;\n\n    const messages: Types.ServerToClientMessage[] = [\n      { beginRendering: { surfaceId, root, styles: styles ?? {} } },\n      { surfaceUpdate: { surfaceId, components } },\n    ];\n\n    // Add data model updates\n    if (data && Object.keys(data).length > 0) {\n      const contents = objectToValueMaps(data);\n      if (contents.length > 0) {\n        messages.push({\n          dataModelUpdate: { surfaceId, path: \"/\", contents },\n        });\n      }\n    }\n\n    processMessages(messages);\n  }, [processMessages, surfaceId, root, components, data, styles]);\n\n  return (\n    <div className={className}>\n      <A2UIRenderer surfaceId={surfaceId} />\n    </div>\n  );\n}\n\n/**\n * Converts a nested JavaScript object to the ValueMap[] format\n * expected by A2UI's dataModelUpdate message.\n */\nfunction objectToValueMaps(obj: Record<string, unknown>): Types.ValueMap[] {\n  return Object.entries(obj).map(([key, value]) => valueToValueMap(key, value));\n}\n\n/**\n * Converts a single key-value pair to a ValueMap.\n */\nfunction valueToValueMap(key: string, value: unknown): Types.ValueMap {\n  if (typeof value === \"string\") {\n    return { key, valueString: value };\n  }\n  if (typeof value === \"number\") {\n    return { key, valueNumber: value };\n  }\n  if (typeof value === \"boolean\") {\n    return { key, valueBoolean: value };\n  }\n  if (value === null || value === undefined) {\n    return { key };\n  }\n  if (Array.isArray(value)) {\n    const valueMap = value.map((item, index) =>\n      valueToValueMap(String(index), item),\n    );\n    return { key, valueMap };\n  }\n  if (typeof value === \"object\") {\n    const valueMap = objectToValueMaps(value as Record<string, unknown>);\n    return { key, valueMap };\n  }\n  return { key };\n}\n"],"mappings":"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"}

package/dist/react-renderer/components/content/AudioPlayer.cjs

@@ -1,34 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/content/AudioPlayer.tsx
-/**
-* AudioPlayer component - renders an audio player with optional description.
-*/
-const AudioPlayer = (0, react.memo)(function AudioPlayer({ node, surfaceId }) {
-	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const url = resolveString(props.url);
-	const description = resolveString(props.description ?? null);
-	if (!url) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-audio",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: require_utils.classMapToString(theme.components.AudioPlayer),
-			style: require_utils.stylesToObject(theme.additionalStyles?.AudioPlayer),
-			children: [description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: description }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
-				src: url,
-				controls: true
-			})]
-		})
-	});
-});
-
-//#endregion
-exports.default = AudioPlayer;
-//# sourceMappingURL=AudioPlayer.cjs.map

package/dist/react-renderer/components/content/AudioPlayer.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AudioPlayer.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * AudioPlayer component - renders an audio player with optional description.\n */\nexport const AudioPlayer = memo(function AudioPlayer({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.AudioPlayerNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const url = resolveString(props.url);\n  const description = resolveString(props.description ?? null);\n\n  if (!url) {\n    return null;\n  }\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-audio\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.AudioPlayer)}\n        style={stylesToObject(theme.additionalStyles?.AudioPlayer)}\n      >\n        {description && <p>{description}</p>}\n        <audio src={url} controls />\n      </section>\n    </div>\n  );\n});\n\nexport default AudioPlayer;\n"],"mappings":";;;;;;;;;;;AASA,MAAa,8BAAmB,SAAS,YAAY,EACnD,MACA,aAC4C;CAC5C,MAAM,EAAE,OAAO,kBAAkBA,0CAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,MAAM,cAAc,MAAM,IAAI;CACpC,MAAM,cAAc,cAAc,MAAM,eAAe,KAAK;AAE5D,KAAI,CAAC,IACH,QAAO;AAST,QACE,2CAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,YAAY;GACzD,OAAOC,6BAAe,MAAM,kBAAkB,YAAY;cAEzD,eAAe,2CAAC,iBAAG,cAAgB,EACpC,2CAAC;IAAM,KAAK;IAAK;KAAW;IACpB;GACN;EAER"}

package/dist/react-renderer/components/content/AudioPlayer.d.cts

@@ -1,12 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/AudioPlayer.d.ts
-/**
- * AudioPlayer component - renders an audio player with optional description.
- */
-declare const AudioPlayer: react.NamedExoticComponent<A2UIComponentProps<Types.AudioPlayerNode>>;
-//#endregion
-export { AudioPlayer };
-//# sourceMappingURL=AudioPlayer.d.cts.map

package/dist/react-renderer/components/content/AudioPlayer.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AudioPlayer.d.cts","names":[],"sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"mappings":";;;;;;;;cASa,WAAA,EAAW,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,eAAA"}

package/dist/react-renderer/components/content/AudioPlayer.d.mts

@@ -1,12 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/AudioPlayer.d.ts
-/**
- * AudioPlayer component - renders an audio player with optional description.
- */
-declare const AudioPlayer: react.NamedExoticComponent<A2UIComponentProps<Types.AudioPlayerNode>>;
-//#endregion
-export { AudioPlayer };
-//# sourceMappingURL=AudioPlayer.d.mts.map

package/dist/react-renderer/components/content/AudioPlayer.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AudioPlayer.d.mts","names":[],"sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"mappings":";;;;;;;;cASa,WAAA,EAAW,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,eAAA"}

package/dist/react-renderer/components/content/AudioPlayer.mjs

@@ -1,33 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/content/AudioPlayer.tsx
-/**
-* AudioPlayer component - renders an audio player with optional description.
-*/
-const AudioPlayer = memo(function AudioPlayer({ node, surfaceId }) {
-	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const url = resolveString(props.url);
-	const description = resolveString(props.description ?? null);
-	if (!url) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-audio",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsxs("section", {
-			className: classMapToString(theme.components.AudioPlayer),
-			style: stylesToObject(theme.additionalStyles?.AudioPlayer),
-			children: [description && /* @__PURE__ */ jsx("p", { children: description }), /* @__PURE__ */ jsx("audio", {
-				src: url,
-				controls: true
-			})]
-		})
-	});
-});
-
-//#endregion
-export { AudioPlayer as default };
-//# sourceMappingURL=AudioPlayer.mjs.map

package/dist/react-renderer/components/content/AudioPlayer.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AudioPlayer.mjs","names":[],"sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * AudioPlayer component - renders an audio player with optional description.\n */\nexport const AudioPlayer = memo(function AudioPlayer({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.AudioPlayerNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const url = resolveString(props.url);\n  const description = resolveString(props.description ?? null);\n\n  if (!url) {\n    return null;\n  }\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-audio\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.AudioPlayer)}\n        style={stylesToObject(theme.additionalStyles?.AudioPlayer)}\n      >\n        {description && <p>{description}</p>}\n        <audio src={url} controls />\n      </section>\n    </div>\n  );\n});\n\nexport default AudioPlayer;\n"],"mappings":";;;;;;;;;;AASA,MAAa,cAAc,KAAK,SAAS,YAAY,EACnD,MACA,aAC4C;CAC5C,MAAM,EAAE,OAAO,kBAAkB,iBAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,MAAM,cAAc,MAAM,IAAI;CACpC,MAAM,cAAc,cAAc,MAAM,eAAe,KAAK;AAE5D,KAAI,CAAC,IACH,QAAO;AAST,QACE,oBAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,YAAY;GACzD,OAAO,eAAe,MAAM,kBAAkB,YAAY;cAEzD,eAAe,oBAAC,iBAAG,cAAgB,EACpC,oBAAC;IAAM,KAAK;IAAK;KAAW;IACpB;GACN;EAER"}

package/dist/react-renderer/components/content/Divider.cjs

@@ -1,31 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/content/Divider.tsx
-/**
-* Divider component - renders a visual separator line.
-*
-* Structure mirrors Lit's Divider component:
-*   <div class="a2ui-divider">  ← :host equivalent
-*     <hr class="...">          ← internal element
-*   </div>
-*/
-const Divider = (0, react.memo)(function Divider({ node, surfaceId }) {
-	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-divider",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
-			className: require_utils.classMapToString(theme.components.Divider),
-			style: require_utils.stylesToObject(theme.additionalStyles?.Divider)
-		})
-	});
-});
-
-//#endregion
-exports.default = Divider;
-//# sourceMappingURL=Divider.cjs.map

package/dist/react-renderer/components/content/Divider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Divider component - renders a visual separator line.\n *\n * Structure mirrors Lit's Divider component:\n *   <div class=\"a2ui-divider\">  ← :host equivalent\n *     <hr class=\"...\">          ← internal element\n *   </div>\n */\nexport const Divider = memo(function Divider({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.DividerNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-divider\" style={hostStyle}>\n      <hr\n        className={classMapToString(theme.components.Divider)}\n        style={stylesToObject(theme.additionalStyles?.Divider)}\n      />\n    </div>\n  );\n});\n\nexport default Divider;\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAa,0BAAe,SAAS,QAAQ,EAC3C,MACA,aACwC;CACxC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;AAQnD,QACE,2CAAC;EAAI,WAAU;EAAe,OAL9B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,QAAQ;GACrD,OAAOC,6BAAe,MAAM,kBAAkB,QAAQ;IACtD;GACE;EAER"}

package/dist/react-renderer/components/content/Divider.d.cts

@@ -1,17 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/Divider.d.ts
-/**
- * Divider component - renders a visual separator line.
- *
- * Structure mirrors Lit's Divider component:
- *   <div class="a2ui-divider">  ← :host equivalent
- *     <hr class="...">          ← internal element
- *   </div>
- */
-declare const Divider: react.NamedExoticComponent<A2UIComponentProps<Types.DividerNode>>;
-//#endregion
-export { Divider };
-//# sourceMappingURL=Divider.d.cts.map

package/dist/react-renderer/components/content/Divider.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.d.cts","names":[],"sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"mappings":";;;;;;;;AAcA;;;;;cAAa,OAAA,EAAO,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,WAAA"}

package/dist/react-renderer/components/content/Divider.d.mts

@@ -1,17 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/Divider.d.ts
-/**
- * Divider component - renders a visual separator line.
- *
- * Structure mirrors Lit's Divider component:
- *   <div class="a2ui-divider">  ← :host equivalent
- *     <hr class="...">          ← internal element
- *   </div>
- */
-declare const Divider: react.NamedExoticComponent<A2UIComponentProps<Types.DividerNode>>;
-//#endregion
-export { Divider };
-//# sourceMappingURL=Divider.d.mts.map

package/dist/react-renderer/components/content/Divider.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.d.mts","names":[],"sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"mappings":";;;;;;;;AAcA;;;;;cAAa,OAAA,EAAO,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,WAAA"}

package/dist/react-renderer/components/content/Divider.mjs

@@ -1,30 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/content/Divider.tsx
-/**
-* Divider component - renders a visual separator line.
-*
-* Structure mirrors Lit's Divider component:
-*   <div class="a2ui-divider">  ← :host equivalent
-*     <hr class="...">          ← internal element
-*   </div>
-*/
-const Divider = memo(function Divider({ node, surfaceId }) {
-	const { theme } = useA2UIComponent(node, surfaceId);
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-divider",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsx("hr", {
-			className: classMapToString(theme.components.Divider),
-			style: stylesToObject(theme.additionalStyles?.Divider)
-		})
-	});
-});
-
-//#endregion
-export { Divider as default };
-//# sourceMappingURL=Divider.mjs.map

package/dist/react-renderer/components/content/Divider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.mjs","names":[],"sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Divider component - renders a visual separator line.\n *\n * Structure mirrors Lit's Divider component:\n *   <div class=\"a2ui-divider\">  ← :host equivalent\n *     <hr class=\"...\">          ← internal element\n *   </div>\n */\nexport const Divider = memo(function Divider({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.DividerNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-divider\" style={hostStyle}>\n      <hr\n        className={classMapToString(theme.components.Divider)}\n        style={stylesToObject(theme.additionalStyles?.Divider)}\n      />\n    </div>\n  );\n});\n\nexport default Divider;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,UAAU,KAAK,SAAS,QAAQ,EAC3C,MACA,aACwC;CACxC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;AAQnD,QACE,oBAAC;EAAI,WAAU;EAAe,OAL9B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,QAAQ;GACrD,OAAO,eAAe,MAAM,kBAAkB,QAAQ;IACtD;GACE;EAER"}

package/dist/react-renderer/components/content/Icon.cjs

@@ -1,50 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/content/Icon.tsx
-/**
-* Convert camelCase to snake_case for Material Symbols font.
-* e.g., "shoppingCart" -> "shopping_cart"
-* This matches the Lit renderer's approach.
-*/
-function toSnakeCase(str) {
-	return str.replace(/([A-Z])/g, "_$1").toLowerCase();
-}
-/**
-* Icon component - renders an icon using Material Symbols Outlined font.
-*
-* This matches the Lit renderer's approach using the g-icon class with
-* Material Symbols Outlined font.
-*
-* @example Add Material Symbols font to your HTML:
-* ```html
-* <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
-* ```
-*/
-const Icon = (0, react.memo)(function Icon({ node, surfaceId }) {
-	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const iconName = resolveString(props.name);
-	if (!iconName) return null;
-	const snakeCaseName = toSnakeCase(iconName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-icon",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-			className: require_utils.classMapToString(theme.components.Icon),
-			style: require_utils.stylesToObject(theme.additionalStyles?.Icon),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "g-icon",
-				children: snakeCaseName
-			})
-		})
-	});
-});
-
-//#endregion
-exports.default = Icon;
-//# sourceMappingURL=Icon.cjs.map

package/dist/react-renderer/components/content/Icon.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Convert camelCase to snake_case for Material Symbols font.\n * e.g., \"shoppingCart\" -> \"shopping_cart\"\n * This matches the Lit renderer's approach.\n */\nfunction toSnakeCase(str: string): string {\n  return str.replace(/([A-Z])/g, \"_$1\").toLowerCase();\n}\n\n/**\n * Icon component - renders an icon using Material Symbols Outlined font.\n *\n * This matches the Lit renderer's approach using the g-icon class with\n * Material Symbols Outlined font.\n *\n * @example Add Material Symbols font to your HTML:\n * ```html\n * <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\" rel=\"stylesheet\">\n * ```\n */\nexport const Icon = memo(function Icon({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.IconNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const iconName = resolveString(props.name);\n\n  if (!iconName) {\n    return null;\n  }\n\n  // Convert camelCase to snake_case for Material Symbols\n  const snakeCaseName = toSnakeCase(iconName);\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-icon\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Icon)}\n        style={stylesToObject(theme.additionalStyles?.Icon)}\n      >\n        <span className=\"g-icon\">{snakeCaseName}</span>\n      </section>\n    </div>\n  );\n});\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;;;;AAWA,SAAS,YAAY,KAAqB;AACxC,QAAO,IAAI,QAAQ,YAAY,MAAM,CAAC,aAAa;;;;;;;;;;;;;AAcrD,MAAa,uBAAY,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkBA,0CAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,WAAW,cAAc,MAAM,KAAK;AAE1C,KAAI,CAAC,SACH,QAAO;CAIT,MAAM,gBAAgB,YAAY,SAAS;AAQ3C,QACE,2CAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,KAAK;GAClD,OAAOC,6BAAe,MAAM,kBAAkB,KAAK;aAEnD,2CAAC;IAAK,WAAU;cAAU;KAAqB;IACvC;GACN;EAER"}

package/dist/react-renderer/components/content/Icon.d.cts

@@ -1,20 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/Icon.d.ts
-/**
- * Icon component - renders an icon using Material Symbols Outlined font.
- *
- * This matches the Lit renderer's approach using the g-icon class with
- * Material Symbols Outlined font.
- *
- * @example Add Material Symbols font to your HTML:
- * ```html
- * <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
- * ```
- */
-declare const Icon: react.NamedExoticComponent<A2UIComponentProps<Types.IconNode>>;
-//#endregion
-export { Icon };
-//# sourceMappingURL=Icon.d.cts.map

package/dist/react-renderer/components/content/Icon.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"mappings":";;;;;;;;AA0BA;;;;;;;;cAAa,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,QAAA"}

package/dist/react-renderer/components/content/Icon.d.mts

@@ -1,20 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/content/Icon.d.ts
-/**
- * Icon component - renders an icon using Material Symbols Outlined font.
- *
- * This matches the Lit renderer's approach using the g-icon class with
- * Material Symbols Outlined font.
- *
- * @example Add Material Symbols font to your HTML:
- * ```html
- * <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
- * ```
- */
-declare const Icon: react.NamedExoticComponent<A2UIComponentProps<Types.IconNode>>;
-//#endregion
-export { Icon };
-//# sourceMappingURL=Icon.d.mts.map

package/dist/react-renderer/components/content/Icon.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"mappings":";;;;;;;;AA0BA;;;;;;;;cAAa,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,QAAA"}

package/dist/react-renderer/components/content/Icon.mjs

@@ -1,49 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/content/Icon.tsx
-/**
-* Convert camelCase to snake_case for Material Symbols font.
-* e.g., "shoppingCart" -> "shopping_cart"
-* This matches the Lit renderer's approach.
-*/
-function toSnakeCase(str) {
-	return str.replace(/([A-Z])/g, "_$1").toLowerCase();
-}
-/**
-* Icon component - renders an icon using Material Symbols Outlined font.
-*
-* This matches the Lit renderer's approach using the g-icon class with
-* Material Symbols Outlined font.
-*
-* @example Add Material Symbols font to your HTML:
-* ```html
-* <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
-* ```
-*/
-const Icon = memo(function Icon({ node, surfaceId }) {
-	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const iconName = resolveString(props.name);
-	if (!iconName) return null;
-	const snakeCaseName = toSnakeCase(iconName);
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-icon",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsx("section", {
-			className: classMapToString(theme.components.Icon),
-			style: stylesToObject(theme.additionalStyles?.Icon),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "g-icon",
-				children: snakeCaseName
-			})
-		})
-	});
-});
-
-//#endregion
-export { Icon as default };
-//# sourceMappingURL=Icon.mjs.map

package/dist/react-renderer/components/content/Icon.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Convert camelCase to snake_case for Material Symbols font.\n * e.g., \"shoppingCart\" -> \"shopping_cart\"\n * This matches the Lit renderer's approach.\n */\nfunction toSnakeCase(str: string): string {\n  return str.replace(/([A-Z])/g, \"_$1\").toLowerCase();\n}\n\n/**\n * Icon component - renders an icon using Material Symbols Outlined font.\n *\n * This matches the Lit renderer's approach using the g-icon class with\n * Material Symbols Outlined font.\n *\n * @example Add Material Symbols font to your HTML:\n * ```html\n * <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\" rel=\"stylesheet\">\n * ```\n */\nexport const Icon = memo(function Icon({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.IconNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const iconName = resolveString(props.name);\n\n  if (!iconName) {\n    return null;\n  }\n\n  // Convert camelCase to snake_case for Material Symbols\n  const snakeCaseName = toSnakeCase(iconName);\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-icon\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Icon)}\n        style={stylesToObject(theme.additionalStyles?.Icon)}\n      >\n        <span className=\"g-icon\">{snakeCaseName}</span>\n      </section>\n    </div>\n  );\n});\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;;;AAWA,SAAS,YAAY,KAAqB;AACxC,QAAO,IAAI,QAAQ,YAAY,MAAM,CAAC,aAAa;;;;;;;;;;;;;AAcrD,MAAa,OAAO,KAAK,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkB,iBAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,WAAW,cAAc,MAAM,KAAK;AAE1C,KAAI,CAAC,SACH,QAAO;CAIT,MAAM,gBAAgB,YAAY,SAAS;AAQ3C,QACE,oBAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,KAAK;GAClD,OAAO,eAAe,MAAM,kBAAkB,KAAK;aAEnD,oBAAC;IAAK,WAAU;cAAU;KAAqB;IACvC;GACN;EAER"}

package/dist/react-renderer/components/content/Image.cjs

@@ -1,43 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-const require_utils$1 = require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/content/Image.tsx
-/**
-* Image component - renders an image from a URL with optional sizing and fit modes.
-*
-* Supports usageHint values: icon, avatar, smallFeature, mediumFeature, largeFeature, header
-* Supports fit values: contain, cover, fill, none, scale-down (maps to object-fit via CSS variable)
-*/
-const Image = (0, react.memo)(function Image({ node, surfaceId }) {
-	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const url = resolveString(props.url)?.replace("//via.placeholder.com/", "//placehold.co/");
-	const usageHint = props.usageHint;
-	const fit = props.fit ?? "fill";
-	const classes = require_utils$1.mergeClassMaps(theme.components.Image.all, usageHint ? theme.components.Image[usageHint] : {});
-	const style = {
-		...require_utils.stylesToObject(theme.additionalStyles?.Image),
-		"--object-fit": fit
-	};
-	if (!url) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-image",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-			className: require_utils.classMapToString(classes),
-			style,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: url,
-				alt: ""
-			})
-		})
-	});
-});
-
-//#endregion
-exports.default = Image;
-//# sourceMappingURL=Image.cjs.map

package/dist/react-renderer/components/content/Image.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Image.cjs","names":["useA2UIComponent","mergeClassMaps","stylesToObject","classMapToString"],"sources":["../../../../src/react-renderer/components/content/Image.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport {\n  classMapToString,\n  stylesToObject,\n  mergeClassMaps,\n} from \"../../lib/utils\";\n\ntype UsageHint =\n  | \"icon\"\n  | \"avatar\"\n  | \"smallFeature\"\n  | \"mediumFeature\"\n  | \"largeFeature\"\n  | \"header\";\ntype FitMode = \"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\";\n\n/**\n * Image component - renders an image from a URL with optional sizing and fit modes.\n *\n * Supports usageHint values: icon, avatar, smallFeature, mediumFeature, largeFeature, header\n * Supports fit values: contain, cover, fill, none, scale-down (maps to object-fit via CSS variable)\n */\nexport const Image = memo(function Image({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ImageNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const rawUrl = resolveString(props.url);\n  // Rewrite known-dead placeholder services to working alternatives\n  const url = rawUrl?.replace(\"//via.placeholder.com/\", \"//placehold.co/\");\n  const usageHint = props.usageHint as UsageHint | undefined;\n  const fit = (props.fit as FitMode) ?? \"fill\";\n\n  // Get merged classes for section (matches Lit's Styles.merge)\n  const classes = mergeClassMaps(\n    theme.components.Image.all,\n    usageHint ? theme.components.Image[usageHint] : {},\n  );\n\n  // Build style object with object-fit as CSS variable (matches Lit)\n  const style: React.CSSProperties = {\n    ...stylesToObject(theme.additionalStyles?.Image),\n    \"--object-fit\": fit,\n  } as React.CSSProperties;\n\n  if (!url) {\n    return null;\n  }\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-image\" style={hostStyle}>\n      <section className={classMapToString(classes)} style={style}>\n        <img src={url} alt=\"\" />\n      </section>\n    </div>\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAa,wBAAa,SAAS,MAAM,EACvC,MACA,aACsC;CACtC,MAAM,EAAE,OAAO,kBAAkBA,0CAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAInB,MAAM,MAFS,cAAc,MAAM,IAAI,EAEnB,QAAQ,0BAA0B,kBAAkB;CACxE,MAAM,YAAY,MAAM;CACxB,MAAM,MAAO,MAAM,OAAmB;CAGtC,MAAM,UAAUC,+BACd,MAAM,WAAW,MAAM,KACvB,YAAY,MAAM,WAAW,MAAM,aAAa,EAAE,CACnD;CAGD,MAAM,QAA6B;EACjC,GAAGC,6BAAe,MAAM,kBAAkB,MAAM;EAChD,gBAAgB;EACjB;AAED,KAAI,CAAC,IACH,QAAO;AAST,QACE,2CAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GAAQ,WAAWC,+BAAiB,QAAQ;GAAS;aACpD,2CAAC;IAAI,KAAK;IAAK,KAAI;KAAK;IAChB;GACN;EAER"}