@nextclaw/ui 0.12.34 → 0.12.35-beta.0

package/src/features/marketplace/components/marketplace-page.tsx

@@ -3,15 +3,11 @@ import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
   MarketplaceManageAction,
-  MarketplacePluginContentView,
   MarketplaceSkillContentView,
   MarketplaceSort,
   MarketplaceItemType,
 } from "@/shared/lib/api";
-import {
-  fetchMarketplacePluginContent,
-  fetchMarketplaceSkillContent,
-} from "@/shared/lib/api";
+import { fetchMarketplaceSkillContent } from "@/shared/lib/api";
 import { useDocBrowser } from "@/shared/components/doc-browser";
 import { useI18n } from "@/app/components/i18n-provider";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
@@ -59,28 +55,11 @@ const SKELETON_CARD_COUNT = 36;
 
 type ScopeType = "all" | "installed";
 
-type MarketplaceRouteType = "plugins" | "skills";
 type MarketplacePageProps = {
-  forcedType?: MarketplaceRouteType;
+  forcedType?: "skills";
 };
 
-function getMarketplaceCopyKeys(typeFilter: MarketplaceItemType) {
-  if (typeFilter === "plugin") {
-    return {
-      pageTitle: "marketplacePluginsPageTitle",
-      pageDescription: "marketplacePluginsPageDescription",
-      tabMarketplace: "marketplaceTabMarketplacePlugins",
-      tabInstalled: "marketplaceTabInstalledPlugins",
-      searchPlaceholder: "marketplaceSearchPlaceholderPlugins",
-      sectionCatalog: "marketplaceSectionPlugins",
-      sectionInstalled: "marketplaceSectionInstalledPlugins",
-      errorLoadData: "marketplaceErrorLoadingPluginsData",
-      errorLoadInstalled: "marketplaceErrorLoadingInstalledPlugins",
-      emptyData: "marketplaceNoPlugins",
-      emptyInstalled: "marketplaceNoInstalledPlugins",
-      installedCountSuffix: "marketplaceInstalledPluginsCountSuffix",
-    };
-  }
+function getMarketplaceCopyKeys() {
   return {
     pageTitle: "marketplaceSkillsPageTitle",
     pageDescription: "marketplaceSkillsPageDescription",
@@ -100,37 +79,17 @@ function getMarketplaceCopyKeys(typeFilter: MarketplaceItemType) {
 export function MarketplacePage(props: MarketplacePageProps = {}) {
   const { forcedType } = props;
   const navigate = useNavigate();
-  const params = useParams<{ type?: string; scene?: string }>();
+  const params = useParams<{ scene?: string }>();
   const { language } = useI18n();
   const docBrowser = useDocBrowser();
 
-  const routeType: MarketplaceRouteType | null = useMemo(() => {
-    if (forcedType === "plugins" || forcedType === "skills") {
-      return forcedType;
-    }
-    if (params.type === "plugins" || params.type === "skills") {
-      return params.type;
-    }
-    return null;
-  }, [forcedType, params.type]);
-
-  useEffect(() => {
-    if (forcedType) {
-      return;
-    }
-    if (!routeType) {
-      navigate("/marketplace/plugins", { replace: true });
-    }
-  }, [forcedType, routeType, navigate]);
-
-  const typeFilter: MarketplaceItemType =
-    routeType === "skills" ? "skill" : "plugin";
+  const typeFilter: MarketplaceItemType = "skill";
   const localeFallbacks = useMemo(
     () => buildLocaleFallbacks(language),
     [language],
   );
 
-  const copyKeys = getMarketplaceCopyKeys(typeFilter);
+  const copyKeys = getMarketplaceCopyKeys();
 
   const [searchText, setSearchText] = useState("");
   const [query, setQuery] = useState("");
@@ -302,12 +261,8 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
         type: item.type,
         spec: installSpec,
         kind: item.install.kind,
-        ...(item.type === "skill"
-          ? {
-              skill: item.slug,
-              installPath: `skills/${item.slug}`,
-            }
-          : {}),
+        skill: item.slug,
+        installPath: `skills/${item.slug}`,
       });
     } catch {
       // handled in mutation onError
@@ -391,10 +346,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     if (!item) {
       const url = buildGenericDetailDataUrl({
         title,
-        typeLabel:
-          record?.type === "plugin"
-            ? t("marketplaceTypePlugin")
-            : t("marketplaceTypeSkill"),
+        typeLabel: t("marketplaceTypeSkill"),
         spec: record?.spec ?? "-",
         summary: t("marketplaceInstalledLocalSummary"),
         metadataRaw: JSON.stringify(record ?? {}, null, 2),
@@ -413,19 +365,12 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       localeFallbacks,
     );
     const detailConfig =
-      item.type === "skill"
-        ? {
-            typeLabel: t("marketplaceTypeSkill"),
-            loadContent: () => fetchMarketplaceSkillContent(item.slug),
-            fallbackContent: t("marketplaceOperationFailed"),
-            defaultContent: undefined,
-          }
-        : {
-            typeLabel: t("marketplaceTypePlugin"),
-            loadContent: () => fetchMarketplacePluginContent(item.slug),
-            fallbackContent: "-",
-            defaultContent: item.summary,
-          };
+      {
+        typeLabel: t("marketplaceTypeSkill"),
+        loadContent: () => fetchMarketplaceSkillContent(item.slug),
+        fallbackContent: t("marketplaceOperationFailed"),
+        defaultContent: undefined,
+      };
     docBrowser.open(
       buildGenericDetailDataUrl({
         title,
@@ -436,8 +381,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       openOptions,
     );
     try {
-      const content: MarketplaceSkillContentView | MarketplacePluginContentView =
-        await detailConfig.loadContent();
+      const content: MarketplaceSkillContentView = await detailConfig.loadContent();
       if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
         return;
       }

package/src/features/marketplace/hooks/use-marketplace-curated-scene-route.ts

@@ -14,7 +14,7 @@ type MarketplaceCuratedSceneRouteParams = {
   items: MarketplaceItemSummary[];
   installedRecordLookup: Map<string, MarketplaceInstalledRecord>;
   scene?: string;
-  forcedType?: "plugins" | "skills";
+  forcedType?: "skills";
   typeFilter: MarketplaceItemType;
   scope: "all" | "installed";
   searchText: string;

package/src/features/marketplace/hooks/use-marketplace.ts

@@ -148,13 +148,7 @@ export function useInstallMarketplaceItem() {
         queryKey: ['marketplace-installed', result.type],
         refetchType: 'inactive'
       });
-      if (result.type === 'plugin') {
-        queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
-      }
-      const fallback = result.type === 'plugin'
-        ? t('marketplaceInstallSuccessPlugin')
-        : t('marketplaceInstallSuccessSkill');
-      toast.success(result.message || fallback);
+      toast.success(result.message || t('marketplaceInstallSuccessSkill'));
     },
     onError: (error: Error) => {
       toast.error(error.message || t('marketplaceInstallFailed'));
@@ -180,9 +174,6 @@ export function useManageMarketplaceItem() {
         queryKey: ['marketplace-installed', result.type],
         refetchType: 'inactive'
       });
-      if (result.type === 'plugin') {
-        queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
-      }
       const fallback = result.action === 'enable'
         ? t('marketplaceEnableSuccess')
         : result.action === 'disable'

package/src/features/marketplace/utils/marketplace-installed-cache.utils.test.ts

@@ -11,57 +11,59 @@ import {
 } from './marketplace-installed-cache.utils';
 
 describe('marketplace-installed-cache', () => {
-  it('adds a plugin record immediately after install success', () => {
+  it('adds an MCP record immediately after install success', () => {
     const request: MarketplaceInstallRequest = {
-      type: 'plugin',
-      spec: '@nextclaw/channel-plugin-slack',
-      kind: 'npm'
+      type: 'mcp',
+      spec: 'filesystem',
+      kind: 'template',
+      name: 'filesystem'
     };
     const result: MarketplaceInstallResult = {
-      type: 'plugin',
-      spec: '@nextclaw/channel-plugin-slack',
+      type: 'mcp',
+      spec: 'filesystem',
+      name: 'filesystem',
       message: 'installed'
     };
 
     const next = applyInstallResultToInstalledView({ request, result });
 
     expect(next.total).toBe(1);
-    expect(next.specs).toEqual(['@nextclaw/channel-plugin-slack']);
+    expect(next.specs).toEqual(['filesystem']);
     expect(next.records[0]).toMatchObject({
-      type: 'plugin',
-      spec: '@nextclaw/channel-plugin-slack',
+      type: 'mcp',
+      spec: 'filesystem',
       enabled: true,
       origin: 'marketplace',
       runtimeStatus: 'ready'
     });
   });
 
-  it('marks a plugin record as disabled immediately after disable success', () => {
+  it('marks an MCP record as disabled immediately after disable success', () => {
     const view: MarketplaceInstalledView = {
-      type: 'plugin',
+      type: 'mcp',
       total: 1,
-      specs: ['@nextclaw/channel-plugin-slack'],
+      specs: ['filesystem'],
       records: [
         {
-          type: 'plugin',
-          id: '@nextclaw/channel-plugin-slack',
-          spec: '@nextclaw/channel-plugin-slack',
-          label: 'Slack Channel',
+          type: 'mcp',
+          id: 'filesystem',
+          spec: 'filesystem',
+          label: 'Filesystem',
           enabled: true,
           origin: 'marketplace'
         }
       ]
     };
     const request: MarketplaceManageRequest = {
-      type: 'plugin',
+      type: 'mcp',
       action: 'disable',
-      id: '@nextclaw/channel-plugin-slack',
-      spec: '@nextclaw/channel-plugin-slack'
+      id: 'filesystem',
+      spec: 'filesystem'
     };
     const result: MarketplaceManageResult = {
-      type: 'plugin',
+      type: 'mcp',
       action: 'disable',
-      id: '@nextclaw/channel-plugin-slack',
+      id: 'filesystem',
       message: 'disabled'
     };
 

package/src/features/system-status/managers/system-status.manager.bootstrap-polling.test.ts

@@ -27,10 +27,10 @@ describe('getRuntimeBootstrapPollInterval', () => {
         ncpAgent: {
           state: 'running',
         },
-        pluginHydration: {
+        extensionLoading: {
           state: 'pending',
-          loadedPluginCount: 0,
-          totalPluginCount: 0,
+          loadedExtensionCount: 0,
+          totalExtensionCount: 0,
         },
         channels: {
           state: 'pending',
@@ -51,10 +51,10 @@ describe('getRuntimeBootstrapPollInterval', () => {
           state: 'error',
           error: 'startup failed',
         },
-        pluginHydration: {
+        extensionLoading: {
           state: 'pending',
-          loadedPluginCount: 0,
-          totalPluginCount: 0,
+          loadedExtensionCount: 0,
+          totalExtensionCount: 0,
         },
         channels: {
           state: 'pending',
@@ -75,10 +75,10 @@ describe('getRuntimeBootstrapPollInterval', () => {
         ncpAgent: {
           state: 'ready',
         },
-        pluginHydration: {
+        extensionLoading: {
           state: 'ready',
-          loadedPluginCount: 1,
-          totalPluginCount: 1,
+          loadedExtensionCount: 1,
+          totalExtensionCount: 1,
         },
         channels: {
           state: 'ready',
@@ -108,10 +108,10 @@ describe('getRuntimeBootstrapPollInterval', () => {
         ncpAgent: {
           state: 'ready',
         },
-        pluginHydration: {
+        extensionLoading: {
           state: 'ready',
-          loadedPluginCount: 1,
-          totalPluginCount: 1,
+          loadedExtensionCount: 1,
+          totalExtensionCount: 1,
         },
         channels: {
           state: 'ready',

package/src/features/system-status/managers/system-status.manager.test.ts

@@ -10,10 +10,10 @@ const readyBootstrapStatus: BootstrapStatusView = {
   ncpAgent: {
     state: 'ready',
   },
-  pluginHydration: {
+  extensionLoading: {
     state: 'ready',
-    loadedPluginCount: 1,
-    totalPluginCount: 1,
+    loadedExtensionCount: 1,
+    totalExtensionCount: 1,
   },
   channels: {
     state: 'ready',
@@ -53,10 +53,10 @@ describe('systemStatusManager', () => {
         state: 'error',
         error: 'startup failed',
       },
-      pluginHydration: {
+      extensionLoading: {
         state: 'pending',
-        loadedPluginCount: 0,
-        totalPluginCount: 0,
+        loadedExtensionCount: 0,
+        totalExtensionCount: 0,
       },
       channels: {
         state: 'pending',

package/src/index.css

@@ -44,7 +44,7 @@
     user-select: none;
   }
 
-  .desktop-window-no-drag {
+  .desktop-window-no-drag, .desktop-window-drag :is(button, a, input, select, textarea, [role='button'], [tabindex]) {
     -webkit-app-region: no-drag;
     app-region: no-drag;
   }

package/src/platforms/desktop/components/desktop-app-shell.test.tsx

@@ -1,5 +1,6 @@
 import { act, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "react-router-dom";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { DesktopAppShell } from "@/platforms/desktop/components/desktop-app-shell";
 
@@ -7,6 +8,10 @@ vi.mock("@/app/components/layout/sidebar", () => ({
   Sidebar: () => <aside data-testid="settings-sidebar">Settings Sidebar</aside>,
 }));
 
+vi.mock("@/platforms/mobile", () => ({
+  MobileBottomNav: () => <nav data-testid="mobile-bottom-nav" />,
+}));
+
 type WindowStateListener = (snapshot: { isMaximized: boolean }) => void;
 
 let windowStateListener: WindowStateListener | null = null;
@@ -27,7 +32,7 @@ function setDesktopPlatform(platform: string | null, isMaximized = false): void
     : undefined;
 }
 
-function renderDesktopShell(platform: string | null) {
+function renderDesktopShell(platform: string | null, isMobileLayout = false) {
   setDesktopPlatform(platform);
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -39,13 +44,16 @@ function renderDesktopShell(platform: string | null) {
 
   return render(
     <QueryClientProvider client={queryClient}>
-      <DesktopAppShell
-        pathname="/chat"
-        isDocBrowserOpen={false}
-        docBrowserMode="floating"
-      >
-        <div data-testid="app-content">App Content</div>
-      </DesktopAppShell>
+      <MemoryRouter initialEntries={["/chat"]}>
+        <DesktopAppShell
+          pathname="/chat"
+          isMobileLayout={isMobileLayout}
+          isDocBrowserOpen={false}
+          docBrowserMode="floating"
+        >
+          <div data-testid="app-content">App Content</div>
+        </DesktopAppShell>
+      </MemoryRouter>
     </QueryClientProvider>,
   );
 }
@@ -60,19 +68,19 @@ describe("DesktopAppShell", () => {
 
     const chrome = screen.getByTestId("desktop-window-chrome");
     const sidebarChrome = screen.getByTestId("desktop-window-chrome-sidebar");
-    const mainDragRegion = screen.getByTestId("desktop-window-chrome-main-drag-region");
     const resizeStrip = screen.getByTestId("desktop-window-chrome-resize-strip");
     const controls = screen.getByTestId("desktop-window-controls");
 
     expect(chrome).toBeTruthy();
     expect(chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height")).toBe("40px");
     expect(chrome.className).toContain("bg-secondary");
-    expect(chrome.className).toContain("border-b");
+    expect(chrome.className).not.toContain(" shrink-0 border-b ");
+    expect(chrome.className).toContain("after:left-[var(--desktop-sidebar-width)]");
+    expect(chrome.className).toContain("after:border-b");
     expect(chrome.className).toContain("desktop-window-drag");
     expect(sidebarChrome.className).toContain("w-[var(--desktop-sidebar-width)]");
-    expect(sidebarChrome.className).toContain("desktop-window-no-drag");
-    expect(mainDragRegion.className).toContain("flex-1");
-    expect(mainDragRegion.className).toContain("desktop-window-drag");
+    expect(sidebarChrome.className).not.toContain("border-b");
+    expect(sidebarChrome.className).toContain("desktop-window-drag");
     expect(resizeStrip.className).toContain("desktop-window-no-drag");
     expect(resizeStrip.className).toContain("top-0");
     expect(resizeStrip.className).toContain("h-1");
@@ -102,4 +110,12 @@ describe("DesktopAppShell", () => {
     expect(screen.queryByTestId("desktop-window-chrome")).toBeNull();
     expect(screen.getByTestId("app-content")).toBeTruthy();
   });
+
+  it("keeps mobile bottom navigation visible inside Windows desktop hosts at narrow widths", () => {
+    renderDesktopShell("win32", true);
+
+    expect(screen.getByTestId("desktop-window-chrome")).toBeTruthy();
+    expect(screen.getByTestId("mobile-bottom-nav")).toBeTruthy();
+    expect(screen.getByTestId("app-content")).toBeTruthy();
+  });
 });

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -1,9 +1,13 @@
 import { lazy, Suspense } from "react";
 import type { CSSProperties } from "react";
-import { isMainWorkspaceRoute } from "@/app/configs/app-navigation.config";
+import {
+  isChatSessionDetailRoute,
+  isMainWorkspaceRoute,
+} from "@/app/configs/app-navigation.config";
 import { Sidebar } from "@/app/components/layout/sidebar";
 import { DesktopWindowChrome } from "@/platforms/desktop/components/desktop-window-chrome";
 import { isWindowsDesktopHost } from "@/platforms/desktop/utils/desktop-host.utils";
+import { MobileBottomNav } from "@/platforms/mobile";
 import { cn } from "@/shared/lib/utils";
 
 const DocBrowser = lazy(async () => ({
@@ -12,32 +16,21 @@ const DocBrowser = lazy(async () => ({
 
 type DesktopAppShellProps = {
   pathname: string;
+  isMobileLayout?: boolean;
   isDocBrowserOpen: boolean;
   docBrowserMode: "floating" | "docked";
   children: React.ReactNode;
 };
 
-type DesktopShellStyle = CSSProperties & {
-  "--desktop-titlebar-height"?: string;
-  "--desktop-caption-safe-right"?: string;
-  "--desktop-sidebar-width"?: string;
-};
-
-function createWindowsDesktopShellStyle(isMainRoute: boolean): DesktopShellStyle {
-  return {
-    "--desktop-titlebar-height": "40px",
-    "--desktop-caption-safe-right": "140px",
-    "--desktop-sidebar-width": isMainRoute ? "280px" : "240px",
-  };
-}
-
 export function DesktopAppShell({
   pathname,
+  isMobileLayout = false,
   isDocBrowserOpen,
   docBrowserMode,
   children,
 }: DesktopAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
+  const showMobileBottomNav = isMobileLayout && !isChatSessionDetailRoute(pathname);
   const shouldUseWindowsChrome = isWindowsDesktopHost();
 
   return (
@@ -46,7 +39,11 @@ export function DesktopAppShell({
         "h-screen flex flex-col overflow-hidden bg-background font-sans text-foreground",
         shouldUseWindowsChrome ? "rounded-[10px]" : null,
       )}
-      style={shouldUseWindowsChrome ? createWindowsDesktopShellStyle(isMainRoute) : undefined}
+      style={shouldUseWindowsChrome ? ({
+        "--desktop-titlebar-height": "40px",
+        "--desktop-caption-safe-right": "140px",
+        "--desktop-sidebar-width": isMainRoute ? "280px" : "240px",
+      } as CSSProperties) : undefined}
     >
       {shouldUseWindowsChrome ? <DesktopWindowChrome /> : null}
       <div className="flex min-h-0 flex-1 overflow-hidden">
@@ -70,6 +67,7 @@ export function DesktopAppShell({
           ) : null}
         </div>
       </div>
+      {showMobileBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen && docBrowserMode === "floating" ? (
         <Suspense fallback={null}>
           <DocBrowser />

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -25,7 +25,7 @@ export function DesktopWindowChrome() {
 
   return (
     <header
-      className="desktop-window-drag relative flex h-[var(--desktop-titlebar-height)] shrink-0 border-b border-[#ebe7dc]/80 bg-secondary"
+      className="desktop-window-drag relative flex h-[var(--desktop-titlebar-height)] shrink-0 bg-secondary after:absolute after:bottom-0 after:left-[var(--desktop-sidebar-width)] after:right-0 after:border-b after:border-[#ebe7dc]/80"
       data-testid="desktop-window-chrome"
     >
       <div
@@ -33,7 +33,7 @@ export function DesktopWindowChrome() {
         data-testid="desktop-window-chrome-resize-strip"
       />
       <div
-        className="desktop-window-no-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary pl-4 pr-3 text-secondary-foreground"
+        className="desktop-window-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary pl-4 pr-3 text-secondary-foreground"
         data-testid="desktop-window-chrome-sidebar"
       >
         <BrandHeader
@@ -41,7 +41,6 @@ export function DesktopWindowChrome() {
           density="chrome"
         />
       </div>
-      <div aria-hidden="true" className="desktop-window-drag h-full min-w-0 flex-1" data-testid="desktop-window-chrome-main-drag-region" />
       <div
         className="desktop-window-no-drag absolute right-0 top-0 z-20 flex h-full w-[var(--desktop-caption-safe-right)] items-start justify-end"
         data-testid="desktop-window-controls"

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -13,12 +13,14 @@ const DocBrowser = lazy(async () => ({
 type MobileAppShellProps = {
   pathname: string;
   isDocBrowserOpen: boolean;
+  topbarLeadingInset?: string;
   children: React.ReactNode;
 };
 
 export function MobileAppShell({
   pathname,
   isDocBrowserOpen,
+  topbarLeadingInset,
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
@@ -27,7 +29,7 @@ export function MobileAppShell({
 
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">
-      {showTopbar ? <MobileTopbar /> : null}
+      {showTopbar ? <MobileTopbar leadingInset={topbarLeadingInset} /> : null}
       <div className="relative flex-1 min-h-0 overflow-hidden">
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { resolveMobileRouteMeta } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 
-export function MobileTopbar() {
+export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const routeMeta = resolveMobileRouteMeta(pathname, t);
@@ -16,7 +16,10 @@ export function MobileTopbar() {
         paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
       }}
     >
-      <div className="flex min-h-[2.75rem] items-center gap-2 px-3 py-1.5">
+      <div
+        className="flex min-h-[2.75rem] items-center gap-2 py-1.5 pl-3 pr-3"
+        style={{ paddingLeft: leadingInset ? `calc(${leadingInset} + 0.75rem)` : undefined }}
+      >
         {routeMeta.backTarget ? (
           <button
             type="button"
@@ -26,9 +29,7 @@ export function MobileTopbar() {
           >
             <ArrowLeft className="h-4 w-4" />
           </button>
-        ) : (
-          null
-        )}
+        ) : null}
         <div className="min-w-0 flex-1">
           <h1 className="truncate text-center text-[15px] font-semibold text-gray-900">
             {routeMeta.title}

package/src/platforms/mobile/index.ts

@@ -1,3 +1,4 @@
 export { MobileAppShell } from "./components/mobile-app-shell";
+export { MobileBottomNav } from "./components/mobile-bottom-nav";
 export { MobileSettingsShell } from "./components/mobile-settings-shell";
 export { ChatMobileShell } from "./components/chat-mobile-shell";