From f57a2f16ad15dd5901a22784a31f2117c2362b27 Mon Sep 17 00:00:00 2001
From: Tetsuo Koyama <tkoyama010@gmail.com>
Date: Sat, 31 Jan 2026 16:53:49 +0900
Subject: [PATCH 1/2] Add height option to stlite directive

- Add :height: option to customize iframe height
- Support units (px, rem) and numeric values (auto-convert to px)
- Update documentation with usage examples
- Add test cases for height option parsing
- Add custom-height.rst example page
---
 docs/examples/custom-height.rst   | 39 +++++++++++++++++++++++++++
 docs/guide.rst                    | 16 +++++++++++
 src/atsphinx/stlite/directives.py |  2 ++
 src/atsphinx/stlite/nodes.py      | 12 ++++++++-
 tests/test_directives.py          | 44 +++++++++++++++++++++++++++++++
 5 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/custom-height.rst

diff --git a/docs/examples/custom-height.rst b/docs/examples/custom-height.rst
new file mode 100644
index 0000000..f6c6d9a
--- /dev/null
+++ b/docs/examples/custom-height.rst
@@ -0,0 +1,39 @@
+==================
+Custom Height Demo
+==================
+
+This example demonstrates how to use the ``:height:`` option to control the size of stlite components.
+
+Basic Usage
+===========
+
+Simple example with 400px height:
+
+.. stlite::
+   :height: 400px
+
+   import streamlit as st
+   
+   st.title("Custom Height Example")
+   name = st.text_input("Your name")
+   st.write(f"Hello, {name or 'World'}!")
+
+Larger Component
+================
+
+For charts and visualizations, use a larger height:
+
+.. stlite::
+   :requirements: matplotlib
+   :height: 600px
+
+   import streamlit as st
+   import matplotlib.pyplot as plt
+   import numpy as np
+
+   size = st.slider("Sample size", 100, 1000, 500)
+   
+   data = np.random.normal(0, 1, size)
+   fig, ax = plt.subplots()
+   ax.hist(data, bins=20)
+   st.pyplot(fig)
diff --git a/docs/guide.rst b/docs/guide.rst
index e457e2a..2456af0 100644
--- a/docs/guide.rst
+++ b/docs/guide.rst
@@ -92,6 +92,22 @@ There is ``stlite`` directive to write Stlite app code into document.
 
       This supports multiline strings, comma-separated strings, or combinations.
 
+   .. rst:directive:option:: height
+
+      Height of the stlite iframe.
+
+      Accepts values with units (e.g., ``500px``, ``30rem``) or numeric values (treated as pixels).
+
+      Example:
+
+      .. code-block:: rst
+
+         .. stlite::
+            :height: 600px
+
+            import streamlit as st
+            st.title("Custom Height Example")
+
 Configuration
 =============
 
diff --git a/src/atsphinx/stlite/directives.py b/src/atsphinx/stlite/directives.py
index 24611a4..e56f82e 100644
--- a/src/atsphinx/stlite/directives.py
+++ b/src/atsphinx/stlite/directives.py
@@ -46,10 +46,12 @@ class StliteDirective(SphinxDirective):  # noqa: D101
     option_spec = {
         "config": parsed_dict,
         "requirements": list_of_str,
+        "height": str,
     }
     DEFAULT_OPTIONS = {
         "config": None,
         "requirements": [],
+        "height": None,
     }
 
     def run(self):  # noqa: D102
diff --git a/src/atsphinx/stlite/nodes.py b/src/atsphinx/stlite/nodes.py
index de2a471..731c9e9 100644
--- a/src/atsphinx/stlite/nodes.py
+++ b/src/atsphinx/stlite/nodes.py
@@ -27,8 +27,18 @@ class stlite(nodes.Element, nodes.General):  # noqa: D101
 def visit_stlite(self: HTML5Translator, node: stlite) -> None:  # noqa: D103
     config = self.builder.config
     srcdoc = escape(srcdoc_template.render(app=node.attributes, config=config))
+    
+    # Apply custom height if specified
+    style_attr = ""
+    if node.attributes.get("height"):
+        height = node.attributes["height"]
+        # Ensure px suffix if numeric value without unit
+        if height.isdigit():
+            height = f"{height}px"
+        style_attr = f' style="height: {escape(height)};"'
+    
     self.body.append(
-        f'<div class="stlite-wrapper"><iframe class="stlite-frame" srcdoc="{srcdoc}">'
+        f'<div class="stlite-wrapper"><iframe class="stlite-frame"{style_attr} srcdoc="{srcdoc}">'
     )
 
 
diff --git a/tests/test_directives.py b/tests/test_directives.py
index 7c77d16..f0d3d85 100644
--- a/tests/test_directives.py
+++ b/tests/test_directives.py
@@ -100,3 +100,47 @@ def test__parse_requirements(app: SphinxTestApp, source: str):
     doctree = restructuredtext.parse(app, dedent(source).strip())
     node = pick_first_stlite(doctree)
     assert node["requirements"] == ["matplotlib", "polars"]
+
+
+@pytest.mark.sphinx(confoverrides={"extensions": ["atsphinx.stlite"]})
+@pytest.mark.parametrize(
+    ["source", "expected"],
+    [
+        pytest.param(
+            """
+    .. stlite::
+       :height: 500px
+
+       print("Hello world")
+    """,
+            "500px",
+            id="with-unit",
+        ),
+        pytest.param(
+            """
+    .. stlite::
+       :height: 30rem
+
+       print("Hello world")
+    """,
+            "30rem",
+            id="rem-unit",
+        ),
+        pytest.param(
+            """
+    .. stlite::
+       :height: 600
+
+       print("Hello world")
+    """,
+            "600",
+            id="numeric-only",
+        ),
+    ],
+)
+def test__parse_height(app: SphinxTestApp, source: str, expected: str):
+    """Test height option parsing."""
+    doctree = restructuredtext.parse(app, dedent(source).strip())
+    node = pick_first_stlite(doctree)
+    assert node["height"] == expected
+

From d173e25b024ac3cbe452bc1d1ae5d2d992ab194a Mon Sep 17 00:00:00 2001
From: Tetsuo Koyama <tkoyama010@gmail.com>
Date: Sat, 31 Jan 2026 17:03:56 +0900
Subject: [PATCH 2/2] Delete docs/examples/custom-height.rst

---
 docs/examples/custom-height.rst | 39 ---------------------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 docs/examples/custom-height.rst

diff --git a/docs/examples/custom-height.rst b/docs/examples/custom-height.rst
deleted file mode 100644
index f6c6d9a..0000000
--- a/docs/examples/custom-height.rst
+++ /dev/null
@@ -1,39 +0,0 @@
-==================
-Custom Height Demo
-==================
-
-This example demonstrates how to use the ``:height:`` option to control the size of stlite components.
-
-Basic Usage
-===========
-
-Simple example with 400px height:
-
-.. stlite::
-   :height: 400px
-
-   import streamlit as st
-   
-   st.title("Custom Height Example")
-   name = st.text_input("Your name")
-   st.write(f"Hello, {name or 'World'}!")
-
-Larger Component
-================
-
-For charts and visualizations, use a larger height:
-
-.. stlite::
-   :requirements: matplotlib
-   :height: 600px
-
-   import streamlit as st
-   import matplotlib.pyplot as plt
-   import numpy as np
-
-   size = st.slider("Sample size", 100, 1000, 500)
-   
-   data = np.random.normal(0, 1, size)
-   fig, ax = plt.subplots()
-   ax.hist(data, bins=20)
-   st.pyplot(fig)