feat: Support inline rendering

packages/poml/presentation.tsx

@@ -368,7 +368,7 @@ export namespace Serialize {
    * if it's unnamed.
    */
   export const Environment = component('Serialize.Environment')((
-    props: React.PropsWithChildren<PropsSerializeBase>,
+    props: React.PropsWithChildren<PropsSerializeBase & InlineProps>,
   ) => {
     const parentPresentation = React.useContext(PresentationApproach);
 
@@ -382,6 +382,7 @@ export namespace Serialize {
       originalEndIndex,
       writerOptions,
       sourcePath,
+      inline,
       ...others
     } = props;
 
@@ -421,9 +422,9 @@ export namespace Serialize {
       );
     if (parentPresentation?.presentation === 'markup') {
       // If the parent is in markup mode, we need a wrapper (e.g., ```json...```).
-      // TODO: support inline = true
+      // Support inline rendering when requested; default remains block fence.
       elem = (
-        <Markup.EncloseSerialize inline={false} lang={serializer} {...others}>
+        <Markup.EncloseSerialize inline={inline ?? false} lang={serializer} {...others}>
           {elem}
         </Markup.EncloseSerialize>
       );
@@ -493,7 +494,9 @@ export namespace Free {
    * The free environment marks the content as free-form text,
    * which will be kept as is without any processing.
    */
-  export const Environment = component('Free.Environment')((props: React.PropsWithChildren<PropsFreeBase>) => {
+  export const Environment = component('Free.Environment')((
+    props: React.PropsWithChildren<PropsFreeBase & InlineProps>,
+  ) => {
     const parentPresentation = React.useContext(PresentationApproach);
 
     // presentation is extracted but not used here. We are already in serialize mode.
@@ -506,6 +509,7 @@ export namespace Free {
       writerOptions,
       sourcePath,
       whiteSpace = 'pre',
+      inline,
       ...others
     } = props;
 
@@ -528,9 +532,9 @@ export namespace Free {
       );
     if (parentPresentation?.presentation === 'markup') {
       // If the parent is in markup mode, we need a wrapper (e.g., ```...```).
-      // TODO: support inline = true
+      // Support inline rendering when requested; default remains block fence.
       elem = (
-        <Markup.EncloseSerialize inline={false} {...others}>
+        <Markup.EncloseSerialize inline={inline ?? false} {...others}>
           {elem}
         </Markup.EncloseSerialize>
       );

packages/poml/tests/index.test.tsx

@@ -195,6 +195,33 @@ Optional additional context that can (...truncated)`;
     expect(element).toStrictEqual([{ speaker: 'human', content: [] }]);
   });
 
+  test('inlineSerializeEndToEnd', async () => {
+    const text =
+      '<Markup.Environment><Serialize.Environment inline="true"><Serialize.Any name="hello">world</Serialize.Any></Serialize.Environment></Markup.Environment>';
+    const result = await poml(text);
+    expect(result).toBe('`{\n  "hello": "world"\n}`');
+  });
+
+  test('blockSerializeEndToEnd', async () => {
+    const text =
+      '<Markup.Environment><Serialize.Environment><Serialize.Any name="hello">world</Serialize.Any></Serialize.Environment></Markup.Environment>';
+    const result = await poml(text);
+    expect(result).toBe('```json\n{\n  "hello": "world"\n}\n```');
+  });
+
+  test('inlineFreeEndToEnd', async () => {
+    const text =
+      '<Markup.Environment><Free.Environment inline="true">hello world</Free.Environment></Markup.Environment>';
+    const result = await poml(text);
+    expect(result).toBe('`hello world`');
+  });
+
+  test('blockFreeEndToEnd', async () => {
+    const text = '<Markup.Environment><Free.Environment>hello world</Free.Environment></Markup.Environment>';
+    const result = await poml(text);
+    expect(result).toBe('```\nhello world\n```');
+  });
+
   test('toolRequest', async () => {
     const text = '<tool-request id="test-123" name="search" parameters="{{ { query: \'hello\', limit: 10 } }}" />';
     const result = await poml(text);

packages/poml/tests/presentation.test.tsx

@@ -46,6 +46,19 @@ describe('markdown json hybrid', () => {
     );
   });
 
+  test('envInline', async () => {
+    const env = (
+      <Markup.Environment>
+        <Serialize.Environment inline={true}>
+          <Serialize.Any name='hello'>world</Serialize.Any>
+        </Serialize.Environment>
+      </Markup.Environment>
+    );
+    expect(await read(env)).toBe(
+      '<env presentation="markup" markup-lang="markdown"><code inline="true" lang="json"><env presentation="serialize" serializer="json"><any name="hello">world</any></env></code></env>',
+    );
+  });
+
   test('jsonMarkdown', async () => {
     const env = (
       <Serialize.Environment>
@@ -72,4 +85,15 @@ describe('free', () => {
       '<env presentation="free" white-space="pre"><text white-space="pre">hello\nworld</text></env>',
     );
   });
+
+  test('freeInlineInMarkup', async () => {
+    const env = (
+      <Markup.Environment>
+        <Free.Environment inline={true}>hello</Free.Environment>
+      </Markup.Environment>
+    );
+    expect(await read(env)).toBe(
+      '<env presentation="markup" markup-lang="markdown"><code inline="true"><env presentation="free" white-space="pre">hello</env></code></env>',
+    );
+  });
 });