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

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

@@ -0,0 +1,129 @@
+import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
+import { mergeClassMaps } from "../../lib/utils.mjs";
+import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import MarkdownIt from "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 MarkdownIt();
+/**
+* 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(" ") : 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 = memo(function Text({ node, surfaceId }) {
+	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const textValue = resolveString(props.text);
+	const usageHint = props.usageHint;
+	const classes = mergeClassMaps(theme.components.Text.all, usageHint ? theme.components.Text[usageHint] : {});
+	const additionalStyles = useMemo(() => {
+		const textStyles = theme.additionalStyles?.Text;
+		if (!textStyles) return void 0;
+		if (isHintedStyles(textStyles)) return stylesToObject(textStyles[usageHint ?? "body"]);
+		return stylesToObject(textStyles);
+	}, [theme.additionalStyles?.Text, usageHint]);
+	const renderedContent = 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__ */ jsx("div", {
+		className: "a2ui-text",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(classes),
+			style: additionalStyles,
+			dangerouslySetInnerHTML: renderedContent
+		})
+	});
+});
+
+//#endregion
+export { Text as default };
+//# sourceMappingURL=Text.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.mjs","names":[],"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,IAAI,YAAY;;;;;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,GACjB,iBAAiB,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,OAAO,KAAK,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,OAAO,kBAAkB,iBAAiB,MAAM,UAAU;CAClE,MAAM,QAAQ,KAAK;CAEnB,MAAM,YAAY,cAAc,MAAM,KAAK;CAC3C,MAAM,YAAY,MAAM;CAGxB,MAAM,UAAU,eACd,MAAM,WAAW,KAAK,KACtB,YAAY,MAAM,WAAW,KAAK,aAAa,EAAE,CAClD;CAGD,MAAM,mBAAmB,cAAc;EACrC,MAAM,aAAa,MAAM,kBAAkB;AAC3C,MAAI,CAAC,WAAY,QAAO;AAExB,MAAI,eAAe,WAAW,CAE5B,QAAO,eAAe,WADT,aAAa,QACa;AAEzC,SAAO,eAAe,WAAqC;IAC1D,CAAC,MAAM,kBAAkB,MAAM,UAAU,CAAC;CAG7C,MAAM,kBAAkB,cAAc;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,oBAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,QAAQ;GACpC,OAAO;GACP,yBAAyB;IACzB;GACE;EAER"}

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

@@ -0,0 +1,56 @@
+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/Video.tsx
+/**
+* Check if a URL is a YouTube URL and extract the video ID.
+*/
+function getYouTubeVideoId(url) {
+	for (const pattern of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\s?]+)/]) {
+		const match = url.match(pattern);
+		if (match && match.length > 1) return match[1];
+	}
+	return null;
+}
+/**
+* Video component - renders a video player.
+*
+* Supports regular video URLs and YouTube URLs (renders as embedded iframe).
+*/
+const Video = (0, react.memo)(function Video({ node, surfaceId }) {
+	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const url = resolveString(props.url);
+	if (!url) return null;
+	const youtubeId = getYouTubeVideoId(url);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-video",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			className: require_utils.classMapToString(theme.components.Video),
+			style: require_utils.stylesToObject(theme.additionalStyles?.Video),
+			children: youtubeId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+				src: `https://www.youtube.com/embed/${youtubeId}`,
+				title: "YouTube video player",
+				allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+				allowFullScreen: true,
+				style: {
+					border: "none",
+					width: "100%",
+					aspectRatio: "16/9"
+				}
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+				src: url,
+				controls: true
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = Video;
+//# sourceMappingURL=Video.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Video.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/content/Video.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 * Check if a URL is a YouTube URL and extract the video ID.\n */\nfunction getYouTubeVideoId(url: string): string | null {\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([^&\\s?]+)/,\n  ];\n  for (const pattern of patterns) {\n    const match = url.match(pattern);\n    if (match && match.length > 1) {\n      // Non-null assertion is safe here since we checked match.length > 1\n\n      return match[1]!;\n    }\n  }\n  return null;\n}\n\n/**\n * Video component - renders a video player.\n *\n * Supports regular video URLs and YouTube URLs (renders as embedded iframe).\n */\nexport const Video = memo(function Video({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.VideoNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const url = resolveString(props.url);\n\n  if (!url) {\n    return null;\n  }\n\n  const youtubeId = getYouTubeVideoId(url);\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-video\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Video)}\n        style={stylesToObject(theme.additionalStyles?.Video)}\n      >\n        {youtubeId ? (\n          <iframe\n            src={`https://www.youtube.com/embed/${youtubeId}`}\n            title=\"YouTube video player\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            style={{ border: \"none\", width: \"100%\", aspectRatio: \"16/9\" }}\n          />\n        ) : (\n          <video src={url} controls />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;AASA,SAAS,kBAAkB,KAA4B;AAIrD,MAAK,MAAM,WAHM,CACf,0EACD,EAC+B;EAC9B,MAAM,QAAQ,IAAI,MAAM,QAAQ;AAChC,MAAI,SAAS,MAAM,SAAS,EAG1B,QAAO,MAAM;;AAGjB,QAAO;;;;;;;AAQT,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;AAEpC,KAAI,CAAC,IACH,QAAO;CAGT,MAAM,YAAY,kBAAkB,IAAI;AAQxC,QACE,2CAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,MAAM;GACnD,OAAOC,6BAAe,MAAM,kBAAkB,MAAM;aAEnD,YACC,2CAAC;IACC,KAAK,iCAAiC;IACtC,OAAM;IACN,OAAM;IACN;IACA,OAAO;KAAE,QAAQ;KAAQ,OAAO;KAAQ,aAAa;KAAQ;KAC7D,GAEF,2CAAC;IAAM,KAAK;IAAK;KAAW;IAEtB;GACN;EAER"}

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

@@ -0,0 +1,55 @@
+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/Video.tsx
+/**
+* Check if a URL is a YouTube URL and extract the video ID.
+*/
+function getYouTubeVideoId(url) {
+	for (const pattern of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\s?]+)/]) {
+		const match = url.match(pattern);
+		if (match && match.length > 1) return match[1];
+	}
+	return null;
+}
+/**
+* Video component - renders a video player.
+*
+* Supports regular video URLs and YouTube URLs (renders as embedded iframe).
+*/
+const Video = memo(function Video({ node, surfaceId }) {
+	const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const url = resolveString(props.url);
+	if (!url) return null;
+	const youtubeId = getYouTubeVideoId(url);
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-video",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(theme.components.Video),
+			style: stylesToObject(theme.additionalStyles?.Video),
+			children: youtubeId ? /* @__PURE__ */ jsx("iframe", {
+				src: `https://www.youtube.com/embed/${youtubeId}`,
+				title: "YouTube video player",
+				allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+				allowFullScreen: true,
+				style: {
+					border: "none",
+					width: "100%",
+					aspectRatio: "16/9"
+				}
+			}) : /* @__PURE__ */ jsx("video", {
+				src: url,
+				controls: true
+			})
+		})
+	});
+});
+
+//#endregion
+export { Video as default };
+//# sourceMappingURL=Video.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Video.mjs","names":[],"sources":["../../../../src/react-renderer/components/content/Video.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 * Check if a URL is a YouTube URL and extract the video ID.\n */\nfunction getYouTubeVideoId(url: string): string | null {\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([^&\\s?]+)/,\n  ];\n  for (const pattern of patterns) {\n    const match = url.match(pattern);\n    if (match && match.length > 1) {\n      // Non-null assertion is safe here since we checked match.length > 1\n\n      return match[1]!;\n    }\n  }\n  return null;\n}\n\n/**\n * Video component - renders a video player.\n *\n * Supports regular video URLs and YouTube URLs (renders as embedded iframe).\n */\nexport const Video = memo(function Video({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.VideoNode>) {\n  const { theme, resolveString } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const url = resolveString(props.url);\n\n  if (!url) {\n    return null;\n  }\n\n  const youtubeId = getYouTubeVideoId(url);\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-video\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Video)}\n        style={stylesToObject(theme.additionalStyles?.Video)}\n      >\n        {youtubeId ? (\n          <iframe\n            src={`https://www.youtube.com/embed/${youtubeId}`}\n            title=\"YouTube video player\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            style={{ border: \"none\", width: \"100%\", aspectRatio: \"16/9\" }}\n          />\n        ) : (\n          <video src={url} controls />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default Video;\n"],"mappings":";;;;;;;;;;AASA,SAAS,kBAAkB,KAA4B;AAIrD,MAAK,MAAM,WAHM,CACf,0EACD,EAC+B;EAC9B,MAAM,QAAQ,IAAI,MAAM,QAAQ;AAChC,MAAI,SAAS,MAAM,SAAS,EAG1B,QAAO,MAAM;;AAGjB,QAAO;;;;;;;AAQT,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;AAEpC,KAAI,CAAC,IACH,QAAO;CAGT,MAAM,YAAY,kBAAkB,IAAI;AAQxC,QACE,oBAAC;EAAI,WAAU;EAAa,OAL5B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,MAAM;GACnD,OAAO,eAAe,MAAM,kBAAkB,MAAM;aAEnD,YACC,oBAAC;IACC,KAAK,iCAAiC;IACtC,OAAM;IACN,OAAM;IACN;IACA,OAAO;KAAE,QAAQ;KAAQ,OAAO;KAAQ,aAAa;KAAQ;KAC7D,GAEF,oBAAC;IAAM,KAAK;IAAK;KAAW;IAEtB;GACN;EAER"}

package/dist/react-renderer/components/interactive/Button.cjs

@@ -0,0 +1,39 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_ComponentNode = require('../../core/ComponentNode.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/interactive/Button.tsx
+/**
+* Button component - a clickable element that triggers an action.
+*
+* Contains a child component (usually Text or Icon) and dispatches
+* a user action when clicked.
+*/
+const Button = (0, react.memo)(function Button({ node, surfaceId }) {
+	const { theme, sendAction } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const handleClick = (0, react.useCallback)(() => {
+		if (props.action) sendAction(props.action);
+	}, [props.action, sendAction]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-button",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: require_utils.classMapToString(theme.components.Button),
+			style: require_utils.stylesToObject(theme.additionalStyles?.Button),
+			onClick: handleClick,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+				node: props.child,
+				surfaceId
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = Button;
+//# sourceMappingURL=Button.cjs.map

package/dist/react-renderer/components/interactive/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"sourcesContent":["import { useCallback, 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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Button component - a clickable element that triggers an action.\n *\n * Contains a child component (usually Text or Icon) and dispatches\n * a user action when clicked.\n */\nexport const Button = memo(function Button({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ButtonNode>) {\n  const { theme, sendAction } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const handleClick = useCallback(() => {\n    if (props.action) {\n      sendAction(props.action);\n    }\n  }, [props.action, sendAction]);\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-button\" style={hostStyle}>\n      <button\n        className={classMapToString(theme.components.Button)}\n        style={stylesToObject(theme.additionalStyles?.Button)}\n        onClick={handleClick}\n      >\n        <ComponentNode node={props.child} surfaceId={surfaceId} />\n      </button>\n    </div>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,yBAAc,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAeA,0CAAiB,MAAM,UAAU;CAC/D,MAAM,QAAQ,KAAK;CAEnB,MAAM,2CAAgC;AACpC,MAAI,MAAM,OACR,YAAW,MAAM,OAAO;IAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;AAQ9B,QACE,2CAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,OAAO;GACpD,OAAOC,6BAAe,MAAM,kBAAkB,OAAO;GACrD,SAAS;aAET,2CAACC;IAAc,MAAM,MAAM;IAAkB;KAAa;IACnD;GACL;EAER"}

package/dist/react-renderer/components/interactive/Button.mjs

@@ -0,0 +1,38 @@
+import ComponentNode from "../../core/ComponentNode.mjs";
+import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
+import "../../lib/utils.mjs";
+import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
+import { memo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/interactive/Button.tsx
+/**
+* Button component - a clickable element that triggers an action.
+*
+* Contains a child component (usually Text or Icon) and dispatches
+* a user action when clicked.
+*/
+const Button = memo(function Button({ node, surfaceId }) {
+	const { theme, sendAction } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const handleClick = useCallback(() => {
+		if (props.action) sendAction(props.action);
+	}, [props.action, sendAction]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-button",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsx("button", {
+			className: classMapToString(theme.components.Button),
+			style: stylesToObject(theme.additionalStyles?.Button),
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx(ComponentNode, {
+				node: props.child,
+				surfaceId
+			})
+		})
+	});
+});
+
+//#endregion
+export { Button as default };
+//# sourceMappingURL=Button.mjs.map

package/dist/react-renderer/components/interactive/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"sourcesContent":["import { useCallback, 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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Button component - a clickable element that triggers an action.\n *\n * Contains a child component (usually Text or Icon) and dispatches\n * a user action when clicked.\n */\nexport const Button = memo(function Button({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ButtonNode>) {\n  const { theme, sendAction } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const handleClick = useCallback(() => {\n    if (props.action) {\n      sendAction(props.action);\n    }\n  }, [props.action, sendAction]);\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-button\" style={hostStyle}>\n      <button\n        className={classMapToString(theme.components.Button)}\n        style={stylesToObject(theme.additionalStyles?.Button)}\n        onClick={handleClick}\n      >\n        <ComponentNode node={props.child} surfaceId={surfaceId} />\n      </button>\n    </div>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,SAAS,KAAK,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAe,iBAAiB,MAAM,UAAU;CAC/D,MAAM,QAAQ,KAAK;CAEnB,MAAM,cAAc,kBAAkB;AACpC,MAAI,MAAM,OACR,YAAW,MAAM,OAAO;IAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;AAQ9B,QACE,oBAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,OAAO;GACpD,OAAO,eAAe,MAAM,kBAAkB,OAAO;GACrD,SAAS;aAET,oBAAC;IAAc,MAAM,MAAM;IAAkB;KAAa;IACnD;GACL;EAER"}

package/dist/react-renderer/components/interactive/CheckBox.cjs

@@ -0,0 +1,58 @@
+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/interactive/CheckBox.tsx
+/**
+* CheckBox component - a boolean toggle with a label.
+*
+* Supports two-way data binding for the checked state.
+*/
+const CheckBox = (0, react.memo)(function CheckBox({ node, surfaceId }) {
+	const { theme, resolveString, resolveBoolean, setValue, getValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const id = (0, react.useId)();
+	const label = resolveString(props.label);
+	const valuePath = props.value?.path;
+	const [checked, setChecked] = (0, react.useState)(resolveBoolean(props.value) ?? false);
+	(0, react.useEffect)(() => {
+		if (valuePath) {
+			const externalValue = getValue(valuePath);
+			if (externalValue !== null && Boolean(externalValue) !== checked) setChecked(Boolean(externalValue));
+		}
+	}, [valuePath, getValue]);
+	(0, react.useEffect)(() => {
+		if (props.value?.literalBoolean !== void 0) setChecked(props.value.literalBoolean);
+	}, [props.value?.literalBoolean]);
+	const handleChange = (0, react.useCallback)((e) => {
+		const newValue = e.target.checked;
+		setChecked(newValue);
+		if (valuePath) setValue(valuePath, newValue);
+	}, [valuePath, setValue]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-checkbox",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: require_utils.classMapToString(theme.components.CheckBox.container),
+			style: require_utils.stylesToObject(theme.additionalStyles?.CheckBox),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				id,
+				checked,
+				onChange: handleChange,
+				className: require_utils.classMapToString(theme.components.CheckBox.element)
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: require_utils.classMapToString(theme.components.CheckBox.label),
+				children: label
+			})]
+		})
+	});
+});
+
+//#endregion
+exports.default = CheckBox;
+//# sourceMappingURL=CheckBox.cjs.map

package/dist/react-renderer/components/interactive/CheckBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/interactive/CheckBox.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, 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 * CheckBox component - a boolean toggle with a label.\n *\n * Supports two-way data binding for the checked state.\n */\nexport const CheckBox = memo(function CheckBox({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CheckboxNode>) {\n  const { theme, resolveString, resolveBoolean, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const valuePath = props.value?.path;\n  const initialChecked = resolveBoolean(props.value) ?? false;\n\n  const [checked, setChecked] = useState(initialChecked);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Boolean(externalValue) !== checked) {\n        setChecked(Boolean(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync when literal value changes from props (server-driven updates via surfaceUpdate)\n  useEffect(() => {\n    if (props.value?.literalBoolean !== undefined) {\n      setChecked(props.value.literalBoolean);\n    }\n  }, [props.value?.literalBoolean]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.checked;\n      setChecked(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Structure mirrors Lit's CheckBox component:\n  //   <div class=\"a2ui-checkbox\">  ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <input>...</input>\n  //       <label>...</label>\n  //     </section>\n  //   </div>\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-checkbox\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.CheckBox.container)}\n        style={stylesToObject(theme.additionalStyles?.CheckBox)}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          checked={checked}\n          onChange={handleChange}\n          className={classMapToString(theme.components.CheckBox.element)}\n        />\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.CheckBox.label)}\n          >\n            {label}\n          </label>\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default CheckBox;\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,2BAAgB,SAAS,SAAS,EAC7C,MACA,aACyC;CACzC,MAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,aACtDA,0CAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,YAAY,MAAM,OAAO;CAG/B,MAAM,CAAC,SAAS,kCAFO,eAAe,MAAM,MAAM,IAAI,MAEA;AAGtD,4BAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,QAAQ,cAAc,KAAK,QACvD,YAAW,QAAQ,cAAc,CAAC;;IAGrC,CAAC,WAAW,SAAS,CAAC;AAGzB,4BAAgB;AACd,MAAI,MAAM,OAAO,mBAAmB,OAClC,YAAW,MAAM,MAAM,eAAe;IAEvC,CAAC,MAAM,OAAO,eAAe,CAAC;CAEjC,MAAM,uCACH,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,aAAW,SAAS;AAGpB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;AAgBD,QACE,2CAAC;EAAI,WAAU;EAAgB,OAL/B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,SAAS,UAAU;GAChE,OAAOC,6BAAe,MAAM,kBAAkB,SAAS;cAEvD,2CAAC;IACC,MAAK;IACD;IACK;IACT,UAAU;IACV,WAAWD,+BAAiB,MAAM,WAAW,SAAS,QAAQ;KAC9D,EACD,SACC,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,SAAS,MAAM;cAE3D;KACK;IAEF;GACN;EAER"}

package/dist/react-renderer/components/interactive/CheckBox.mjs

@@ -0,0 +1,57 @@
+import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
+import "../../lib/utils.mjs";
+import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
+import { memo, useCallback, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/interactive/CheckBox.tsx
+/**
+* CheckBox component - a boolean toggle with a label.
+*
+* Supports two-way data binding for the checked state.
+*/
+const CheckBox = memo(function CheckBox({ node, surfaceId }) {
+	const { theme, resolveString, resolveBoolean, setValue, getValue } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const id = useId();
+	const label = resolveString(props.label);
+	const valuePath = props.value?.path;
+	const [checked, setChecked] = useState(resolveBoolean(props.value) ?? false);
+	useEffect(() => {
+		if (valuePath) {
+			const externalValue = getValue(valuePath);
+			if (externalValue !== null && Boolean(externalValue) !== checked) setChecked(Boolean(externalValue));
+		}
+	}, [valuePath, getValue]);
+	useEffect(() => {
+		if (props.value?.literalBoolean !== void 0) setChecked(props.value.literalBoolean);
+	}, [props.value?.literalBoolean]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.checked;
+		setChecked(newValue);
+		if (valuePath) setValue(valuePath, newValue);
+	}, [valuePath, setValue]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-checkbox",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsxs("section", {
+			className: classMapToString(theme.components.CheckBox.container),
+			style: stylesToObject(theme.additionalStyles?.CheckBox),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				id,
+				checked,
+				onChange: handleChange,
+				className: classMapToString(theme.components.CheckBox.element)
+			}), label && /* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: classMapToString(theme.components.CheckBox.label),
+				children: label
+			})]
+		})
+	});
+});
+
+//#endregion
+export { CheckBox as default };
+//# sourceMappingURL=CheckBox.mjs.map

package/dist/react-renderer/components/interactive/CheckBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/CheckBox.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, 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 * CheckBox component - a boolean toggle with a label.\n *\n * Supports two-way data binding for the checked state.\n */\nexport const CheckBox = memo(function CheckBox({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CheckboxNode>) {\n  const { theme, resolveString, resolveBoolean, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const valuePath = props.value?.path;\n  const initialChecked = resolveBoolean(props.value) ?? false;\n\n  const [checked, setChecked] = useState(initialChecked);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Boolean(externalValue) !== checked) {\n        setChecked(Boolean(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync when literal value changes from props (server-driven updates via surfaceUpdate)\n  useEffect(() => {\n    if (props.value?.literalBoolean !== undefined) {\n      setChecked(props.value.literalBoolean);\n    }\n  }, [props.value?.literalBoolean]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.checked;\n      setChecked(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Structure mirrors Lit's CheckBox component:\n  //   <div class=\"a2ui-checkbox\">  ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <input>...</input>\n  //       <label>...</label>\n  //     </section>\n  //   </div>\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-checkbox\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.CheckBox.container)}\n        style={stylesToObject(theme.additionalStyles?.CheckBox)}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          checked={checked}\n          onChange={handleChange}\n          className={classMapToString(theme.components.CheckBox.element)}\n        />\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.CheckBox.label)}\n          >\n            {label}\n          </label>\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default CheckBox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,KAAK,SAAS,SAAS,EAC7C,MACA,aACyC;CACzC,MAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,aACtD,iBAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,YAAY,MAAM,OAAO;CAG/B,MAAM,CAAC,SAAS,cAAc,SAFP,eAAe,MAAM,MAAM,IAAI,MAEA;AAGtD,iBAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,QAAQ,cAAc,KAAK,QACvD,YAAW,QAAQ,cAAc,CAAC;;IAGrC,CAAC,WAAW,SAAS,CAAC;AAGzB,iBAAgB;AACd,MAAI,MAAM,OAAO,mBAAmB,OAClC,YAAW,MAAM,MAAM,eAAe;IAEvC,CAAC,MAAM,OAAO,eAAe,CAAC;CAEjC,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,aAAW,SAAS;AAGpB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;AAgBD,QACE,oBAAC;EAAI,WAAU;EAAgB,OAL/B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,SAAS,UAAU;GAChE,OAAO,eAAe,MAAM,kBAAkB,SAAS;cAEvD,oBAAC;IACC,MAAK;IACD;IACK;IACT,UAAU;IACV,WAAW,iBAAiB,MAAM,WAAW,SAAS,QAAQ;KAC9D,EACD,SACC,oBAAC;IACC,SAAS;IACT,WAAW,iBAAiB,MAAM,WAAW,SAAS,MAAM;cAE3D;KACK;IAEF;GACN;EAER"}

package/dist/react-renderer/components/interactive/DateTimeInput.cjs

@@ -0,0 +1,65 @@
+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/interactive/DateTimeInput.tsx
+/**
+* DateTimeInput component - a date and/or time picker.
+*
+* Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
+*/
+const DateTimeInput = (0, react.memo)(function DateTimeInput({ node, surfaceId }) {
+	const { theme, resolveString, setValue, getValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const id = (0, react.useId)();
+	const valuePath = props.value?.path;
+	const initialValue = resolveString(props.value) ?? "";
+	const enableDate = props.enableDate ?? true;
+	const enableTime = props.enableTime ?? false;
+	const [value, setLocalValue] = (0, react.useState)(initialValue);
+	(0, react.useEffect)(() => {
+		if (valuePath) {
+			const externalValue = getValue(valuePath);
+			if (externalValue !== null && String(externalValue) !== value) setLocalValue(String(externalValue));
+		}
+	}, [valuePath, getValue]);
+	const handleChange = (0, react.useCallback)((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		if (valuePath) setValue(valuePath, newValue);
+	}, [valuePath, setValue]);
+	let inputType = "date";
+	if (enableDate && enableTime) inputType = "datetime-local";
+	else if (enableTime && !enableDate) inputType = "time";
+	const getPlaceholderText = () => {
+		if (enableDate && enableTime) return "Date & Time";
+		else if (enableTime) return "Time";
+		return "Date";
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-datetime-input",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: require_utils.classMapToString(theme.components.DateTimeInput.container),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: require_utils.classMapToString(theme.components.DateTimeInput.label),
+				children: getPlaceholderText()
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: inputType,
+				id,
+				value,
+				onChange: handleChange,
+				className: require_utils.classMapToString(theme.components.DateTimeInput.element),
+				style: require_utils.stylesToObject(theme.additionalStyles?.DateTimeInput)
+			})]
+		})
+	});
+});
+
+//#endregion
+exports.default = DateTimeInput;
+//# sourceMappingURL=DateTimeInput.cjs.map

package/dist/react-renderer/components/interactive/DateTimeInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/interactive/DateTimeInput.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, 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 * DateTimeInput component - a date and/or time picker.\n *\n * Supports enabling date, time, or both. Uses native HTML5 date/time inputs.\n */\nexport const DateTimeInput = memo(function DateTimeInput({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.DateTimeInputNode>) {\n  const { theme, resolveString, setValue, getValue } = useA2UIComponent(\n    node,\n    surfaceId,\n  );\n  const props = node.properties;\n  const id = useId();\n\n  const valuePath = props.value?.path;\n  const initialValue = resolveString(props.value) ?? \"\";\n  const enableDate = props.enableDate ?? true;\n  const enableTime = props.enableTime ?? false;\n\n  const [value, setLocalValue] = useState(initialValue);\n\n  // Sync with external data model changes\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && String(externalValue) !== value) {\n        setLocalValue(String(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalValue(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Determine input type based on enableDate and enableTime\n  let inputType: \"date\" | \"time\" | \"datetime-local\" = \"date\";\n  if (enableDate && enableTime) {\n    inputType = \"datetime-local\";\n  } else if (enableTime && !enableDate) {\n    inputType = \"time\";\n  }\n\n  // Get placeholder text to match Lit renderer\n  const getPlaceholderText = () => {\n    if (enableDate && enableTime) {\n      return \"Date & Time\";\n    } else if (enableTime) {\n      return \"Time\";\n    }\n    return \"Date\";\n  };\n\n  // Structure mirrors Lit's DateTimeInput component:\n  //   <div class=\"a2ui-datetime-input\">  ← :host equivalent\n  //     <section class=\"...\">            ← container theme classes\n  //       <label>                        ← label\n  //       <input>                        ← input element\n  //     </section>\n  //   </div>\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-datetime-input\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.DateTimeInput.container)}\n      >\n        <label\n          htmlFor={id}\n          className={classMapToString(theme.components.DateTimeInput.label)}\n        >\n          {getPlaceholderText()}\n        </label>\n        <input\n          type={inputType}\n          id={id}\n          value={value}\n          onChange={handleChange}\n          className={classMapToString(theme.components.DateTimeInput.element)}\n          style={stylesToObject(theme.additionalStyles?.DateTimeInput)}\n        />\n      </section>\n    </div>\n  );\n});\n\nexport default DateTimeInput;\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,gCAAqB,SAAS,cAAc,EACvD,MACA,aAC8C;CAC9C,MAAM,EAAE,OAAO,eAAe,UAAU,aAAaA,0CACnD,MACA,UACD;CACD,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,cAAc,MAAM,MAAM,IAAI;CACnD,MAAM,aAAa,MAAM,cAAc;CACvC,MAAM,aAAa,MAAM,cAAc;CAEvC,MAAM,CAAC,OAAO,qCAA0B,aAAa;AAGrD,4BAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,OAAO,cAAc,KAAK,MACtD,eAAc,OAAO,cAAc,CAAC;;IAGvC,CAAC,WAAW,SAAS,CAAC;CAEzB,MAAM,uCACH,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,gBAAc,SAAS;AAGvB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;CAGD,IAAI,YAAgD;AACpD,KAAI,cAAc,WAChB,aAAY;UACH,cAAc,CAAC,WACxB,aAAY;CAId,MAAM,2BAA2B;AAC/B,MAAI,cAAc,WAChB,QAAO;WACE,WACT,QAAO;AAET,SAAO;;AAiBT,QACE,2CAAC;EAAI,WAAU;EAAsB,OALrC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,cAAc,UAAU;cAErE,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,cAAc,MAAM;cAEhE,oBAAoB;KACf,EACR,2CAAC;IACC,MAAM;IACF;IACG;IACP,UAAU;IACV,WAAWA,+BAAiB,MAAM,WAAW,cAAc,QAAQ;IACnE,OAAOC,6BAAe,MAAM,kBAAkB,cAAc;KAC5D;IACM;GACN;EAER"}