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

package/dist/react-renderer/components/layout/Card.mjs

@@ -0,0 +1,45 @@
+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 } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/Card.tsx
+/**
+* Card component - a container that visually groups content.
+*
+* Structure mirrors Lit's Card component:
+*   <div class="a2ui-card">      ← :host equivalent
+*     <section class="...">      ← theme classes (border, padding, background)
+*       {children}               ← ::slotted(*) equivalent
+*     </section>
+*   </div>
+*
+* All styles come from componentSpecificStyles CSS, no inline styles needed.
+*/
+const Card = memo(function Card({ node, surfaceId }) {
+	const { theme } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const rawChildren = props.children ?? (props.child ? [props.child] : []);
+	const children = Array.isArray(rawChildren) ? rawChildren : [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-card",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(theme.components.Card),
+			style: stylesToObject(theme.additionalStyles?.Card),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ jsx(ComponentNode, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+export { Card as default };
+//# sourceMappingURL=Card.mjs.map

package/dist/react-renderer/components/layout/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/Card.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Card component - a container that visually groups content.\n *\n * Structure mirrors Lit's Card component:\n *   <div class=\"a2ui-card\">      ← :host equivalent\n *     <section class=\"...\">      ← theme classes (border, padding, background)\n *       {children}               ← ::slotted(*) equivalent\n *     </section>\n *   </div>\n *\n * All styles come from componentSpecificStyles CSS, no inline styles needed.\n */\nexport const Card = memo(function Card({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CardNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Card can have either a single child or multiple children\n  const rawChildren = props.children ?? (props.child ? [props.child] : []);\n  const children = Array.isArray(rawChildren) ? rawChildren : [];\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-card\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Card)}\n        style={stylesToObject(theme.additionalStyles?.Card)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,OAAO,KAAK,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,cAAc,MAAM,aAAa,MAAM,QAAQ,CAAC,MAAM,MAAM,GAAG,EAAE;CACvE,MAAM,WAAW,MAAM,QAAQ,YAAY,GAAG,cAAc,EAAE;AAQ9D,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;aAElD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,oBAAC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Column.cjs

@@ -0,0 +1,43 @@
+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/layout/Column.tsx
+/**
+* Column component - arranges children vertically using flexbox.
+*
+* Supports distribution (justify-content) and alignment (align-items) properties.
+*/
+const Column = (0, react.memo)(function Column({ node, surfaceId }) {
+	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const alignment = props.alignment ?? "stretch";
+	const distribution = props.distribution ?? "start";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-column",
+		"data-alignment": alignment,
+		"data-distribution": distribution,
+		style: hostStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			className: require_utils.classMapToString(theme.components.Column),
+			style: require_utils.stylesToObject(theme.additionalStyles?.Column),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = Column;
+//# sourceMappingURL=Column.cjs.map

package/dist/react-renderer/components/layout/Column.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/layout/Column.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Column component - arranges children vertically using flexbox.\n *\n * Supports distribution (justify-content) and alignment (align-items) properties.\n */\nexport const Column = memo(function Column({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ColumnNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default values\n  const alignment = props.alignment ?? \"stretch\";\n  const distribution = props.distribution ?? \"start\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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\n      className=\"a2ui-column\"\n      data-alignment={alignment}\n      data-distribution={distribution}\n      style={hostStyle}\n    >\n      <section\n        className={classMapToString(theme.components.Column)}\n        style={stylesToObject(theme.additionalStyles?.Column)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Column;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,yBAAc,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,2CAAC;EACC,WAAU;EACV,kBAAgB;EAChB,qBAAmB;EACnB,OAAO;YAEP,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,OAAO;GACpD,OAAOC,6BAAe,MAAM,kBAAkB,OAAO;aAEpD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,2CAACC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Column.mjs

@@ -0,0 +1,42 @@
+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 } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/Column.tsx
+/**
+* Column component - arranges children vertically using flexbox.
+*
+* Supports distribution (justify-content) and alignment (align-items) properties.
+*/
+const Column = memo(function Column({ node, surfaceId }) {
+	const { theme } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const alignment = props.alignment ?? "stretch";
+	const distribution = props.distribution ?? "start";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-column",
+		"data-alignment": alignment,
+		"data-distribution": distribution,
+		style: hostStyle,
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(theme.components.Column),
+			style: stylesToObject(theme.additionalStyles?.Column),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ jsx(ComponentNode, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+export { Column as default };
+//# sourceMappingURL=Column.mjs.map

package/dist/react-renderer/components/layout/Column.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/Column.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Column component - arranges children vertically using flexbox.\n *\n * Supports distribution (justify-content) and alignment (align-items) properties.\n */\nexport const Column = memo(function Column({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ColumnNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default values\n  const alignment = props.alignment ?? \"stretch\";\n  const distribution = props.distribution ?? \"start\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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\n      className=\"a2ui-column\"\n      data-alignment={alignment}\n      data-distribution={distribution}\n      style={hostStyle}\n    >\n      <section\n        className={classMapToString(theme.components.Column)}\n        style={stylesToObject(theme.additionalStyles?.Column)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Column;\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,SAAS,KAAK,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,oBAAC;EACC,WAAU;EACV,kBAAgB;EAChB,qBAAmB;EACnB,OAAO;YAEP,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,OAAO;GACpD,OAAO,eAAe,MAAM,kBAAkB,OAAO;aAEpD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,oBAAC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/List.cjs

@@ -0,0 +1,41 @@
+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/layout/List.tsx
+/**
+* List component - renders a scrollable list of items.
+*
+* Supports direction (vertical/horizontal) properties.
+*/
+const List = (0, react.memo)(function List({ node, surfaceId }) {
+	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const direction = props.direction ?? "vertical";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-list",
+		"data-direction": direction,
+		style: hostStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			className: require_utils.classMapToString(theme.components.List),
+			style: require_utils.stylesToObject(theme.additionalStyles?.List),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = List;
+//# sourceMappingURL=List.cjs.map

package/dist/react-renderer/components/layout/List.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/layout/List.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * List component - renders a scrollable list of items.\n *\n * Supports direction (vertical/horizontal) properties.\n */\nexport const List = memo(function List({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ListNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default value\n  const direction = props.direction ?? \"vertical\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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-list\" data-direction={direction} style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.List)}\n        style={stylesToObject(theme.additionalStyles?.List)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default List;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAY,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,2CAAC;EAAI,WAAU;EAAY,kBAAgB;EAAW,OAAO;YAC3D,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,KAAK;GAClD,OAAOC,6BAAe,MAAM,kBAAkB,KAAK;aAElD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,2CAACC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/List.mjs

@@ -0,0 +1,40 @@
+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 } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/List.tsx
+/**
+* List component - renders a scrollable list of items.
+*
+* Supports direction (vertical/horizontal) properties.
+*/
+const List = memo(function List({ node, surfaceId }) {
+	const { theme } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const direction = props.direction ?? "vertical";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-list",
+		"data-direction": direction,
+		style: hostStyle,
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(theme.components.List),
+			style: stylesToObject(theme.additionalStyles?.List),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ jsx(ComponentNode, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+export { List as default };
+//# sourceMappingURL=List.mjs.map

package/dist/react-renderer/components/layout/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/List.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * List component - renders a scrollable list of items.\n *\n * Supports direction (vertical/horizontal) properties.\n */\nexport const List = memo(function List({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ListNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default value\n  const direction = props.direction ?? \"vertical\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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-list\" data-direction={direction} style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.List)}\n        style={stylesToObject(theme.additionalStyles?.List)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default List;\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,OAAO,KAAK,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,oBAAC;EAAI,WAAU;EAAY,kBAAgB;EAAW,OAAO;YAC3D,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,KAAK;GAClD,OAAO,eAAe,MAAM,kBAAkB,KAAK;aAElD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,oBAAC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Modal.cjs

@@ -0,0 +1,92 @@
+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/layout/Modal.tsx
+/**
+* Modal component - displays content in a dialog overlay.
+*
+* Matches Lit's rendering approach:
+* - When closed: renders section with entry point child
+* - When open: renders dialog with content child (entry point is replaced)
+*
+* The dialog is rendered in place (no portal) so it stays inside .a2ui-surface
+* and CSS selectors work correctly. showModal() handles the top-layer overlay.
+*/
+const Modal = (0, react.memo)(function Modal({ node, surfaceId }) {
+	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const dialogRef = (0, react.useRef)(null);
+	const openModal = (0, react.useCallback)(() => {
+		setIsOpen(true);
+	}, []);
+	const closeModal = (0, react.useCallback)(() => {
+		setIsOpen(false);
+	}, []);
+	(0, react.useEffect)(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (isOpen && !dialog.open) dialog.showModal();
+		const handleClose = () => {
+			setIsOpen(false);
+		};
+		dialog.addEventListener("close", handleClose);
+		return () => dialog.removeEventListener("close", handleClose);
+	}, [isOpen]);
+	const handleBackdropClick = (0, react.useCallback)((e) => {
+		if (e.target === e.currentTarget) closeModal();
+	}, [closeModal]);
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Escape") closeModal();
+	}, [closeModal]);
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	if (!isOpen) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-modal",
+		style: hostStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			onClick: openModal,
+			style: { cursor: "pointer" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+				node: props.entryPointChild,
+				surfaceId
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-modal",
+		style: hostStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+			ref: dialogRef,
+			className: require_utils.classMapToString(theme.components.Modal.backdrop),
+			onClick: handleBackdropClick,
+			onKeyDown: handleKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: require_utils.classMapToString(theme.components.Modal.element),
+				style: require_utils.stylesToObject(theme.additionalStyles?.Modal),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					id: "controls",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: closeModal,
+						"aria-label": "Close modal",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "g-icon",
+							children: "close"
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+					node: props.contentChild,
+					surfaceId
+				})]
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = Modal;
+//# sourceMappingURL=Modal.cjs.map

package/dist/react-renderer/components/layout/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","names":["useA2UIComponent","ComponentNode","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/layout/Modal.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useEffect, 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 * Modal component - displays content in a dialog overlay.\n *\n * Matches Lit's rendering approach:\n * - When closed: renders section with entry point child\n * - When open: renders dialog with content child (entry point is replaced)\n *\n * The dialog is rendered in place (no portal) so it stays inside .a2ui-surface\n * and CSS selectors work correctly. showModal() handles the top-layer overlay.\n */\nexport const Modal = memo(function Modal({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ModalNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const dialogRef = useRef<HTMLDialogElement>(null);\n\n  const openModal = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  const closeModal = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Show dialog when isOpen becomes true, and sync state when dialog closes (e.g., via Escape)\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal();\n    }\n\n    // Listen for native close event (triggered by Escape key)\n    const handleClose = () => {\n      setIsOpen(false);\n    };\n    dialog.addEventListener(\"close\", handleClose);\n    return () => dialog.removeEventListener(\"close\", handleClose);\n  }, [isOpen]);\n\n  // Handle backdrop clicks (only close if clicking directly on dialog, not its content)\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      if (e.target === e.currentTarget) {\n        closeModal();\n      }\n    },\n    [closeModal],\n  );\n\n  // Handle Escape key (for jsdom test compatibility - real browsers use native dialog behavior)\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDialogElement>) => {\n      if (e.key === \"Escape\") {\n        closeModal();\n      }\n    },\n    [closeModal],\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  // Match Lit's render approach: closed shows section with entry, open shows dialog\n  if (!isOpen) {\n    return (\n      <div className=\"a2ui-modal\" style={hostStyle}>\n        <section onClick={openModal} style={{ cursor: \"pointer\" }}>\n          <ComponentNode node={props.entryPointChild} surfaceId={surfaceId} />\n        </section>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"a2ui-modal\" style={hostStyle}>\n      <dialog\n        ref={dialogRef}\n        className={classMapToString(theme.components.Modal.backdrop)}\n        onClick={handleBackdropClick}\n        onKeyDown={handleKeyDown}\n      >\n        <section\n          className={classMapToString(theme.components.Modal.element)}\n          style={stylesToObject(theme.additionalStyles?.Modal)}\n        >\n          <div id=\"controls\">\n            <button onClick={closeModal} aria-label=\"Close modal\">\n              <span className=\"g-icon\">close</span>\n            </button>\n          </div>\n          <ComponentNode node={props.contentChild} surfaceId={surfaceId} />\n        </section>\n      </dialog>\n    </div>\n  );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAa,wBAAa,SAAS,MAAM,EACvC,MACA,aACsC;CACtC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAEnB,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAM,8BAAsC,KAAK;CAEjD,MAAM,yCAA8B;AAClC,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,0CAA+B;AACnC,YAAU,MAAM;IACf,EAAE,CAAC;AAGN,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ;AAEb,MAAI,UAAU,CAAC,OAAO,KACpB,QAAO,WAAW;EAIpB,MAAM,oBAAoB;AACxB,aAAU,MAAM;;AAElB,SAAO,iBAAiB,SAAS,YAAY;AAC7C,eAAa,OAAO,oBAAoB,SAAS,YAAY;IAC5D,CAAC,OAAO,CAAC;CAGZ,MAAM,8CACH,MAA2C;AAC1C,MAAI,EAAE,WAAW,EAAE,cACjB,aAAY;IAGhB,CAAC,WAAW,CACb;CAGD,MAAM,wCACH,MAA8C;AAC7C,MAAI,EAAE,QAAQ,SACZ,aAAY;IAGhB,CAAC,WAAW,CACb;CAGD,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAGR,KAAI,CAAC,OACH,QACE,2CAAC;EAAI,WAAU;EAAa,OAAO;YACjC,2CAAC;GAAQ,SAAS;GAAW,OAAO,EAAE,QAAQ,WAAW;aACvD,2CAACC;IAAc,MAAM,MAAM;IAA4B;KAAa;IAC5D;GACN;AAIV,QACE,2CAAC;EAAI,WAAU;EAAa,OAAO;YACjC,2CAAC;GACC,KAAK;GACL,WAAWC,+BAAiB,MAAM,WAAW,MAAM,SAAS;GAC5D,SAAS;GACT,WAAW;aAEX,4CAAC;IACC,WAAWA,+BAAiB,MAAM,WAAW,MAAM,QAAQ;IAC3D,OAAOC,6BAAe,MAAM,kBAAkB,MAAM;eAEpD,2CAAC;KAAI,IAAG;eACN,2CAAC;MAAO,SAAS;MAAY,cAAW;gBACtC,2CAAC;OAAK,WAAU;iBAAS;QAAY;OAC9B;MACL,EACN,2CAACF;KAAc,MAAM,MAAM;KAAyB;MAAa;KACzD;IACH;GACL;EAER"}

package/dist/react-renderer/components/layout/Modal.mjs

@@ -0,0 +1,91 @@
+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, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/Modal.tsx
+/**
+* Modal component - displays content in a dialog overlay.
+*
+* Matches Lit's rendering approach:
+* - When closed: renders section with entry point child
+* - When open: renders dialog with content child (entry point is replaced)
+*
+* The dialog is rendered in place (no portal) so it stays inside .a2ui-surface
+* and CSS selectors work correctly. showModal() handles the top-layer overlay.
+*/
+const Modal = memo(function Modal({ node, surfaceId }) {
+	const { theme } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const [isOpen, setIsOpen] = useState(false);
+	const dialogRef = useRef(null);
+	const openModal = useCallback(() => {
+		setIsOpen(true);
+	}, []);
+	const closeModal = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (isOpen && !dialog.open) dialog.showModal();
+		const handleClose = () => {
+			setIsOpen(false);
+		};
+		dialog.addEventListener("close", handleClose);
+		return () => dialog.removeEventListener("close", handleClose);
+	}, [isOpen]);
+	const handleBackdropClick = useCallback((e) => {
+		if (e.target === e.currentTarget) closeModal();
+	}, [closeModal]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Escape") closeModal();
+	}, [closeModal]);
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	if (!isOpen) return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-modal",
+		style: hostStyle,
+		children: /* @__PURE__ */ jsx("section", {
+			onClick: openModal,
+			style: { cursor: "pointer" },
+			children: /* @__PURE__ */ jsx(ComponentNode, {
+				node: props.entryPointChild,
+				surfaceId
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-modal",
+		style: hostStyle,
+		children: /* @__PURE__ */ jsx("dialog", {
+			ref: dialogRef,
+			className: classMapToString(theme.components.Modal.backdrop),
+			onClick: handleBackdropClick,
+			onKeyDown: handleKeyDown,
+			children: /* @__PURE__ */ jsxs("section", {
+				className: classMapToString(theme.components.Modal.element),
+				style: stylesToObject(theme.additionalStyles?.Modal),
+				children: [/* @__PURE__ */ jsx("div", {
+					id: "controls",
+					children: /* @__PURE__ */ jsx("button", {
+						onClick: closeModal,
+						"aria-label": "Close modal",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "g-icon",
+							children: "close"
+						})
+					})
+				}), /* @__PURE__ */ jsx(ComponentNode, {
+					node: props.contentChild,
+					surfaceId
+				})]
+			})
+		})
+	});
+});
+
+//#endregion
+export { Modal as default };
+//# sourceMappingURL=Modal.mjs.map

package/dist/react-renderer/components/layout/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/Modal.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useEffect, 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 * Modal component - displays content in a dialog overlay.\n *\n * Matches Lit's rendering approach:\n * - When closed: renders section with entry point child\n * - When open: renders dialog with content child (entry point is replaced)\n *\n * The dialog is rendered in place (no portal) so it stays inside .a2ui-surface\n * and CSS selectors work correctly. showModal() handles the top-layer overlay.\n */\nexport const Modal = memo(function Modal({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ModalNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const dialogRef = useRef<HTMLDialogElement>(null);\n\n  const openModal = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  const closeModal = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Show dialog when isOpen becomes true, and sync state when dialog closes (e.g., via Escape)\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal();\n    }\n\n    // Listen for native close event (triggered by Escape key)\n    const handleClose = () => {\n      setIsOpen(false);\n    };\n    dialog.addEventListener(\"close\", handleClose);\n    return () => dialog.removeEventListener(\"close\", handleClose);\n  }, [isOpen]);\n\n  // Handle backdrop clicks (only close if clicking directly on dialog, not its content)\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      if (e.target === e.currentTarget) {\n        closeModal();\n      }\n    },\n    [closeModal],\n  );\n\n  // Handle Escape key (for jsdom test compatibility - real browsers use native dialog behavior)\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDialogElement>) => {\n      if (e.key === \"Escape\") {\n        closeModal();\n      }\n    },\n    [closeModal],\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  // Match Lit's render approach: closed shows section with entry, open shows dialog\n  if (!isOpen) {\n    return (\n      <div className=\"a2ui-modal\" style={hostStyle}>\n        <section onClick={openModal} style={{ cursor: \"pointer\" }}>\n          <ComponentNode node={props.entryPointChild} surfaceId={surfaceId} />\n        </section>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"a2ui-modal\" style={hostStyle}>\n      <dialog\n        ref={dialogRef}\n        className={classMapToString(theme.components.Modal.backdrop)}\n        onClick={handleBackdropClick}\n        onKeyDown={handleKeyDown}\n      >\n        <section\n          className={classMapToString(theme.components.Modal.element)}\n          style={stylesToObject(theme.additionalStyles?.Modal)}\n        >\n          <div id=\"controls\">\n            <button onClick={closeModal} aria-label=\"Close modal\">\n              <span className=\"g-icon\">close</span>\n            </button>\n          </div>\n          <ComponentNode node={props.contentChild} surfaceId={surfaceId} />\n        </section>\n      </dialog>\n    </div>\n  );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAa,QAAQ,KAAK,SAAS,MAAM,EACvC,MACA,aACsC;CACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAEnB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,YAAY,OAA0B,KAAK;CAEjD,MAAM,YAAY,kBAAkB;AAClC,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,aAAa,kBAAkB;AACnC,YAAU,MAAM;IACf,EAAE,CAAC;AAGN,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ;AAEb,MAAI,UAAU,CAAC,OAAO,KACpB,QAAO,WAAW;EAIpB,MAAM,oBAAoB;AACxB,aAAU,MAAM;;AAElB,SAAO,iBAAiB,SAAS,YAAY;AAC7C,eAAa,OAAO,oBAAoB,SAAS,YAAY;IAC5D,CAAC,OAAO,CAAC;CAGZ,MAAM,sBAAsB,aACzB,MAA2C;AAC1C,MAAI,EAAE,WAAW,EAAE,cACjB,aAAY;IAGhB,CAAC,WAAW,CACb;CAGD,MAAM,gBAAgB,aACnB,MAA8C;AAC7C,MAAI,EAAE,QAAQ,SACZ,aAAY;IAGhB,CAAC,WAAW,CACb;CAGD,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAGR,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;EAAa,OAAO;YACjC,oBAAC;GAAQ,SAAS;GAAW,OAAO,EAAE,QAAQ,WAAW;aACvD,oBAAC;IAAc,MAAM,MAAM;IAA4B;KAAa;IAC5D;GACN;AAIV,QACE,oBAAC;EAAI,WAAU;EAAa,OAAO;YACjC,oBAAC;GACC,KAAK;GACL,WAAW,iBAAiB,MAAM,WAAW,MAAM,SAAS;GAC5D,SAAS;GACT,WAAW;aAEX,qBAAC;IACC,WAAW,iBAAiB,MAAM,WAAW,MAAM,QAAQ;IAC3D,OAAO,eAAe,MAAM,kBAAkB,MAAM;eAEpD,oBAAC;KAAI,IAAG;eACN,oBAAC;MAAO,SAAS;MAAY,cAAW;gBACtC,oBAAC;OAAK,WAAU;iBAAS;QAAY;OAC9B;MACL,EACN,oBAAC;KAAc,MAAM,MAAM;KAAyB;MAAa;KACzD;IACH;GACL;EAER"}

package/dist/react-renderer/components/layout/Row.cjs

@@ -0,0 +1,43 @@
+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/layout/Row.tsx
+/**
+* Row component - arranges children horizontally using flexbox.
+*
+* Supports distribution (justify-content) and alignment (align-items) properties.
+*/
+const Row = (0, react.memo)(function Row({ node, surfaceId }) {
+	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const alignment = props.alignment ?? "stretch";
+	const distribution = props.distribution ?? "start";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-row",
+		"data-alignment": alignment,
+		"data-distribution": distribution,
+		style: hostStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			className: require_utils.classMapToString(theme.components.Row),
+			style: require_utils.stylesToObject(theme.additionalStyles?.Row),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+exports.default = Row;
+//# sourceMappingURL=Row.cjs.map

package/dist/react-renderer/components/layout/Row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/layout/Row.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Row component - arranges children horizontally using flexbox.\n *\n * Supports distribution (justify-content) and alignment (align-items) properties.\n */\nexport const Row = memo(function Row({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.RowNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default values\n  const alignment = props.alignment ?? \"stretch\";\n  const distribution = props.distribution ?? \"start\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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\n      className=\"a2ui-row\"\n      data-alignment={alignment}\n      data-distribution={distribution}\n      style={hostStyle}\n    >\n      <section\n        className={classMapToString(theme.components.Row)}\n        style={stylesToObject(theme.additionalStyles?.Row)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Row;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,sBAAW,SAAS,IAAI,EACnC,MACA,aACoC;CACpC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,2CAAC;EACC,WAAU;EACV,kBAAgB;EAChB,qBAAmB;EACnB,OAAO;YAEP,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,IAAI;GACjD,OAAOC,6BAAe,MAAM,kBAAkB,IAAI;aAEjD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,2CAACC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Row.mjs

@@ -0,0 +1,42 @@
+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 } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-renderer/components/layout/Row.tsx
+/**
+* Row component - arranges children horizontally using flexbox.
+*
+* Supports distribution (justify-content) and alignment (align-items) properties.
+*/
+const Row = memo(function Row({ node, surfaceId }) {
+	const { theme } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const alignment = props.alignment ?? "stretch";
+	const distribution = props.distribution ?? "start";
+	const children = Array.isArray(props.children) ? props.children : [];
+	const hostStyle = node.weight !== void 0 ? { "--weight": node.weight } : {};
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-row",
+		"data-alignment": alignment,
+		"data-distribution": distribution,
+		style: hostStyle,
+		children: /* @__PURE__ */ jsx("section", {
+			className: classMapToString(theme.components.Row),
+			style: stylesToObject(theme.additionalStyles?.Row),
+			children: children.map((child, index) => {
+				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
+				return /* @__PURE__ */ jsx(ComponentNode, {
+					node: typeof child === "object" && child !== null && "type" in child ? child : null,
+					surfaceId
+				}, childId);
+			})
+		})
+	});
+});
+
+//#endregion
+export { Row as default };
+//# sourceMappingURL=Row.mjs.map

package/dist/react-renderer/components/layout/Row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.mjs","names":[],"sources":["../../../../src/react-renderer/components/layout/Row.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\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Row component - arranges children horizontally using flexbox.\n *\n * Supports distribution (justify-content) and alignment (align-items) properties.\n */\nexport const Row = memo(function Row({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.RowNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Match Lit's default values\n  const alignment = props.alignment ?? \"stretch\";\n  const distribution = props.distribution ?? \"start\";\n\n  const children = Array.isArray(props.children) ? props.children : [];\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\n      className=\"a2ui-row\"\n      data-alignment={alignment}\n      data-distribution={distribution}\n      style={hostStyle}\n    >\n      <section\n        className={classMapToString(theme.components.Row)}\n        style={stylesToObject(theme.additionalStyles?.Row)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Row;\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,MAAM,KAAK,SAAS,IAAI,EACnC,MACA,aACoC;CACpC,MAAM,EAAE,UAAU,iBAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,MAAM,WAAW,MAAM,QAAQ,MAAM,SAAS,GAAG,MAAM,WAAW,EAAE;CAGpE,MAAM,YACJ,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;AAER,QACE,oBAAC;EACC,WAAU;EACV,kBAAgB;EAChB,qBAAmB;EACnB,OAAO;YAEP,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,IAAI;GACjD,OAAO,eAAe,MAAM,kBAAkB,IAAI;aAEjD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,oBAAC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Tabs.cjs

@@ -0,0 +1,47 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_ComponentNode = require('../../core/ComponentNode.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/layout/Tabs.tsx
+/**
+* Tabs component - displays content in switchable tabs.
+*/
+const Tabs = (0, react.memo)(function Tabs({ node, surfaceId }) {
+	const { theme, resolveString } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const tabItems = props.tabItems ?? [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-tabs",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: require_utils.classMapToString(theme.components.Tabs.container),
+			style: require_utils.stylesToObject(theme.additionalStyles?.Tabs),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "buttons",
+				className: require_utils.classMapToString(theme.components.Tabs.element),
+				children: tabItems.map((tab, index) => {
+					const title = resolveString(tab.title);
+					const isSelected = index === selectedIndex;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						disabled: isSelected,
+						className: require_utils.classMapToString(isSelected ? require_utils$1.mergeClassMaps(theme.components.Tabs.controls.all, theme.components.Tabs.controls.selected) : theme.components.Tabs.controls.all),
+						onClick: () => setSelectedIndex(index),
+						children: title
+					}, index);
+				})
+			}), tabItems[selectedIndex] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
+				node: tabItems[selectedIndex].child,
+				surfaceId
+			})]
+		})
+	});
+});
+
+//#endregion
+exports.default = Tabs;
+//# sourceMappingURL=Tabs.cjs.map