Navigator UI: Use distinct text icon for inline span elements instead of generic div box icon

[webstudio-issue-reporter]

User story

As a designer using Webstudio Builder, I want inline span text elements in the Navigator to have a distinct text icon instead of a generic box icon, so that I can distinguish inline text spans from structural div containers.

Summary

In Webstudio Builder Navigator tree, ws:element instances with tag 'span' render the exact same generic box icon as 'div'.

What the agent tried

1. Author a heading with an inline styled span element inside h1.
2. Inspect the Navigator panel in Webstudio Builder UI.
3. Notice that span elements look identical to div container boxes in the tree icons.

Expected behavior

Inline text elements like span should display a distinct typography or text icon in the Navigator.

Actual result

span elements use the exact same box icon as div elements.

Recovery attempts

1. Assign explicit semantic Navigator labels (e.g. 'Glow Gradient Heading') to clarify element roles.

User impact

Users spend extra time verifying element tags in the inspector properties panel because inline text spans cannot be visually identified from the Navigator icons alone.

Technical context

Webstudio Navigator maps ws:element to a single generic icon regardless of tag.

Agent environment

• Client: Antigravity
• Provider: unknown
• Model: gemini-3.7-flash
• Reasoning effort: high
• Trigger: user-requested
• Category: feature-request

Technical runtime

• CLI: 0.291.0
• Node.js: 24.18.0
• Operating system: win32 10 (x64)
• Execution mode: mcp
• API contract: public-api:iqd6ok

Acceptance criteria

1. Navigator tree renders a distinct icon for ws:element where tag is 'span'.
2. The icon visually conveys inline text content.