feat(composer): v0.9 theater, gallery fixes, and renderer improvements

renderers/react/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 - **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`.
 - **BREAKING CHANGE**: Renamed `createBinderlessComponent` to `createBinderlessComponentImplementation`.
+- **Fix**: Icon camelCase-to-snake_case conversion no longer prepends underscore to capitalized names. Added `ICON_MAP` for icons that don't follow standard naming (e.g. `play` → `play_arrow`).
+- **Fix**: Markdown list parser no longer drops continuation lines within list items.
+- **Fix**: Heading variants (`h1`–`h5`) now set explicit `fontSize`/`fontWeight` to work under CSS resets.
+- **Fix**: Tabs uses container margin (not leaf) and `overflow: hidden`; tab buttons flex-distribute evenly with text truncation.
+- **Fix**: Card adds `overflow: hidden` to contain child content.
+- **Fix**: Column adds `minWidth: 0` so flex children can shrink below content size.
+- **Fix**: Weight wrapper adds `minHeight: 0` for vertical flex layouts.
+- **Refactor**: Moved `weight` flex wrapper from shared adapter into individual basic catalog components.
 
 ## 0.8.1
 

renderers/react/src/v0_9/catalog/basic/components/AudioPlayer.tsx

@@ -17,20 +17,21 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {getBaseLeafStyle} from '../utils';
+import {getBaseLeafStyle, withWeight} from '../utils';
 
 export const AudioPlayer = createComponentImplementation(AudioPlayerApi, ({props}) => {
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
     width: '100%',
   };
 
-  return (
+  return withWeight(
     <div style={{display: 'flex', flexDirection: 'column', gap: '4px', width: '100%'}}>
       {props.description && (
         <span style={{fontSize: '12px', color: '#666'}}>{props.description}</span>
       )}
       <audio src={props.url} controls style={style} />
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Button.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, withWeight} from '../utils';
 
 export const Button = createComponentImplementation(ButtonApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
@@ -36,12 +36,14 @@ export const Button = createComponentImplementation(ButtonApi, ({props, buildChi
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
+    alignSelf: 'flex-start',
     boxSizing: 'border-box',
   };
 
-  return (
+  return withWeight(
     <button style={style} onClick={props.action} disabled={props.isValid === false}>
       {props.child ? buildChild(props.child) : null}
-    </button>
+    </button>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Card.tsx

@@ -17,15 +17,18 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {getBaseContainerStyle} from '../utils';
+import {getBaseContainerStyle, withWeight} from '../utils';
 
 export const Card = createComponentImplementation(CardApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
     ...getBaseContainerStyle(),
     backgroundColor: '#fff',
     boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-    width: '100%',
+    overflow: 'hidden',
   };
 
-  return <div style={style}>{props.child ? buildChild(props.child) : null}</div>;
+  return withWeight(
+    <div style={style}>{props.child ? buildChild(props.child) : null}</div>,
+    props.weight,
+  );
 });

renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, withWeight} from '../utils';
 
 export const CheckBox = createComponentImplementation(CheckBoxApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -28,7 +28,7 @@ export const CheckBox = createComponentImplementation(CheckBoxApi, ({props}) =>
 
   const hasError = props.validationErrors && props.validationErrors.length > 0;
 
-  return (
+  return withWeight(
     <div style={{display: 'flex', flexDirection: 'column', margin: LEAF_MARGIN}}>
       <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
         <input
@@ -52,6 +52,7 @@ export const CheckBox = createComponentImplementation(CheckBoxApi, ({props}) =>
           {props.validationErrors?.[0]}
         </span>
       )}
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx

@@ -17,7 +17,7 @@
 import React, {useState} from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS, withWeight} from '../utils';
 
 // The type of an option is deeply nested into the ChoicePickerApi schema, and
 // it seems z.infer is not inferring it correctly (?). We use `any` for now.
@@ -63,7 +63,7 @@ export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({pro
     gap: '8px',
   };
 
-  return (
+  return withWeight(
     <div style={containerStyle}>
       {props.label && <strong style={{fontSize: '14px'}}>{props.label}</strong>}
       {props.filterable && (
@@ -115,6 +115,7 @@ export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({pro
           );
         })}
       </div>
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Column.tsx

@@ -17,22 +17,25 @@
 import {createComponentImplementation} from '../../../adapter';
 import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
-import {mapJustify, mapAlign} from '../utils';
+import {mapJustify, mapAlign, withWeight} from '../utils';
 
 export const Column = createComponentImplementation(ColumnApi, ({props, buildChild, context}) => {
-  return (
+  return withWeight(
     <div
       style={{
         display: 'flex',
         flexDirection: 'column',
         justifyContent: mapJustify(props.justify),
         alignItems: mapAlign(props.align),
         width: '100%',
+        // Override flex default min-width:auto so children can shrink below content size.
+        minWidth: 0,
         margin: 0,
         padding: 0,
       }}
     >
       <ChildList childList={props.children} buildChild={buildChild} context={context} />
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS, withWeight} from '../utils';
 
 export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,7 +39,7 @@ export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({p
     boxSizing: 'border-box',
   };
 
-  return (
+  return withWeight(
     <div
       style={{
         display: 'flex',
@@ -63,6 +63,7 @@ export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({p
         min={typeof props.min === 'string' ? props.min : undefined}
         max={typeof props.max === 'string' ? props.max : undefined}
       />
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Divider.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, withWeight} from '../utils';
 
 export const Divider = createComponentImplementation(DividerApi, ({props}) => {
   const isVertical = props.axis === 'vertical';
@@ -35,5 +35,5 @@ export const Divider = createComponentImplementation(DividerApi, ({props}) => {
     style.height = '1px';
   }
 
-  return <div style={style} />;
+  return withWeight(<div style={style} />, props.weight);
 });

renderers/react/src/v0_9/catalog/basic/components/Icon.tsx

@@ -17,11 +17,21 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {getBaseLeafStyle} from '../utils';
+import {getBaseLeafStyle, withWeight} from '../utils';
+
+/** Explicit map for icon names that don't follow camelCase → snake_case. */
+const ICON_MAP: Record<string, string> = {
+  favoriteOff: 'favorite_border',
+  play: 'play_arrow',
+  rewind: 'fast_rewind',
+  starOff: 'star_border',
+};
 
 export const Icon = createComponentImplementation(IconApi, ({props}) => {
-  const iconName =
+  const rawName =
     typeof props.name === 'string' ? props.name : (props.name as {path?: string})?.path;
+  const iconName =
+    ICON_MAP[rawName ?? ''] ?? rawName?.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
     fontSize: '24px',
@@ -32,9 +42,10 @@ export const Icon = createComponentImplementation(IconApi, ({props}) => {
     justifyContent: 'center',
   };
 
-  return (
+  return withWeight(
     <span className="material-symbols-outlined" style={style}>
       {iconName}
-    </span>
+    </span>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Image.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {getBaseLeafStyle} from '../utils';
+import {getBaseLeafStyle, withWeight} from '../utils';
 
 export const Image = createComponentImplementation(ImageApi, ({props}) => {
   const mapFit = (fit?: string): React.CSSProperties['objectFit'] => {
@@ -28,7 +28,9 @@ export const Image = createComponentImplementation(ImageApi, ({props}) => {
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
     objectFit: mapFit(props.fit),
-    width: '100%',
+    // Subtract left + right LEAF_MARGIN (8px each) so the image doesn't overflow its parent.
+    width: `calc(100% - ${2 * 8}px)`,
+    minWidth: 0,
     height: 'auto',
     display: 'block',
   };
@@ -47,7 +49,8 @@ export const Image = createComponentImplementation(ImageApi, ({props}) => {
   } else if (props.variant === 'header') {
     style.height = '200px';
     style.objectFit = 'cover';
+    style.borderRadius = '8px';
   }
 
-  return <img src={props.url} alt={props.description || ''} style={style} />;
+  return withWeight(<img src={props.url} alt={props.description || ''} style={style} />, props.weight);
 });

renderers/react/src/v0_9/catalog/basic/components/List.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {ListApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
-import {mapAlign} from '../utils';
+import {mapAlign, withWeight} from '../utils';
 
 export const List = createComponentImplementation(ListApi, ({props, buildChild, context}) => {
   const isHorizontal = props.direction === 'horizontal';
@@ -33,9 +33,10 @@ export const List = createComponentImplementation(ListApi, ({props, buildChild,
     padding: 0,
   };
 
-  return (
+  return withWeight(
     <div style={style}>
       <ChildList childList={props.children} buildChild={buildChild} context={context} />
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Modal.tsx

@@ -17,11 +17,12 @@
 import {useState} from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {withWeight} from '../utils';
 
 export const Modal = createComponentImplementation(ModalApi, ({props, buildChild}) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  return (
+  return withWeight(
     <>
       <div onClick={() => setIsOpen(true)} style={{display: 'inline-block'}}>
         {props.trigger ? buildChild(props.trigger) : null}
@@ -73,6 +74,7 @@ export const Modal = createComponentImplementation(ModalApi, ({props, buildChild
           </div>
         </div>
       )}
-    </>
+    </>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Row.tsx

@@ -17,10 +17,10 @@
 import {createComponentImplementation} from '../../../adapter';
 import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
-import {mapJustify, mapAlign} from '../utils';
+import {mapJustify, mapAlign, withWeight} from '../utils';
 
 export const Row = createComponentImplementation(RowApi, ({props, buildChild, context}) => {
-  return (
+  return withWeight(
     <div
       style={{
         display: 'flex',
@@ -33,6 +33,7 @@ export const Row = createComponentImplementation(RowApi, ({props, buildChild, co
       }}
     >
       <ChildList childList={props.children} buildChild={buildChild} context={context} />
-    </div>
+    </div>,
+    props.weight,
   );
 });

renderers/react/src/v0_9/catalog/basic/components/Slider.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import {createComponentImplementation} from '../../../adapter';
 import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, withWeight} from '../utils';
 
 export const Slider = createComponentImplementation(SliderApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,7 +26,7 @@ export const Slider = createComponentImplementation(SliderApi, ({props}) => {
 
   const uniqueId = React.useId();
 
-  return (
+  return withWeight(
     <div
       style={{
         display: 'flex',
@@ -53,6 +53,7 @@ export const Slider = createComponentImplementation(SliderApi, ({props}) => {
         onChange={onChange}
         style={{width: '100%', cursor: 'pointer'}}
       />
-    </div>
+    </div>,
+    props.weight,
   );
 });