feat(embed): add navbar brand props and document embed styling

Expose showNavbarBrand and navbarBrandLabel on RosViewer so hosts can hide
or replace the default ROS View label, and document CSS scoping plus branding
in the English and Chinese embedding guides.

Author: joaner

docs/EMBEDDING.md

@@ -31,6 +31,8 @@ The component requires its bundled CSS. Import it once at your application root:
 import '@ioai/rosview/style.css';
 ```
 
+Styles are scoped to `#rosview-root` inside the bundle, so Tailwind preflight does not reset global elements (navbar, buttons, etc.) in your host application.
+
 ---
 
 ## Step 2 — Basic usage
@@ -133,6 +135,29 @@ const rows = parseRemoteDatasetListJson(await res.json());
 
 ---
 
+## Advanced: Navbar branding
+
+The navbar shows **ROS View** on the left by default. When embedding inside a larger app, you can hide it or replace it with your product name:
+
+```tsx
+// Hide the brand button (File / Layout menus remain)
+<RosViewer url="..." showNavbarBrand={false} />
+
+// Replace with host branding
+<RosViewer url="..." navbarBrandLabel="Acme Data Portal" />
+```
+
+Related props:
+
+| Prop | Description |
+|------|-------------|
+| `showNavbarBrand` | Left brand button visibility (`true` by default). |
+| `navbarBrandLabel` | Custom brand text; defaults to the localized product name. |
+| `navbarSourceName` | Center label for the active dataset (separate from brand). |
+| `showNavbar` | Hides the entire navbar when `false` (via `chrome` or explicit prop). |
+
+---
+
 ## Advanced: Controlled theme & language
 
 Disable internal localStorage persistence and fully control state from your application:

docs/EMBEDDING.zh.md

@@ -31,6 +31,8 @@ npm install @ioai/rosview
 import '@ioai/rosview/style.css';
 ```
 
+样式在构建产物中限定在 `#rosview-root` 内，Tailwind preflight 不会重置宿主应用的全局元素（导航栏、按钮等）。
+
 ---
 
 ## 步骤 2 — 基本用法
@@ -133,6 +135,29 @@ const rows = parseRemoteDatasetListJson(await res.json());
 
 ---
 
+## 进阶：Navbar 品牌文案
+
+Navbar 左侧默认显示 **ROS View**。嵌入到更大页面时，可以隐藏或替换为你的产品名：
+
+```tsx
+// 隐藏品牌按钮（File / Layout 菜单仍保留）
+<RosViewer url="..." showNavbarBrand={false} />
+
+// 替换为宿主品牌
+<RosViewer url="..." navbarBrandLabel="Acme 数据平台" />
+```
+
+相关 props：
+
+| Prop | 说明 |
+|------|------|
+| `showNavbarBrand` | 左侧品牌按钮是否显示（默认 `true`）。 |
+| `navbarBrandLabel` | 自定义品牌文案；未设置时使用本地化产品名。 |
+| `navbarSourceName` | 中间区域的数据源名称（与品牌文案无关）。 |
+| `showNavbar` | 设为 `false` 时隐藏整条 Navbar（通过 `chrome` 或显式 prop）。 |
+
+---
+
 ## 进阶：受控主题与语言
 
 关闭组件内部的 localStorage 持久化，由宿主应用完全控制状态：

src/app/AppShell.tsx

@@ -27,6 +27,8 @@ interface AppShellProps {
   onLanguageChange: (lang: 'en' | 'zh' | 'ja') => void;
   showLanguageSwitcher?: boolean;
   showThemeSwitcher?: boolean;
+  showNavbarBrand?: boolean;
+  navbarBrandLabel?: string;
   onBrandClick?: () => void;
   preferAutoLayout?: boolean;
   preferencePersistence: PreferencePersistence;
@@ -77,6 +79,8 @@ export const AppShell: React.FC<AppShellProps> = ({
   onLanguageChange,
   showLanguageSwitcher = true,
   showThemeSwitcher = true,
+  showNavbarBrand = true,
+  navbarBrandLabel,
   onBrandClick,
   preferAutoLayout = false,
   preferencePersistence,
@@ -150,6 +154,8 @@ export const AppShell: React.FC<AppShellProps> = ({
           onLanguageChange={onLanguageChange}
           showLanguageSwitcher={showLanguageSwitcher}
           showThemeSwitcher={showThemeSwitcher}
+          showNavbarBrand={showNavbarBrand}
+          brandLabel={navbarBrandLabel}
           onBrandClick={onBrandClick}
           onOpenFilePick={hideOpenFileMenus ? undefined : onOpenFilePick}
           onOpenDirectory={hideOpenFileMenus ? undefined : onOpenDirectory}

src/features/viewer/RosViewerImpl.tsx

@@ -250,6 +250,10 @@ export interface RosViewerProps {
   extensions?: RosViewExtension[];
   /** Optional center label override shown in navbar source area. */
   navbarSourceName?: string;
+  /** Whether to show the left navbar brand button. @default true */
+  showNavbarBrand?: boolean;
+  /** Custom label for the left navbar brand button (defaults to product name). */
+  navbarBrandLabel?: string;
   /** Whether to show navbar language switcher. @default true */
   showLanguageSwitcher?: boolean;
   /** Whether to show navbar theme switcher. @default true */
@@ -1145,6 +1149,8 @@ export const RosViewer: React.FC<RosViewerProps> = (props) => {
       onLanguageChange={handleLanguageChange}
       showLanguageSwitcher={props.showLanguageSwitcher ?? true}
       showThemeSwitcher={props.showThemeSwitcher ?? true}
+      showNavbarBrand={props.showNavbarBrand ?? true}
+      navbarBrandLabel={props.navbarBrandLabel}
       onBrandClick={handleGoHome}
       preferAutoLayout={props.preferAutoLayout ?? false}
       preferencePersistence={persistence}
@@ -1206,6 +1212,8 @@ export const RosViewer: React.FC<RosViewerProps> = (props) => {
             onLanguageChange={handleLanguageChange}
             showLanguageSwitcher={props.showLanguageSwitcher ?? true}
             showThemeSwitcher={props.showThemeSwitcher ?? true}
+            showNavbarBrand={props.showNavbarBrand ?? true}
+            brandLabel={props.navbarBrandLabel}
             onBrandClick={handleGoHome}
             onOpenFilePick={() => {
               clearOpenFeedback();
@@ -1309,6 +1317,8 @@ export const RosViewer: React.FC<RosViewerProps> = (props) => {
               onLanguageChange={handleLanguageChange}
               showLanguageSwitcher={props.showLanguageSwitcher ?? true}
               showThemeSwitcher={props.showThemeSwitcher ?? true}
+              showNavbarBrand={props.showNavbarBrand ?? true}
+              brandLabel={props.navbarBrandLabel}
               onBrandClick={handleGoHome}
               onOpenFilePick={() => {
                 clearOpenFeedback();

src/features/workspace/navbar/Navbar.tsx

@@ -83,6 +83,10 @@ interface NavbarProps {
   onLanguageChange?: (lang: 'en' | 'zh' | 'ja') => void;
   showLanguageSwitcher?: boolean;
   showThemeSwitcher?: boolean;
+  /** When false, hide the left brand button. @default true */
+  showNavbarBrand?: boolean;
+  /** Override default product name in the left brand button. */
+  brandLabel?: string;
   onBrandClick?: () => void;
   onOpenFilePick?: () => void;
   onOpenDirectory?: () => void;
@@ -103,6 +107,8 @@ export const Navbar: React.FC<NavbarProps> = ({
   onLanguageChange,
   showLanguageSwitcher = true,
   showThemeSwitcher = true,
+  showNavbarBrand = true,
+  brandLabel,
   onBrandClick,
   onOpenFilePick,
   onOpenDirectory,
@@ -164,20 +170,24 @@ export const Navbar: React.FC<NavbarProps> = ({
     onOpenFilePick || onOpenDirectory || onOpenTarPick || onOpenRemotePrompt || onOpenSampleDialog;
   const showCenter = Boolean(sourceLoading || (sourceName && sourceName.trim().length > 0));
   const centerLabel = sourceLoading ? formatMessage({ id: 'navbar.sourceLoading' }) : (sourceName ?? '');
+  const brandText = brandLabel ?? formatMessage({ id: 'common.productName' });
+  const brandAccessibleName = brandLabel ?? formatMessage({ id: 'navbar.goHome' });
 
   return (
     <nav className="sticky top-0 z-50 w-full shrink-0 border-b border-border bg-background select-none">
       <div className="grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] items-center gap-x-2 gap-y-0 px-4">
         <div className="flex min-w-0 items-center gap-2 justify-self-start sm:gap-3">
-          <button
-            type="button"
-            className="min-w-0 max-w-[min(11rem,28vw)] shrink truncate rounded-sm text-left text-sm font-semibold tracking-tight text-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:max-w-[11rem]"
-            onClick={onBrandClick}
-            title={formatMessage({ id: 'navbar.goHome' })}
-            aria-label={formatMessage({ id: 'navbar.goHome' })}
-          >
-            {formatMessage({ id: 'common.productName' })}
-          </button>
+          {showNavbarBrand ? (
+            <button
+              type="button"
+              className="min-w-0 max-w-[min(11rem,28vw)] shrink truncate rounded-sm text-left text-sm font-semibold tracking-tight text-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:max-w-[11rem]"
+              onClick={onBrandClick}
+              title={brandAccessibleName}
+              aria-label={brandAccessibleName}
+            >
+              {brandText}
+            </button>
+          ) : null}
 
           <Menubar
             ref={leftMenubarRef}