sysgraph 0.0.17__tar.gz → 0.0.18__tar.gz

{sysgraph-0.0.17/src/sysgraph.egg-info → sysgraph-0.0.18}/PKG-INFO

@@ -1,17 +1,19 @@
 Metadata-Version: 2.4
 Name: sysgraph
-Version: 0.0.17
+Version: 0.0.18
 Summary: Visualizer for processes and their interconnections
 Author-email: Eugene Gubenkov <gubenkoved@gmail.com>
 License: MIT
 Project-URL: Source, https://github.com/gubenkoved/sysgraph
 Project-URL: Issues, https://github.com/gubenkoved/sysgraph/issues
-Keywords: process,visualization,graph,ipc,system,monitoring,linux,procfs
+Keywords: process,visualization,graph,ipc,system,monitoring,cross-platform,macos,linux
 Classifier: Programming Language :: Python :: 3
 Classifier: Programming Language :: Python :: 3.12
 Classifier: Programming Language :: Python :: 3.13
 Classifier: License :: OSI Approved :: MIT License
 Classifier: Operating System :: POSIX :: Linux
+Classifier: Operating System :: MacOS
+Classifier: Operating System :: Microsoft :: Windows
 Classifier: Topic :: System :: Monitoring
 Classifier: Topic :: System :: Systems Administration
 Classifier: Environment :: Web Environment
@@ -31,9 +33,10 @@ Dynamic: license-file
 
 An interactive force-directed **network graph visualizer** for the browser — with two modes:
 
-- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively, no Linux or special privileges required
-- **Live process graph** — discover running OS processes and their inter-process communication channels (pipes, Unix domain sockets, TCP/UDP connections) in real time (Linux only)
+- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively
+- **Live process graph** — discover running OS processes and their inter-process communication channels in real time (cross-platform; richest on Linux)
 
+[![PyPI](https://img.shields.io/pypi/v/sysgraph)](https://pypi.org/project/sysgraph/)
 ![Python](https://img.shields.io/badge/python-%3E%3D3.12-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
@@ -45,9 +48,9 @@ An interactive force-directed **network graph visualizer** for the browser — w
 - **Fuzzy search** — find nodes by any property
 - **Adjacency filtering** — right-click a node to show only its neighbors
 - **Configurable** — tune d3 force parameters, colors, and type filters via the settings panel
-- **Process discovery** *(Linux only)* — enumerates running OS processes and their parent-child relationships
-- **IPC visualization** *(Linux only)* — discovers pipes, Unix domain sockets, and TCP/UDP connections between processes
-- **Real-time** *(Linux only)* — fetch the latest process graph on demand via the web UI
+- **Process discovery** — enumerates running OS processes and their parent-child relationships (cross-platform via psutil)
+- **IPC visualization** — discovers TCP/UDP connections (all platforms), Unix domain sockets and pipes (Linux only)
+- **Real-time** — fetch the latest process graph on demand via the web UI
 
 ## Demo
 
@@ -56,8 +59,8 @@ An interactive force-directed **network graph visualizer** for the browser — w
 ## Requirements
 
 - **Python ≥ 3.12**
-- **Linux** is required only for live process-graph discovery (relies on `/proc` and `ss`); importing and visualizing your own graphs works on any platform
-- Root/sudo recommended for full process visibility (Linux only)
+- **Linux, macOS, or Windows** — process and network discovery works on all platforms via psutil; Unix domain sockets and pipe discovery require Linux
+- Root/sudo recommended for full process visibility on Linux/macOS
 
 ## Installation
 
@@ -98,9 +101,9 @@ Use the **Import** button in the UI to load any JSON file in the following forma
 
 See [`data/simplest-graph.json`](data/simplest-graph.json) for a minimal example.
 
-### Live process graph (Linux only)
+### Live process graph
 
-For full visibility into all processes and their connections, run with elevated privileges:
+For full visibility into all processes and their connections, run with elevated privileges (Linux/macOS):
 
 ```bash
 sudo sysgraph
@@ -118,12 +121,12 @@ The `--pid=host` and `--net=host` flags allow the container to see host processe
 
 1. The **browser frontend** renders interactive force-directed graphs using [force-graph](https://github.com/vasturiano/force-graph) with d3 physics simulation.
 2. Graphs can be **imported from JSON** directly in the browser, or fetched live from the backend.
-3. The **FastAPI backend** uses `psutil` and Linux-specific APIs (`/proc`, `ss`) to discover processes, pipes, Unix domain sockets, and network connections, building a graph served via `GET /api/graph`.
+3. The **FastAPI backend** uses `psutil` to discover processes and network connections (cross-platform), plus Linux-specific APIs (`/proc`, `ss`) for pipe and Unix domain socket discovery, building a graph served via `GET /api/graph`.
 
 ## Development
 
 ### Prerequisites
-- Python ≥ 3.12, Linux, Docker
+- Python ≥ 3.12, Docker (for frontend builds)
 - Node.js 22 runs inside Docker; no host installation required
 
 ### Backend
@@ -143,7 +146,7 @@ python src/sysgraph/app.py   # → http://localhost:8000
 
 ### Tests
 ```bash
-pytest src/sysgraph/tests/    # requires Linux /proc
+pytest src/sysgraph/tests/
 ```
 
 ### Python linting

{sysgraph-0.0.17 → sysgraph-0.0.18}/README.md

@@ -2,9 +2,10 @@
 
 An interactive force-directed **network graph visualizer** for the browser — with two modes:
 
-- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively, no Linux or special privileges required
-- **Live process graph** — discover running OS processes and their inter-process communication channels (pipes, Unix domain sockets, TCP/UDP connections) in real time (Linux only)
+- **Import any graph** — load any JSON graph (nodes + edges) to explore and visualize it interactively
+- **Live process graph** — discover running OS processes and their inter-process communication channels in real time (cross-platform; richest on Linux)
 
+[![PyPI](https://img.shields.io/pypi/v/sysgraph)](https://pypi.org/project/sysgraph/)
 ![Python](https://img.shields.io/badge/python-%3E%3D3.12-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
@@ -16,9 +17,9 @@ An interactive force-directed **network graph visualizer** for the browser — w
 - **Fuzzy search** — find nodes by any property
 - **Adjacency filtering** — right-click a node to show only its neighbors
 - **Configurable** — tune d3 force parameters, colors, and type filters via the settings panel
-- **Process discovery** *(Linux only)* — enumerates running OS processes and their parent-child relationships
-- **IPC visualization** *(Linux only)* — discovers pipes, Unix domain sockets, and TCP/UDP connections between processes
-- **Real-time** *(Linux only)* — fetch the latest process graph on demand via the web UI
+- **Process discovery** — enumerates running OS processes and their parent-child relationships (cross-platform via psutil)
+- **IPC visualization** — discovers TCP/UDP connections (all platforms), Unix domain sockets and pipes (Linux only)
+- **Real-time** — fetch the latest process graph on demand via the web UI
 
 ## Demo
 
@@ -27,8 +28,8 @@ An interactive force-directed **network graph visualizer** for the browser — w
 ## Requirements
 
 - **Python ≥ 3.12**
-- **Linux** is required only for live process-graph discovery (relies on `/proc` and `ss`); importing and visualizing your own graphs works on any platform
-- Root/sudo recommended for full process visibility (Linux only)
+- **Linux, macOS, or Windows** — process and network discovery works on all platforms via psutil; Unix domain sockets and pipe discovery require Linux
+- Root/sudo recommended for full process visibility on Linux/macOS
 
 ## Installation
 
@@ -69,9 +70,9 @@ Use the **Import** button in the UI to load any JSON file in the following forma
 
 See [`data/simplest-graph.json`](data/simplest-graph.json) for a minimal example.
 
-### Live process graph (Linux only)
+### Live process graph
 
-For full visibility into all processes and their connections, run with elevated privileges:
+For full visibility into all processes and their connections, run with elevated privileges (Linux/macOS):
 
 ```bash
 sudo sysgraph
@@ -89,12 +90,12 @@ The `--pid=host` and `--net=host` flags allow the container to see host processe
 
 1. The **browser frontend** renders interactive force-directed graphs using [force-graph](https://github.com/vasturiano/force-graph) with d3 physics simulation.
 2. Graphs can be **imported from JSON** directly in the browser, or fetched live from the backend.
-3. The **FastAPI backend** uses `psutil` and Linux-specific APIs (`/proc`, `ss`) to discover processes, pipes, Unix domain sockets, and network connections, building a graph served via `GET /api/graph`.
+3. The **FastAPI backend** uses `psutil` to discover processes and network connections (cross-platform), plus Linux-specific APIs (`/proc`, `ss`) for pipe and Unix domain socket discovery, building a graph served via `GET /api/graph`.
 
 ## Development
 
 ### Prerequisites
-- Python ≥ 3.12, Linux, Docker
+- Python ≥ 3.12, Docker (for frontend builds)
 - Node.js 22 runs inside Docker; no host installation required
 
 ### Backend
@@ -114,7 +115,7 @@ python src/sysgraph/app.py   # → http://localhost:8000
 
 ### Tests
 ```bash
-pytest src/sysgraph/tests/    # requires Linux /proc
+pytest src/sysgraph/tests/
 ```
 
 ### Python linting

{sysgraph-0.0.17 → sysgraph-0.0.18}/pyproject.toml

@@ -10,13 +10,15 @@ readme = "README.md"
 license = { text = "MIT" }
 authors = [{ name = "Eugene Gubenkov", email = "gubenkoved@gmail.com" }]
 requires-python = ">=3.12"
-keywords = ["process", "visualization", "graph", "ipc", "system", "monitoring", "linux", "procfs"]
+keywords = ["process", "visualization", "graph", "ipc", "system", "monitoring", "cross-platform", "macos", "linux"]
 classifiers = [
     "Programming Language :: Python :: 3",
     "Programming Language :: Python :: 3.12",
     "Programming Language :: Python :: 3.13",
     "License :: OSI Approved :: MIT License",
     "Operating System :: POSIX :: Linux",
+    "Operating System :: MacOS",
+    "Operating System :: Microsoft :: Windows",
     "Topic :: System :: Monitoring",
     "Topic :: System :: Systems Administration",
     "Environment :: Web Environment",

sysgraph-0.0.18/src/sysgraph/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.0.18"

{sysgraph-0.0.17 → sysgraph-0.0.18}/src/sysgraph/app.py

@@ -18,9 +18,14 @@ from sysgraph.discovery import build_graph
 LOGGER = logging.getLogger(__name__)
 
 
+LOG_FORMAT = (
+    "%(asctime)s.%(msecs)03d %(name)s[%(process)d] %(levelname)s %(message)s"
+)
+
+
 @asynccontextmanager
 async def lifespan(app):
-    coloredlogs.install()
+    coloredlogs.install(fmt=LOG_FORMAT)
     logging.info(f"init for process with PID {os.getpid()}")
     yield
     logging.info(f"shutdown for process with PID {os.getpid()}")

{sysgraph-0.0.17 → sysgraph-0.0.18}/src/sysgraph/constants.py

@@ -20,8 +20,8 @@ def process_node_id(pid: int) -> str:
     return f"{NODE_PROCESS}::{pid}"
 
 
-def uds_node_id(inode: int) -> str:
-    return f"{NODE_UDS}::{inode}"
+def uds_node_id(key: str) -> str:
+    return f"{NODE_UDS}::{key}"
 
 
 def pipe_node_id(inode: str) -> str:

{sysgraph-0.0.17 → sysgraph-0.0.18}/src/sysgraph/discovery.py

@@ -2,6 +2,8 @@ import logging
 import os
 import re
 import subprocess
+import sys
+import time
 from collections import defaultdict
 from concurrent.futures import ThreadPoolExecutor
 from pathlib import Path
@@ -71,7 +73,7 @@ def discover_processes() -> list[Process]:
         if mem_info:
             p.memory_rss = mem_info.rss
             p.memory_vms = mem_info.vms
-            p.memory_shared = mem_info.shared
+            p.memory_shared = getattr(mem_info, "shared", None)
 
         p.environment = info.get("environ")
 
@@ -81,15 +83,18 @@ def discover_processes() -> list[Process]:
 
 
 def discover_unix_sockets() -> list[UnixDomainSocket]:
-    """Discover Unix Domain Sockets as reported by kernel.
+    """Discover Unix Domain Sockets by parsing ``ss -xp`` output.
 
-    Note however that connection with UDS will have at least 2 records reported
-    with opposite local/peer inodes. They can be further groupped to
-    find connected pairs of processes.
+    This is a Linux-only feature.  On other platforms an empty list is
+    returned without raising an error.
 
     Returns:
-        list[UnixDomainSocket]: _description_
+        list[UnixDomainSocket]: Discovered UDS sockets.
     """
+    if sys.platform != "linux":
+        LOGGER.debug("UDS discovery skipped (only supported on Linux)")
+        return []
+
     result = subprocess.run(
         ["ss", "-xp"], capture_output=True, text=True, check=False
     )
@@ -98,11 +103,15 @@ def discover_unix_sockets() -> list[UnixDomainSocket]:
 
     # example line:
     # users:(("dbus-daemon",pid=1950,fd=12))
-    def parse_proccess(s: str) -> list[UnixDomainSocketProcRef]:
+    def parse_proccess(
+        s: str,
+    ) -> list[UnixDomainSocketProcRef]:
         processes = []
 
         for match in re.finditer(
-            r'\("(?P<name>[^"]+)",pid=(?P<pid>[0-9]+),fd=(?P<fd>[0-9]+)\)', s
+            r'\("(?P<name>[^"]+)",pid=(?P<pid>[0-9]+),'
+            r"fd=(?P<fd>[0-9]+)\)",
+            s,
         ):
             ref = UnixDomainSocketProcRef(pid=int(match.group("pid")))
             ref.name = match.group("name")
@@ -140,7 +149,8 @@ def discover_connected_uds(
 ) -> list[UnixDomainSocketConnection]:
     """Discover connected UDS pairs from the list of discovered UDS sockets.
 
-    Each connection will have two UDS sockets with opposite local/peer inodes.
+    Each connection will have two UDS sockets with opposite local/peer
+    inodes.
 
     Args:
         sockets (list[UnixDomainSocket]): List of discovered UDS sockets.
@@ -158,7 +168,10 @@ def discover_connected_uds(
     for uds in sockets:
         if (uds.peer_inode, uds.local_inode) in inode_map:
             peer_uds = inode_map[(uds.peer_inode, uds.local_inode)]
-            if (uds.local_inode, uds.peer_inode) not in visited and (
+            if (
+                uds.local_inode,
+                uds.peer_inode,
+            ) not in visited and (
                 uds.peer_inode,
                 uds.local_inode,
             ) not in visited:
@@ -174,8 +187,18 @@ def discover_connected_uds(
 
 
 def get_processes_open_files() -> dict[int, list[ProcessOpenFile]]:
-    """Read open file descriptors directly from /proc instead of spawning lsof."""
+    """Read open file descriptors from /proc to discover pipes.
+
+    This is a Linux-only feature that reads ``/proc/[pid]/fd`` and
+    ``/proc/[pid]/fdinfo``.  On other platforms an empty mapping is
+    returned without raising an error.
+    """
     result_map: dict[int, list[ProcessOpenFile]] = defaultdict(list)
+
+    if sys.platform != "linux":
+        LOGGER.debug("pipe discovery skipped (only supported on Linux)")
+        return result_map
+
     proc_path = Path("/proc")
 
     for pid_dir in proc_path.iterdir():
@@ -305,7 +328,7 @@ def _add_uds_nodes(
             label = f"uds:[{inode}]"
 
         node = graph.add_node(
-            uds_node_id(inode),
+            uds_node_id(str(inode)),
             NODE_UDS,
             properties={
                 "label": label,
@@ -513,6 +536,8 @@ def _add_network_nodes(
 
 
 def build_graph(discover_uds_connectivity: bool = True) -> Graph:
+    started_at = time.monotonic()
+
     graph = Graph()
 
     # run independent discovery steps in parallel (all I/O-bound)
@@ -532,4 +557,8 @@ def build_graph(discover_uds_connectivity: bool = True) -> Graph:
     _add_pipe_nodes(graph, open_files_map, pid_to_node)
     _add_network_nodes(graph, processes, all_net_connections, pid_to_node)
 
+    LOGGER.info(
+        f"discovery completed in {time.monotonic() - started_at:.2f} seconds"
+    )
+
     return graph

sysgraph-0.0.18/src/sysgraph/dist/assets/index-BLbtXZbQ.css

@@ -0,0 +1 @@
+:root{--z-toolbar: 100;--z-search-help: 150;--z-context-menu: 200;--z-loading-overlay: 300;--z-details-panel: 50;--z-selection-overlay: 10;--z-version-badge: 10;--z-zoom-indicator: 10;--bg-toolbar: rgba(255, 255, 255, .95);--bg-panel: rgba(255, 255, 255, .97);--border-subtle: rgba(0, 0, 0, .08);--border-light: rgba(0, 0, 0, .1);--border-medium: rgba(0, 0, 0, .12);--shadow-xs: rgba(0, 0, 0, .08);--shadow-sm: rgba(0, 0, 0, .14);--shadow-md: rgba(0, 0, 0, .15);--accent-primary: #1a56db;--accent-info: #1a73e8;--accent-danger: #dc2626;--toolbar-height: 48px;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 16px;--font-family: "Ubuntu", "Segoe UI", "Arial", sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-md: 13px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--button-height: 28px;--icon-button-size: 24px;--tp-base-background-color: hsla(230, 5%, 90%, 1);--tp-base-shadow-color: hsla(0, 0%, 0%, .1);--tp-button-background-color: hsla(230, 7%, 75%, 1);--tp-button-background-color-active: hsla(230, 7%, 60%, 1);--tp-button-background-color-focus: hsla(230, 7%, 65%, 1);--tp-button-background-color-hover: hsla(230, 7%, 70%, 1);--tp-button-foreground-color: hsla(230, 10%, 30%, 1);--tp-container-background-color: hsla(230, 15%, 30%, .2);--tp-container-background-color-active: hsla(230, 15%, 30%, .32);--tp-container-background-color-focus: hsla(230, 15%, 30%, .28);--tp-container-background-color-hover: hsla(230, 15%, 30%, .24);--tp-container-foreground-color: hsla(230, 10%, 30%, 1);--tp-groove-foreground-color: hsla(230, 15%, 30%, .1);--tp-input-background-color: hsla(230, 15%, 30%, .1);--tp-input-background-color-active: hsla(230, 15%, 30%, .22);--tp-input-background-color-focus: hsla(230, 15%, 30%, .18);--tp-input-background-color-hover: hsla(230, 15%, 30%, .14);--tp-input-foreground-color: hsla(230, 10%, 30%, 1);--tp-label-foreground-color: hsla(230, 10%, 30%, .7);--tp-monitor-background-color: hsla(230, 15%, 30%, .1);--tp-monitor-foreground-color: hsla(230, 10%, 30%, .5)}html,body{height:100%;margin:0;overflow:hidden;font-family:var(--font-family)}#toolbar{position:fixed;top:0;left:0;right:0;height:var(--toolbar-height);z-index:var(--z-toolbar);background:var(--bg-toolbar);border-bottom:1px solid var(--border-light);display:flex;align-items:center;padding:0 var(--spacing-lg);gap:var(--spacing-sm);box-shadow:0 1px 3px var(--shadow-xs)}#toolbar md-outlined-button{--md-outlined-button-container-height: var(--button-height);--md-outlined-button-label-text-size: var(--font-size-sm);--md-outlined-button-label-text-weight: 500;--md-outlined-button-icon-size: 16px;--md-outlined-button-leading-space: 10px;--md-outlined-button-trailing-space: 12px;--md-outlined-button-icon-offset: -2px;--md-outlined-button-container-shape: var(--radius-sm)}md-outlined-button.active{--md-outlined-button-container-color: #d0e1ff;--md-outlined-button-label-text-color: var(--accent-primary);--md-outlined-button-outline-color: var(--accent-primary);--md-outlined-button-icon-color: var(--accent-primary)}md-outlined-button.danger{--md-outlined-button-label-text-color: var(--accent-danger);--md-outlined-button-outline-color: var(--accent-danger);--md-outlined-button-icon-color: var(--accent-danger)}.toolbar-separator{width:1px;height:var(--icon-button-size);background:var(--border-light)}#searchInput{width:240px;height:var(--button-height);--md-outlined-text-field-container-shape: var(--radius-sm);--md-outlined-text-field-top-space: var(--spacing-xs);--md-outlined-text-field-bottom-space: var(--spacing-xs);--md-outlined-text-field-input-text-size: var(--font-size-sm);--md-outlined-text-field-label-text-size: var(--font-size-sm)}#searchHelpTrigger{--md-icon-button-icon-size: 18px;--md-icon-button-state-layer-height: var(--button-height);--md-icon-button-state-layer-width: var(--button-height);height:var(--button-height);width:var(--button-height)}.search-help-anchor{position:relative;display:inline-flex}#searchHelp{display:none;position:absolute;top:100%;left:0;margin-top:var(--spacing-xs);z-index:var(--z-search-help);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:10px 14px;box-shadow:0 4px 12px var(--shadow-md);font-size:var(--font-size-sm);line-height:1.5;background:#1e293b;color:#fff}#searchHelp.open{display:block}#searchHelp code{background:#ffffff1f;padding:1px var(--spacing-xs);border-radius:3px}#content{position:fixed;top:var(--toolbar-height);left:0;right:0;bottom:0}#graph{width:100%;height:100%;position:relative}.details-panel{position:absolute;top:var(--spacing-md);left:var(--spacing-md);width:fit-content;max-width:420px;height:auto;min-width:200px;min-height:120px;max-height:min(350px,calc(100% - var(--spacing-lg)));z-index:var(--z-details-panel);background:var(--bg-panel);box-shadow:0 2px 12px var(--shadow-sm);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:none;flex-direction:column;overflow:hidden;resize:both}.details-panel.open{display:flex}.details-panel .panel-header{display:flex;align-items:center;height:var(--button-height);padding:0 2px 0 10px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;cursor:grab;-webkit-user-select:none;user-select:none}.details-panel .panel-header:active{cursor:grabbing}.details-panel .panel-title{font-size:var(--font-size-sm);font-weight:500;color:#333;flex:1}.details-panel md-icon-button{--md-icon-button-icon-size: 16px;--md-icon-button-state-layer-height: var(--icon-button-size);--md-icon-button-state-layer-width: var(--icon-button-size);height:var(--icon-button-size);width:var(--icon-button-size)}.details-panel .panel-body{flex:1;overflow-y:auto;min-height:0;padding:var(--spacing-md);font-family:var(--font-family)}#detailsPanel{border-left:3px solid var(--accent-info)}#detailsPanel .panel-header{background:#1a73e80f}#contextMenu{display:none;position:fixed;z-index:var(--z-context-menu);background:var(--bg-panel);border:1px solid var(--border-medium);border-radius:var(--spacing-sm);padding:var(--spacing-xs) 0;box-shadow:0 4px 12px var(--shadow-md);min-width:160px;font-size:var(--font-size-md)}.context-menu-item{padding:var(--spacing-sm) 14px;cursor:pointer;-webkit-user-select:none;user-select:none}.context-menu-item:hover{background:#0000000f}.context-menu-divider{height:1px;margin:var(--spacing-xs) 0;background:var(--border-medium)}#loading-overlay{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--z-loading-overlay);background:#0000008c;color:#fff;font-family:var(--font-family);font-size:14px;padding:8px 18px;border-radius:var(--radius-md);pointer-events:none}#loading-overlay.visible{display:block}.tp-rotv{font-family:var(--font-family)!important;opacity:.9}#settingsPane{max-height:calc(100% - 30px);position:absolute;overflow-y:auto;right:10px;top:10px}#version-badge{position:fixed;bottom:var(--spacing-sm);right:var(--spacing-md);font-size:var(--font-size-xs);color:#0000004d;pointer-events:none;z-index:var(--z-version-badge);font-family:var(--font-family)}#zoom-indicator{position:fixed;bottom:var(--spacing-md);left:var(--spacing-md);z-index:var(--z-zoom-indicator);display:flex;align-items:center;gap:0;background:var(--bg-toolbar);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:0 1px 4px var(--shadow-xs);padding:0 var(--spacing-xs)}#zoom-indicator md-icon-button{--md-icon-button-icon-size: 16px;--md-icon-button-state-layer-height: var(--button-height);--md-icon-button-state-layer-width: var(--button-height);height:var(--button-height);width:var(--button-height)}#zoomLevel{font-size:var(--font-size-xs);font-family:var(--font-family);color:#555;min-width:34px;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:var(--radius-sm);padding:2px var(--spacing-xs);transition:background .1s}#zoomLevel:hover{background:#0000000f}.muted{color:#666}hr{border:none;border-top:1px solid var(--border-subtle);margin:var(--spacing-sm) 0}