fix(web): styled role-filtered nav, hidden on phones; clearer studio preview label

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/src/main.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { lazy, Suspense, useEffect, useState } from "react";
-import { createBrowserRouter, Link, Outlet, RouterProvider, useLocation, type RouteObject } from "react-router-dom";
+import { createBrowserRouter, Link, NavLink, Outlet, RouterProvider, useLocation, type RouteObject } from "react-router-dom";
 import type { AuthUser } from "@stc/contracts";
 import { AppShell } from "@stc/ui";
 import { webFeatures } from "./features";
@@ -31,9 +31,11 @@ function Layout() {
   const header = (
     <>
       <Link to="/" style={{ fontWeight: 600, color: "var(--head)", textDecoration: "none" }}>STCourses</Link>
-      <nav style={{ display: "flex", gap: 14 }}>
-        {nav.map((r) => <Link key={r.path} to={r.path}>{r.nav!.label}</Link>)}
-      </nav>
+      {nav.length ? (
+        <nav className="stc-nav" aria-label="Areas">
+          {nav.map((r) => <NavLink key={r.path} to={r.path}>{r.nav!.label}</NavLink>)}
+        </nav>
+      ) : null}
     </>
   );
   return (

packages/feature-studio/src/ui/learnerPreview.tsx

@@ -16,7 +16,7 @@ export default function LearnerLessonPreview(props: LessonPreviewProps) {
     return {
       courseId, courseTitle: "",
       lesson: { id: lesson?.id ?? "preview", title: lesson?.title ?? "", type: lesson?.type === "exercise" ? "exercise" : "text", minutes: null },
-      module: { id: "", title: "Preview", index: 0 },
+      module: { id: "", title: "Draft, not published", index: 0 },
       locked: false,
       markdown: body, baseFile: resolveCourseUrl ? file ?? null : null, trackMarkdown: {}, tracks: [],
       video: null, transcript: null, hints: [], decks: [], code: null, attachments: [], browser: null, localCommand: null,

packages/ui/src/tokens.css

@@ -24,6 +24,12 @@ code, pre { font-family: var(--mono); }
 
 /* shell */
 .stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
+.stc-nav { display: flex; align-items: center; gap: 16px; }
+.stc-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
+.stc-nav a:hover, .stc-nav a.active { color: var(--head); }
+.stc-nav a.active { box-shadow: inset 0 -2px 0 var(--accent-dim); }
+.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
+@media (max-width: 680px) { .stc-nav { display: none; } }
 .stc-shell { display: flex; align-items: flex-start; }
 .stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); }
 .stc-main { flex: 1; min-width: 0; padding: 44px 40px 0; }