streamlit-plugins 0.7.17__tar.gz → 0.7.18__tar.gz

streamlit_plugins-0.7.18/MANIFEST.in

@@ -0,0 +1,4 @@
+recursive-include streamlit_plugins/components/navbar/v1/frontend/build *
+recursive-include streamlit_plugins/components/navbar/v2/frontend/build *
+include streamlit_plugins/components/navbar/pyproject.toml
+include streamlit_plugins/components/navbar/v2/pyproject.toml

{streamlit_plugins-0.7.17/streamlit_plugins.egg-info → streamlit_plugins-0.7.18}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: streamlit-plugins
-Version: 0.7.17
+Version: 0.7.18
 Summary: Components and Frameworks to give new features to streamlit
 Home-page: https://github.com/quiradev/streamlit-plugins
 Author: Victor Quilon Ranera

{streamlit_plugins-0.7.17 → streamlit_plugins-0.7.18}/streamlit_plugins/components/document_blocks/__init__.py

@@ -64,7 +64,7 @@ __CSS = """
   flex: 1;
   max-width: 550px;
   background: #fff;
-  padding: 10px;
+  padding: 0;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
@@ -952,8 +952,31 @@ def st_documents_blocks_info(
         tab_order: Optional[list[Literal["Blocks", "JSON", "HTML", "Markdown"] | str]] = None,
         custom_tabs: Optional[list[str]] = None,
         format_raw_code: bool = False,
+        set_state_on: Literal["hover", "click"] = "hover",
+        right_col_width: int | str = "100%",
 ) -> Generator[tuple[list[dict], list[TabContainer]], Any, None]:
-    main_container = st.container(horizontal=True)
+    st.write(
+        f"""
+        <style>
+        .st-key-documents_blocks_container {{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }}
+        .st-key-documents_blocks_container > div:first-child {{
+            flex: 0 0 fit-content;
+        }}
+        .st-key-documents_blocks_container > div:last-child {{
+            width: {right_col_width};
+            flex: 1 1 auto;
+            max-width: 100%;
+            overflow: auto;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+    main_container = st.container(horizontal=True, key="documents_blocks_container", gap="xxsmall")
     page_selected = 1
     if document.pages > 1:
         with st.container(horizontal_alignment="right"):
@@ -988,7 +1011,7 @@ def st_documents_blocks_info(
                 reading_order=reading_order,
                 custom_styles=custom_styles,
                 default_selected=dynamic_selected_block_id,
-                set_state_on="hover",
+                set_state_on=set_state_on,
                 width="content",
                 height=600,
                 key="document_blocks"
@@ -1135,22 +1158,21 @@ def st_documents_blocks_info(
         elif json_col and json_col.open:
             with json_col:
                 with st_dynamic_container(
-                        container_source_key="document_blocks",
-                        key="view-container", mimic_vertical=True, border=True
+                    container_source_key="document_blocks",
+                    key="view-container", border=True
                 ):
                     st.json(blocks_page)
 
         elif html_col and html_col.open:
             with html_col:
-                render_col, raw_col = st.tabs(
-                    ["Renderer", "Raw"],
-                    on_change=on_tab_change
-                )
                 with st_dynamic_container(
                         container_source_key="document_blocks",
-                        key="view-container", mimic_vertical=True, border=True
+                        key="view-container", border=True
                 ):
-
+                    render_col, raw_col = st.tabs(
+                        ["Renderer", "Raw"],
+                        on_change=on_tab_change
+                    )
                     html_content = _concat_content(blocks_normalized, content_type="html", parent_content_has_children=parent_content_has_children)
                     if not html_content:
                         st.warning("HTML content is empty. Please ensure that the blocks contain valid HTML content.")
@@ -1167,7 +1189,7 @@ def st_documents_blocks_info(
             with markdown_col:
                 with st_dynamic_container(
                     container_source_key="document_blocks",
-                    key="view-container", mimic_vertical=True, border=True
+                    key="view-container", border=True
                 ):
                     render_col, raw_col = st.tabs(
                         ["Renderer", "Raw"],

streamlit_plugins-0.7.18/streamlit_plugins/components/markdown_editor/__init__.py

@@ -0,0 +1,206 @@
+from collections.abc import Mapping, Sequence
+from pathlib import Path
+from typing import Any
+
+from streamlit.components.v2 import component as create_component
+from streamlit.elements.lib.layout_utils import Height
+
+_ASSET_DIR = Path(__file__).with_name("frontend")
+
+
+def _normalize_blocks(
+    blocks: Sequence[Mapping[str, Any]], *, for_review: bool = False
+) -> list[dict[str, str]]:
+    normalized: list[dict[str, str]] = []
+    seen_ids: set[str] = set()
+    for index, block in enumerate(blocks):
+        if not isinstance(block, Mapping):
+            raise TypeError(f"El bloque {index} debe ser un mapping")
+        markdown = block.get("markdown", block.get("text"))
+        if not isinstance(markdown, str):
+            raise TypeError(f"El bloque {index} debe incluir markdown de tipo str")
+        block_id = block.get("id") if for_review else block.get("id", f"block-{index}")
+        block_id = str(block_id) if block_id is not None or not for_review else None
+        if block_id is not None and block_id in seen_ids:
+            raise ValueError(f"ID de bloque duplicado: {block_id}")
+        item = {"markdown": markdown}
+        if block_id is not None:
+            seen_ids.add(block_id)
+            item["id"] = block_id
+        normalized.append(item)
+    if not normalized and not for_review:
+        normalized.append({"id": "block-0", "markdown": ""})
+    return normalized
+
+
+def _normalize_diff(diff: Mapping[str, Any] | None) -> dict[str, Any] | None:
+    if diff is None:
+        return None
+    if not isinstance(diff, Mapping):
+        raise TypeError("diff debe ser un mapping con before y after o sus bloques")
+    has_blocks = "before_blocks" in diff or "after_blocks" in diff
+    if has_blocks and not ("before_blocks" in diff and "after_blocks" in diff):
+        raise ValueError("diff debe incluir before_blocks y after_blocks juntos")
+    normalized: dict[str, Any] = {}
+    for version in ("before", "after"):
+        source = diff.get(version)
+        if has_blocks:
+            blocks = diff[f"{version}_blocks"]
+            if not isinstance(blocks, Sequence) or isinstance(blocks, (str, bytes)):
+                raise TypeError(f"{version}_blocks debe ser una secuencia de bloques")
+            blocks = _normalize_blocks(blocks, for_review=True)
+            normalized[f"{version}_blocks"] = blocks
+            markdown = "\n\n".join(block["markdown"] for block in blocks)
+            if source is None:
+                source = markdown
+            elif source != markdown:
+                raise ValueError(f"{version} debe coincidir con el Markdown de {version}_blocks")
+        if not isinstance(source, str):
+            raise ValueError("diff debe incluir before y after de tipo str o sus bloques")
+        normalized[version] = source
+    return normalized
+
+
+def _document_from_state(
+    state: Any,
+    initial_blocks: list[dict[str, str]],
+    *,
+    mode: str,
+    save_mode: str,
+) -> dict[str, Any]:
+    if state is None:
+        blocks = initial_blocks
+        return {
+            "blocks": blocks,
+            "markdown": "\n\n".join(block["markdown"] for block in blocks),
+            "mode": mode,
+            "save_mode": save_mode,
+        }
+    if not isinstance(state, Mapping):
+        raise TypeError("El estado devuelto por el editor debe ser un mapping")
+    state_blocks = state.get("blocks")
+    state_markdown = state.get("markdown")
+    if not isinstance(state_blocks, list) or not isinstance(state_markdown, str):
+        raise ValueError("El editor devolvió un estado incompleto")
+    state_mode = state.get("mode", mode)
+    if state_mode not in {"raw_visual", "visual"}:
+        raise ValueError("El editor devolvió un modo desconocido")
+    return {
+        "blocks": state_blocks,
+        "markdown": state_markdown,
+        "mode": state_mode,
+        "save_mode": save_mode,
+    }
+
+
+def st_markdown_block_editor(
+    initial_blocks: Sequence[Mapping[str, Any]],
+    *,
+    key: str,
+    revision: int = 0,
+    height: Height | None = "stretch",
+    mode: str = "raw_visual",
+    save_mode: str = "auto",
+    only_view: bool = False,
+    debug_blocks: bool = False,
+    diff: Mapping[str, Any] | None = None,
+    editor_modes: Sequence[str] = ("raw_visual", "visual"),
+    review_modes: Sequence[str] = ("visual", "markdown"),
+    review_layouts: Sequence[str] = ("before", "after", "split", "blocks"),
+    block_diff_style: str = "content",
+    placeholder: str = "Escribe aquí…",
+    show_copy_button: bool = True,
+    toolbar_sections: Sequence[str] = ("view", "format", "block", "history", "changes"),
+) -> dict[str, Any]:
+    """Edit Markdown blocks or review visual, source and block-level changes.
+
+    With button saving, review compares the saved document with the local draft.
+    External diffs accept before/after strings or paired before_blocks/after_blocks.
+    Stable block IDs improve movement and content-change identification.
+    toolbar_sections controls header visibility, not editing permissions.
+    """
+    if not key:
+        raise ValueError("key no puede estar vacía")
+    if revision < 0:
+        raise ValueError("revision no puede ser negativa")
+    if height is not None and (isinstance(height, bool) or not isinstance(height, (int, str))):
+        raise TypeError("height debe ser un entero, 'stretch', 'content' o None")
+    if isinstance(height, int) and height < 240:
+        raise ValueError("height debe ser al menos 240 px")
+    if isinstance(height, str) and height not in {"stretch", "content"}:
+        raise ValueError("height debe ser 'stretch' o 'content'")
+    if mode not in {"raw_visual", "visual"}:
+        raise ValueError("mode debe ser 'raw_visual' o 'visual'")
+    if save_mode not in {"auto", "button"}:
+        raise ValueError("save_mode debe ser 'auto' o 'button'")
+    if not isinstance(only_view, bool):
+        raise TypeError("only_view debe ser bool")
+    if not isinstance(debug_blocks, bool):
+        raise TypeError("debug_blocks debe ser bool")
+    choices = {
+        "editor_modes": (editor_modes, {"raw_visual", "visual"}, True),
+        "review_modes": (review_modes, {"visual", "markdown"}, True),
+        "review_layouts": (review_layouts, {"before", "after", "split", "blocks"}, True),
+        "toolbar_sections": (toolbar_sections, {"view", "format", "block", "history", "changes"}, False),
+    }
+    for name, (values, allowed, required) in choices.items():
+        if not isinstance(values, Sequence) or isinstance(values, (str, bytes)):
+            raise TypeError(f"{name} debe ser una secuencia de opciones")
+        if (required and not values) or any(not isinstance(value, str) or value not in allowed for value in values):
+            raise ValueError(f"{name}: opciones válidas {sorted(allowed)}" + ("; elige al menos una" if required else ""))
+        if len(set(values)) != len(values):
+            raise ValueError(f"{name} no puede incluir opciones duplicadas")
+    if mode not in editor_modes:
+        raise ValueError("mode debe estar incluido en editor_modes")
+    if block_diff_style not in {"content", "inline"}:
+        raise ValueError("block_diff_style debe ser 'content' o 'inline'")
+    if not isinstance(placeholder, str):
+        raise TypeError("placeholder debe ser str")
+    if not isinstance(show_copy_button, bool):
+        raise TypeError("show_copy_button debe ser bool")
+    normalized_diff = _normalize_diff(diff)
+
+    blocks = _normalize_blocks(initial_blocks)
+    renderer_bundle = _ASSET_DIR / "renderers.bundle.js"
+    if not renderer_bundle.is_file():
+        raise RuntimeError(
+            "Falta el bundle de renderizadores: ejecuta npm install y npm run build "
+            "en isc\\markdown_editor\\frontend"
+        )
+    editor = create_component(
+        name="indra_markdown_block_editor",
+        html=(_ASSET_DIR / "editor.html").read_text(encoding="utf-8"),
+        css=(_ASSET_DIR / "editor.css").read_text(encoding="utf-8"),
+        js=(
+            renderer_bundle.read_text(encoding="utf-8")
+            + "\n"
+            + (_ASSET_DIR / "editor.js").read_text(encoding="utf-8")
+        ),
+        isolate_styles=False,
+    )
+    state = editor(
+        key=key,
+        data={
+            "blocks": blocks,
+            "revision": revision,
+            "mode": mode,
+            "save_mode": save_mode,
+            "only_view": only_view,
+            "debug_blocks": debug_blocks,
+            "height": height,
+            "diff": normalized_diff,
+            "editor_modes": list(editor_modes),
+            "review_modes": list(review_modes),
+            "review_layouts": list(review_layouts),
+            "block_diff_style": block_diff_style,
+            "placeholder": placeholder,
+            "show_copy_button": show_copy_button,
+            "toolbar_sections": list(toolbar_sections),
+        },
+        width="stretch",
+        height=height if height is not None else 760,
+    ).get("value")
+    return _document_from_state(state, blocks, mode=mode, save_mode=save_mode)
+
+
+__all__ = ["st_markdown_block_editor"]

streamlit_plugins-0.7.18/streamlit_plugins/components/navbar/__init__.py

@@ -0,0 +1,11 @@
+from importlib import import_module as _import_module
+from typing import Any as _Any
+
+from . import v1
+from .v1 import *
+
+st_navbar_v1 = v1.st_navbar
+
+
+def st_navbar_v2(*args: _Any, **kwargs: _Any) -> str:
+    return _import_module(f"{__name__}.v2").st_navbar(*args, **kwargs)

streamlit_plugins-0.7.18/streamlit_plugins/components/navbar/pyproject.toml

@@ -0,0 +1,36 @@
+[build-system]
+requires = ["setuptools>=77.0.3", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "streamlit-component-navbar"
+version = "0.7.17"
+dynamic = ["dependencies"]
+description = "Streamlit navbar component"
+readme = "README.md"
+requires-python = ">=3.10"
+
+[[tool.streamlit.component.components]]
+name = "nav_bar"
+asset_dir = "v2/frontend/build"
+
+[tool.setuptools]
+package-dir = { "" = "../../../" }
+include-package-data = true
+
+[tool.setuptools.dynamic]
+dependencies = { file = ["packaging/requirements.txt"] }
+
+[tool.setuptools.packages.find]
+where = ["../../../"]
+include = [
+  "streamlit_plugins.extension",
+  "streamlit_plugins.extension.*",
+  "streamlit_plugins.components.navbar",
+  "streamlit_plugins.components.navbar.*",
+]
+
+[tool.setuptools.package-data]
+"streamlit_plugins.components.navbar" = ["pyproject.toml"]
+"streamlit_plugins.components.navbar.v1" = ["frontend/build/**/*"]
+"streamlit_plugins.components.navbar.v2" = ["frontend/build/**/*", "pyproject.toml"]

streamlit_plugins-0.7.18/streamlit_plugins/components/navbar/v1/frontend/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><title>Streamlit Component NavBar</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component NavBar"/><link rel="stylesheet" href="bootstrap.min.css"/><link rel="stylesheet" href="material-fonts.css"/><script defer="defer" src="static/js/main.8e1dc380.js"></script></head><body><link rel="stylesheet" href="style.css"/><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

streamlit_plugins-0.7.18/streamlit_plugins/components/navbar/v1/frontend/build/material-fonts.css

@@ -0,0 +1,23 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(material.woff2) format('woff2');
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

{streamlit_plugins-0.7.17/streamlit_plugins/components/navbar → streamlit_plugins-0.7.18/streamlit_plugins/components/navbar/v1}/frontend/build/st-styles.css

@@ -10,11 +10,11 @@ body {
     --sidebar-width: 150px;
 }
 
-div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
     user-select: none;
 }
 
-body:not([data-nav-position="side"]) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+body:not([data-nav-position="side"]) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
     position: sticky;
     opacity: 1 !important;
     display: flex;
@@ -28,7 +28,7 @@ body:not([data-nav-position="side"]) div.st-key-navigation-component:has(iframe[
     }
 
     & [data-testid="stSkeleton"],
-    & iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+    & iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
         outline: 1px solid #c3c3c326;
         border-radius: 5px;
         width: 100%;
@@ -49,11 +49,11 @@ body[data-nav-position="under"] {
     & .stApp > header {
         border-bottom: 1px solid #c3c3c326;
     }
-    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         z-index: 1000;
 
         [data-testid="stSkeleton"],
-        & iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+        & iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
             position: relative;
             z-index: 1000;
             top: 0;
@@ -73,14 +73,14 @@ body[data-nav-position="under"] {
 }
 body[data-nav-position="under"][data-nav-is-sticky="true"] {
     /* STICKY */
-    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         top: calc(var(--header-height) + 1rem);
         margin-top: calc(-1 * var(--gap-between-comps) * 1rem);
     }
 }
 body[data-nav-position="under"][data-nav-is-sticky="false"] {
     /* FIXED */
-    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    & div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         top: calc(var(--header-height) - 5px);
     }
 }
@@ -119,36 +119,36 @@ body[data-nav-position="top"] {
         }
     }
     @media (min-width: 576px) {
-        & [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+        & [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
             width: calc(100vw - 2 * (var(--top-side-elements-width) * 1rem + 2*var(--margin-side-navbar) * 1rem) - var(--margin-side-navbar) * 1rem);
             left: calc(var(--top-side-elements-margin) * 1rem + var(--top-side-elements-width) * 1rem);
         }
-        & [data-layout="narrow"]:has(> [data-testid="stSidebar"][aria-expanded="true"]) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+        & [data-layout="narrow"]:has(> [data-testid="stSidebar"][aria-expanded="true"]) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
             left: calc(100% - 736px - var(--margin-side-navbar) * 1rem);
             width: calc(100% - (var(--top-side-elements-width) * 1rem - 2 * var(--margin-side-navbar) * 1rem));
         }
     }
     @media(max-width: 575.98px) {
-        [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+        [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
             width: calc(100vw - 2 * (var(--top-side-elements-width) * 1rem + 2*var(--margin-side-navbar) * 1rem) - var(--margin-side-navbar) * 1rem);
             left: calc(var(--top-side-elements-margin) * 1rem + var(--top-side-elements-width) * 1rem);
         }
-        [data-layout="narrow"]:not(:has(> [data-testid="collapsedControl"])) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]),
-        [data-layout="narrow"]:not(:has(> [data-testid="stSidebarCollapsedControl"])) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+        [data-layout="narrow"]:not(:has(> [data-testid="collapsedControl"])) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]),
+        [data-layout="narrow"]:not(:has(> [data-testid="stSidebarCollapsedControl"])) div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
             margin-left: calc(-1 * var(--margin-side-narrow-diff) * 1rem);
             width: calc(100vw - 2 * (var(--top-side-elements-width) * 1rem + 2*var(--margin-side-navbar) * 1rem) - var(--margin-side-navbar) * 1rem);
             left: calc(var(--top-side-elements-margin) * 1rem + var(--top-side-elements-width) * 1rem);
         }
     }
     @media (min-width: calc(736px + 8rem)) {
-        & [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+        & [data-layout="narrow"] div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
             width: calc(100vw - 2 * (var(--top-side-elements-width) * 1rem + 2*var(--margin-side-navbar) * 1rem) - var(--margin-side-navbar) * 1rem);
             left: 0;
             margin-left: calc(-1 * ((100vw - 100%) / 2 - 1 * ((var(--top-side-elements-width) * 1rem + 2*var(--margin-side-navbar) * 1rem) + 0.125rem)));
         }
     }
 
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         /* top: {TOP_LINE_HEIGHT}rem; */
         top: calc(var(--top-line-height) * 1rem);
         z-index: 999990;
@@ -239,8 +239,8 @@ body[data-nav-position="top"] {
 
 body:not([data-nav-position="top"])[data-nav-is-sticky="true"],
 body:not([data-nav-position="under"])[data-nav-is-sticky="true"] {
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) [data-testid="stSkeleton"],
-    iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) [data-testid="stSkeleton"],
+    iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
         box-shadow: 0 0px 10px 0px #00000012;
         border-radius: 5px;
     }
@@ -252,11 +252,11 @@ body:not([data-nav-position="under"])[data-nav-is-sticky="false"] {
         padding-top: 3rem;
     }
 
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         margin-bottom: 1rem;
 
         [data-testid="stSkeleton"],
-        & iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+        & iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
             border-top-right-radius: 0;
             border-top-left-radius: 0;
         }
@@ -271,7 +271,7 @@ body[data-nav-position="side"].side-nav-closed {
         margin-left: 4rem;
     }
 
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         /* position: sticky; */
         opacity: 1 !important;
         padding: 0;
@@ -291,7 +291,7 @@ body[data-nav-position="side"].side-nav-closed {
             height: 100vh !important;
         }
         [data-testid="stSkeleton"],
-        & iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+        & iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
             outline: 1px solid #c3c3c326;
             border-radius: 5px;
             width: 100%;
@@ -308,7 +308,7 @@ body[data-nav-position="side"].side-nav-open {
         margin-left: 10rem;
     }
 
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         width: 10rem;
     }
 }
@@ -325,7 +325,7 @@ body[data-nav-position="side"] {
         height: 100vh;
     }
 
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         /* position: sticky; */
         opacity: 1 !important;
         display: flex;
@@ -348,7 +348,7 @@ body[data-nav-position="side"] {
             height: 100vh !important;
         }
         [data-testid="stSkeleton"],
-        & iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+        & iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
             outline: 1px solid #c3c3c326;
             border-radius: 5px;
             width: 100%;
@@ -366,11 +366,11 @@ body[data-nav-position="side"] {
             margin-left: var(--sidebar-width);
         }
     }
-    &.side-nav-open div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    &.side-nav-open div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         width: var(--sidebar-width);
     }
 
-    &.side-nav-open div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.nav_bar"] + span#expander-navigation-component {
+    &.side-nav-open div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] + span#expander-navigation-component {
         height: 100vh;
         width: 8px;
         right: -4px;
@@ -396,19 +396,19 @@ body[data-nav-position="side"] {
     }
 }
 
-body[data-nav-position="side"].side-nav-open:has(div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.nav_bar"] + span#expander-navigation-component.expander-active) {
+body[data-nav-position="side"].side-nav-open:has(div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] + span#expander-navigation-component.expander-active) {
     cursor: col-resize;
 }
 
 body[data-nav-position="hidden"] {
-    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.nav_bar"]) {
+    div.st-key-navigation-component:has(iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"]) {
         display: none;
     }
 }
-div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.nav_bar"] {
+div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"] {
     display: none !important;
 }
-div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.nav_bar"].is-registered {
+div.st-key-navigation-component iframe[title="streamlit_plugins.components.navbar.v1.nav_bar"].is-registered {
     display: initial !important;
 }