@copilotkit/a2ui-renderer 1.51.4 → 1.51.5-next.1

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1 @@
+{"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.mjs

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1 @@
+{"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.mjs

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1 @@
+{"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.mjs

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,43 @@
+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);
+	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

@@ -0,0 +1 @@
+{"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 url = resolveString(props.url);\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;CAEnB,MAAM,MAAM,cAAc,MAAM,IAAI;CACpC,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"}

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

@@ -0,0 +1,42 @@
+import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
+import { mergeClassMaps } from "../../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/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 = memo(function Image({ node, surfaceId }) {
+	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const url = resolveString(props.url);
+	const usageHint = props.usageHint;
+	const fit = props.fit ?? "fill";
+	const classes = mergeClassMaps(theme.components.Image.all, usageHint ? theme.components.Image[usageHint] : {});
+	const style = {
+		...stylesToObject(theme.additionalStyles?.Image),
+		"--object-fit": fit
+	};
+	if (!url) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-image",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(classes),
+			style,
+			children: /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: ""
+			})
+		})
+	});
+});
+
+//#endregion
+export { Image as default };
+//# sourceMappingURL=Image.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.mjs","names":[],"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 url = resolveString(props.url);\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,QAAQ,KAAK,SAAS,MAAM,EACvC,MACA,aACsC;CACtC,MAAM,EAAE,OAAO,kBAAkB,iBAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,MAAM,cAAc,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM;CACxB,MAAM,MAAO,MAAM,OAAmB;CAGtC,MAAM,UAAU,eACd,MAAM,WAAW,MAAM,KACvB,YAAY,MAAM,WAAW,MAAM,aAAa,EAAE,CACnD;CAGD,MAAM,QAA6B;EACjC,GAAG,eAAe,MAAM,kBAAkB,MAAM;EAChD,gBAAgB;EACjB;AAED,KAAI,CAAC,IACH,QAAO;AAST,QACE,oBAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GAAQ,WAAW,iBAAiB,QAAQ;GAAS;aACpD,oBAAC;IAAI,KAAK;IAAK,KAAI;KAAK;IAChB;GACN;EAER"}

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

@@ -0,0 +1,131 @@
+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");
+let markdown_it = require("markdown-it");
+markdown_it = require_runtime.__toESM(markdown_it);
+
+//#region src/react-renderer/components/content/Text.tsx
+function isHintedStyles(styles) {
+	if (typeof styles !== "object" || !styles || Array.isArray(styles)) return false;
+	return [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"caption",
+		"body"
+	].some((v) => v in styles);
+}
+/**
+* Markdown-it instance for rendering markdown text.
+* Uses synchronous import to ensure availability at first render (matches Lit renderer).
+*
+* Configuration matches Lit's markdown directive (uses MarkdownIt defaults):
+* - html: false (default) - Security: disable raw HTML
+* - linkify: false (default) - Don't auto-convert URLs/emails to links
+* - breaks: false (default) - Don't convert \n to <br>
+* - typographer: false (default) - Don't use smart quotes/dashes
+*/
+const markdownRenderer = new markdown_it.default();
+/**
+* Apply theme classes to markdown HTML elements.
+* Replaces default element tags with themed versions.
+*/
+function applyMarkdownTheme(html, markdownTheme) {
+	if (!markdownTheme) return html;
+	const replacements = [];
+	for (const [element, classes] of Object.entries(markdownTheme)) {
+		if (!classes || Array.isArray(classes) && classes.length === 0) continue;
+		const classString = Array.isArray(classes) ? classes.join(" ") : require_utils.classMapToString(classes);
+		if (!classString) continue;
+		const tagRegex = new RegExp(`<${element}(?=\\s|>|/>)`, "gi");
+		replacements.push([tagRegex, `<${element} class="${classString}"`]);
+	}
+	let result = html;
+	for (const [regex, replacement] of replacements) result = result.replace(regex, replacement);
+	return result;
+}
+/**
+* Text component - renders text content with markdown support.
+*
+* Structure mirrors Lit's Text component:
+*   <div class="a2ui-text">      ← :host equivalent
+*     <section class="...">      ← theme classes
+*       <h2>...</h2>             ← rendered markdown content
+*     </section>
+*   </div>
+*
+* Text is parsed as markdown and rendered as HTML (matches Lit renderer behavior).
+* Supports usageHint values: h1, h2, h3, h4, h5, caption, body
+*
+* Markdown features supported:
+* - **Bold** and *italic* text
+* - Lists (ordered and unordered)
+* - `inline code` and code blocks
+* - [Links](url) (auto-linkified URLs too)
+* - Blockquotes
+* - Horizontal rules
+*
+* Note: Raw HTML is disabled for security.
+*/
+const Text = (0, react.memo)(function Text({ node, surfaceId }) {
+	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const textValue = resolveString(props.text);
+	const usageHint = props.usageHint;
+	const classes = require_utils$1.mergeClassMaps(theme.components.Text.all, usageHint ? theme.components.Text[usageHint] : {});
+	const additionalStyles = (0, react.useMemo)(() => {
+		const textStyles = theme.additionalStyles?.Text;
+		if (!textStyles) return void 0;
+		if (isHintedStyles(textStyles)) return require_utils.stylesToObject(textStyles[usageHint ?? "body"]);
+		return require_utils.stylesToObject(textStyles);
+	}, [theme.additionalStyles?.Text, usageHint]);
+	const renderedContent = (0, react.useMemo)(() => {
+		if (textValue === null || textValue === void 0) return null;
+		let markdownText = textValue;
+		switch (usageHint) {
+			case "h1":
+				markdownText = `# ${markdownText}`;
+				break;
+			case "h2":
+				markdownText = `## ${markdownText}`;
+				break;
+			case "h3":
+				markdownText = `### ${markdownText}`;
+				break;
+			case "h4":
+				markdownText = `#### ${markdownText}`;
+				break;
+			case "h5":
+				markdownText = `##### ${markdownText}`;
+				break;
+			case "caption":
+				markdownText = `*${markdownText}*`;
+				break;
+			default: break;
+		}
+		return { __html: applyMarkdownTheme(markdownRenderer.render(markdownText), theme.markdown) };
+	}, [
+		textValue,
+		theme.markdown,
+		usageHint
+	]);
+	if (!renderedContent) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-text",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			className: require_utils.classMapToString(classes),
+			style: additionalStyles,
+			dangerouslySetInnerHTML: renderedContent
+		})
+	});
+});
+
+//#endregion
+exports.default = Text;
+//# sourceMappingURL=Text.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.cjs","names":["MarkdownIt","classMapToString","useA2UIComponent","mergeClassMaps","stylesToObject"],"sources":["../../../../src/react-renderer/components/content/Text.tsx"],"sourcesContent":["import { useMemo, 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\";\nimport MarkdownIt from \"markdown-it\";\n\ntype UsageHint = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"caption\" | \"body\";\n\ninterface HintedStyles {\n  h1: Record<string, string>;\n  h2: Record<string, string>;\n  h3: Record<string, string>;\n  h4: Record<string, string>;\n  h5: Record<string, string>;\n  body: Record<string, string>;\n  caption: Record<string, string>;\n}\n\nfunction isHintedStyles(styles: unknown): styles is HintedStyles {\n  if (typeof styles !== \"object\" || !styles || Array.isArray(styles))\n    return false;\n  const expected = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"caption\", \"body\"];\n  return expected.some((v) => v in styles);\n}\n\n/**\n * Markdown-it instance for rendering markdown text.\n * Uses synchronous import to ensure availability at first render (matches Lit renderer).\n *\n * Configuration matches Lit's markdown directive (uses MarkdownIt defaults):\n * - html: false (default) - Security: disable raw HTML\n * - linkify: false (default) - Don't auto-convert URLs/emails to links\n * - breaks: false (default) - Don't convert \\n to <br>\n * - typographer: false (default) - Don't use smart quotes/dashes\n */\nconst markdownRenderer = new MarkdownIt();\n\n/**\n * Apply theme classes to markdown HTML elements.\n * Replaces default element tags with themed versions.\n */\nfunction applyMarkdownTheme(\n  html: string,\n  markdownTheme: Types.Theme[\"markdown\"],\n): string {\n  if (!markdownTheme) return html;\n\n  // Map of element -> classes\n  const replacements: Array<[RegExp, string]> = [];\n\n  for (const [element, classes] of Object.entries(markdownTheme)) {\n    if (!classes || (Array.isArray(classes) && classes.length === 0)) continue;\n\n    const classString = Array.isArray(classes)\n      ? classes.join(\" \")\n      : classMapToString(classes);\n    if (!classString) continue;\n\n    // Create regex to match opening tags (handles self-closing and regular)\n    const tagRegex = new RegExp(`<${element}(?=\\\\s|>|/>)`, \"gi\");\n    replacements.push([tagRegex, `<${element} class=\"${classString}\"`]);\n  }\n\n  let result = html;\n  for (const [regex, replacement] of replacements) {\n    result = result.replace(regex, replacement);\n  }\n\n  return result;\n}\n\n/**\n * Text component - renders text content with markdown support.\n *\n * Structure mirrors Lit's Text component:\n *   <div class=\"a2ui-text\">      ← :host equivalent\n *     <section class=\"...\">      ← theme classes\n *       <h2>...</h2>             ← rendered markdown content\n *     </section>\n *   </div>\n *\n * Text is parsed as markdown and rendered as HTML (matches Lit renderer behavior).\n * Supports usageHint values: h1, h2, h3, h4, h5, caption, body\n *\n * Markdown features supported:\n * - **Bold** and *italic* text\n * - Lists (ordered and unordered)\n * - `inline code` and code blocks\n * - [Links](url) (auto-linkified URLs too)\n * - Blockquotes\n * - Horizontal rules\n *\n * Note: Raw HTML is disabled for security.\n */\nexport const Text = memo(function Text({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.TextNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const textValue = resolveString(props.text);\n  const usageHint = props.usageHint as UsageHint | undefined;\n\n  // Get merged classes (matches Lit's Styles.merge)\n  const classes = mergeClassMaps(\n    theme.components.Text.all,\n    usageHint ? theme.components.Text[usageHint] : {},\n  );\n\n  // Get additional styles based on usage hint\n  const additionalStyles = useMemo(() => {\n    const textStyles = theme.additionalStyles?.Text;\n    if (!textStyles) return undefined;\n\n    if (isHintedStyles(textStyles)) {\n      const hint = usageHint ?? \"body\";\n      return stylesToObject(textStyles[hint]);\n    }\n    return stylesToObject(textStyles as Record<string, string>);\n  }, [theme.additionalStyles?.Text, usageHint]);\n\n  // Render markdown content (matches Lit behavior - always uses markdown)\n  const renderedContent = useMemo(() => {\n    if (textValue === null || textValue === undefined) {\n      return null;\n    }\n\n    // Add markdown prefix based on usageHint (matches Lit behavior)\n    let markdownText = textValue;\n    switch (usageHint) {\n      case \"h1\":\n        markdownText = `# ${markdownText}`;\n        break;\n      case \"h2\":\n        markdownText = `## ${markdownText}`;\n        break;\n      case \"h3\":\n        markdownText = `### ${markdownText}`;\n        break;\n      case \"h4\":\n        markdownText = `#### ${markdownText}`;\n        break;\n      case \"h5\":\n        markdownText = `##### ${markdownText}`;\n        break;\n      case \"caption\":\n        markdownText = `*${markdownText}*`;\n        break;\n      default:\n        break; // Body - no prefix\n    }\n\n    const rawHtml = markdownRenderer.render(markdownText);\n    const themedHtml = applyMarkdownTheme(rawHtml, theme.markdown);\n    return { __html: themedHtml };\n  }, [textValue, theme.markdown, usageHint]);\n\n  if (!renderedContent) {\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-text\" style={hostStyle}>\n      <section\n        className={classMapToString(classes)}\n        style={additionalStyles}\n        dangerouslySetInnerHTML={renderedContent}\n      />\n    </div>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;AAuBA,SAAS,eAAe,QAAyC;AAC/D,KAAI,OAAO,WAAW,YAAY,CAAC,UAAU,MAAM,QAAQ,OAAO,CAChE,QAAO;AAET,QADiB;EAAC;EAAM;EAAM;EAAM;EAAM;EAAM;EAAW;EAAO,CAClD,MAAM,MAAM,KAAK,OAAO;;;;;;;;;;;;AAa1C,MAAM,mBAAmB,IAAIA,qBAAY;;;;;AAMzC,SAAS,mBACP,MACA,eACQ;AACR,KAAI,CAAC,cAAe,QAAO;CAG3B,MAAM,eAAwC,EAAE;AAEhD,MAAK,MAAM,CAAC,SAAS,YAAY,OAAO,QAAQ,cAAc,EAAE;AAC9D,MAAI,CAAC,WAAY,MAAM,QAAQ,QAAQ,IAAI,QAAQ,WAAW,EAAI;EAElE,MAAM,cAAc,MAAM,QAAQ,QAAQ,GACtC,QAAQ,KAAK,IAAI,GACjBC,+BAAiB,QAAQ;AAC7B,MAAI,CAAC,YAAa;EAGlB,MAAM,WAAW,IAAI,OAAO,IAAI,QAAQ,eAAe,KAAK;AAC5D,eAAa,KAAK,CAAC,UAAU,IAAI,QAAQ,UAAU,YAAY,GAAG,CAAC;;CAGrE,IAAI,SAAS;AACb,MAAK,MAAM,CAAC,OAAO,gBAAgB,aACjC,UAAS,OAAO,QAAQ,OAAO,YAAY;AAG7C,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,MAAa,uBAAY,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkBC,0CAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,YAAY,cAAc,MAAM,KAAK;CAC3C,MAAM,YAAY,MAAM;CAGxB,MAAM,UAAUC,+BACd,MAAM,WAAW,KAAK,KACtB,YAAY,MAAM,WAAW,KAAK,aAAa,EAAE,CAClD;CAGD,MAAM,4CAAiC;EACrC,MAAM,aAAa,MAAM,kBAAkB;AAC3C,MAAI,CAAC,WAAY,QAAO;AAExB,MAAI,eAAe,WAAW,CAE5B,QAAOC,6BAAe,WADT,aAAa,QACa;AAEzC,SAAOA,6BAAe,WAAqC;IAC1D,CAAC,MAAM,kBAAkB,MAAM,UAAU,CAAC;CAG7C,MAAM,2CAAgC;AACpC,MAAI,cAAc,QAAQ,cAAc,OACtC,QAAO;EAIT,IAAI,eAAe;AACnB,UAAQ,WAAR;GACE,KAAK;AACH,mBAAe,KAAK;AACpB;GACF,KAAK;AACH,mBAAe,MAAM;AACrB;GACF,KAAK;AACH,mBAAe,OAAO;AACtB;GACF,KAAK;AACH,mBAAe,QAAQ;AACvB;GACF,KAAK;AACH,mBAAe,SAAS;AACxB;GACF,KAAK;AACH,mBAAe,IAAI,aAAa;AAChC;GACF,QACE;;AAKJ,SAAO,EAAE,QADU,mBADH,iBAAiB,OAAO,aAAa,EACN,MAAM,SAAS,EACjC;IAC5B;EAAC;EAAW,MAAM;EAAU;EAAU,CAAC;AAE1C,KAAI,CAAC,gBACH,QAAO;AAST,QACE,2CAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWH,+BAAiB,QAAQ;GACpC,OAAO;GACP,yBAAyB;IACzB;GACE;EAER"}