improvement(docs): restructure sidebar, align chrome, rename Mothership to Chat (#6296)

Sidebar: 11 separator groups become 5, with each module a collapsible folder
that auto-opens on the active page. 61 always-visible rows drop to 16. Groups
mirror the app's own nav (Chats/Workspace/Workflows) rather than inventing a
taxonomy; Enterprise and Self-Hosting are hoisted out of Platform.

Chrome: register the `hover-hover` variant, without which every @sim/emcn hover
state silently compiled to nothing; restore the sidebar's Geist font stack; add
11 emcn tokens that were falling back to currentColor; adopt the named type
scale; align row geometry, hover tokens and group labels with the app.

Rename: mothership/ -> chat/ with redirects for the old URLs. Asset paths,
the @mothership.sim.ai domain and the `mothership` log-trigger enum value are
deliberately left alone -- they are CDN objects, a real domain, and a live
product value.

Also removes the page-type badge, drops the "Next" heading from the ToC, and
lets FAQ rows open independently so expanding one no longer shifts the page.

Author: waleedlatif1

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -10,7 +10,6 @@ import { notFound } from 'next/navigation'
 import { PageFooter } from '@/components/docs-layout/page-footer'
 import { PageNavigationArrows } from '@/components/docs-layout/page-navigation-arrows'
 import { LLMCopyButton } from '@/components/page-actions'
-import { PageTypeBadge } from '@/components/page-type-badge'
 import { StructuredData } from '@/components/structured-data'
 import { CodeBlock } from '@/components/ui/code-block'
 import { Heading } from '@/components/ui/heading'
@@ -23,6 +22,21 @@ import { DOCS_BASE_URL } from '@/lib/urls'
 const SUPPORTED_LANGUAGES: Set<string> = new Set(i18n.languages)
 const BASE_URL = DOCS_BASE_URL
 
+/**
+ * Most pages close with a `## Next` / `## Next steps` grid of onward links.
+ * That heading is navigation, not content, so it is kept out of the table of
+ * contents — the ToC should say what the page covers, not where to go after it.
+ * The heading itself still renders above the cards.
+ *
+ * Matched on the slug rather than the rendered title because a ToC title is a
+ * `ReactNode`; the trailing group tolerates the slugger's dedupe suffix.
+ */
+const ONWARD_NAV_SLUG = /^#next(-steps)?(-\d+)?$/i
+
+function isContentHeading(item: { url: string }): boolean {
+  return !ONWARD_NAV_SLUG.test(item.url)
+}
+
 const OG_LOCALE_MAP: Record<string, string> = {
   en: 'en_US',
   es: 'es_ES',
@@ -171,7 +185,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
           breadcrumb={breadcrumbs}
         />
         <DocsPage
-          toc={data.toc}
+          toc={data.toc.filter(isContentHeading)}
           breadcrumb={{
             enabled: false,
           }}
@@ -218,7 +232,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
         breadcrumb={breadcrumbs}
       />
       <DocsPage
-        toc={data.toc}
+        toc={data.toc.filter(isContentHeading)}
         full={data.full || isAcademy}
         breadcrumb={{
           enabled: false,
@@ -244,7 +258,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
             </div>
             <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
           </div>
-          {data.pageType && <PageTypeBadge type={data.pageType} className='mb-3' />}
           <DocsTitle className='mb-2'>{data.title}</DocsTitle>
         </div>
         <DocsBody>

apps/docs/app/global.css

@@ -5,6 +5,19 @@
 @source "../../../packages/emcn/src";
 @source "../../../packages/workflow-renderer/src";
 
+/* Every @sim/emcn component expresses hover through `hover-hover:` so touch
+   devices never latch a sticky hover state. The app registers it as a plugin
+   variant in apps/sim/tailwind.config.ts; docs is CSS-first Tailwind v4 with no
+   config, so without this declaration the variant compiles to nothing and every
+   emcn hover state silently no-ops here. */
+@custom-variant hover-hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
 /* Prevent overscroll bounce effect on the page */
 html,
 body {
@@ -114,11 +127,24 @@ body {
   --badge-error-text: #dc2626;
   --badge-gray-bg: #e7e5e4;
   --badge-gray-text: #57534e;
+  --code-bg: #f5f5f5;
+  --code-foreground: #1a1a1a;
+  --code-line-number: #737373;
+  --selection-bg: #add6ff;
+  --selection-dark: #264f78;
+  --highlight-search-active: #f6ad55;
   --scrollbar-thumb-color: #c0c0c0;
   --scrollbar-thumb-hover-color: #a8a8a8;
   --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.11);
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
+  /* z-index scale — poppers sit above the modal so menus stay clickable over
+     the modal overlay. Mirrors apps/sim/app/_styles/globals.css. */
+  --z-toast: 150;
+  --z-modal: 200;
+  --z-popover: 300;
+  --z-tooltip: 400;
 }
 
 .dark {
@@ -185,8 +211,13 @@ body {
   --badge-error-text: #fca5a5;
   --badge-gray-bg: #3a3a3a;
   --badge-gray-text: #a8a8a8;
+  --code-bg: #1f1f1f;
+  --code-foreground: #eeeeee;
+  --code-line-number: #a8a8a8;
+  --selection-bg: #264f78;
   --scrollbar-thumb-color: #5a5a5a;
   --scrollbar-thumb-hover-color: #6a6a6a;
+  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.3);
 }
 
 /* Scrollbars — platform thumb tokens, transparent track */
@@ -358,10 +389,10 @@ aside#nd-sidebar [data-radix-scroll-area-viewport] {
   }
 }
 
-/* Sidebar spacing — left padding aligns item text with navbar content (item has 14px internal padding) */
+/* Sidebar spacing — left padding aligns item text with navbar content (item has 8px internal padding) */
 [data-sidebar-viewport],
 #nd-sidebar > div {
-  padding: 0 14px 0 calc(var(--nav-inset) - 14px) !important;
+  padding: 0 14px 0 calc(var(--nav-inset) - 8px) !important;
   background: transparent !important;
 }
 
@@ -386,15 +417,20 @@ html #nd-sidebar [data-radix-scroll-area-viewport] > div {
 /* Target Link and button elements in sidebar - override Fumadocs itemVariants */
 /* Exclude the small chevron-only toggle buttons */
 /* Using html prefix for higher specificity over Tailwind v4 utilities */
+/* NEVER set `display` here. This selector scores (1,2,2) and carries
+   `!important`, so it out-specifies every rule below that hides the language
+   selector, theme toggle, and search button — a `display` declaration here
+   forces all of them back into the sidebar. The 30px chip height therefore
+   comes from line-height + padding (20 + 5 + 5), not from flex centering. */
 html #nd-sidebar a:not(:has(span.font-mono)),
 html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
   font-size: 0.875rem !important; /* 14px to match navbar items */
-  line-height: 1.4 !important;
-  padding: 0.375rem 0.875rem !important;
-  font-weight: 450 !important;
+  line-height: 20px !important;
+  padding: 5px 0.5rem !important; /* 30px tall overall — the app's chip pill, at its px-2 */
+  font-weight: 400 !important;
   border-radius: 0.5rem !important; /* platform rounded-lg */
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    sans-serif !important;
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
 
 /* Sidebar text — platform --text-body */
@@ -428,28 +464,24 @@ html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"])
   margin-bottom: 0 !important;
 }
 
-/* Section separator headers — styling handled by component, override fumadocs defaults */
+/* Section separator headers — match the app sidebar's group label: 12px,
+   sentence case, normal weight. Only the fumadocs defaults are overridden here;
+   size and color stay on the component. */
 [data-sidebar-viewport] [data-separator] p,
 #nd-sidebar [data-separator] p {
-  font-size: 0.625rem !important; /* 10px */
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.06em !important;
+  font-weight: 400 !important;
+  text-transform: none !important;
+  letter-spacing: normal !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
-/* First separator has no top margin or divider; subsequent ones show the divider on desktop */
+/* The first group sits flush against the top padding — it has nothing to be
+   separated from. */
 [data-separator]:not([data-separator] ~ [data-separator]) {
   margin-top: 0;
 }
 
-@media (min-width: 1024px) {
-  [data-separator] ~ [data-separator] > .separator-divider {
-    display: block;
-  }
-}
-
 /* Active state — aligned with platform --surface-active */
 #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
 #nd-sidebar button[data-active="true"] {
@@ -709,7 +741,7 @@ main article h4,
 [data-content] h4,
 #nd-page h3,
 #nd-page h4 {
-  font-size: 1rem !important;
+  font-size: var(--text-md) !important;
   font-weight: 470 !important;
   letter-spacing: -0.01em;
   color: var(--text-body);
@@ -751,18 +783,26 @@ main article li,
   border-left: none !important;
 }
 
+/* The clerk TOC draws its active range twice: a track segment, plus a dot that
+   animates along the track to the current heading. The dot is redundant with the
+   segment and reads as a stray artifact, so hide it and keep the segment. It is
+   the only node fumadocs gives an inline offset-path, which is what anchors it. */
+#nd-toc [style*="offset-path"] {
+  display: none !important;
+}
+
 /* TOC heading — align weight with landing */
 #nd-toc h3,
 #nd-toc [class*="title"] {
   font-weight: 480 !important;
-  font-size: 0.8125rem !important;
+  font-size: var(--text-small) !important;
   color: var(--text-muted);
 }
 
 /* TOC links — softer colors aligned with landing muted text */
 #nd-toc a {
   font-weight: 430 !important;
-  font-size: 0.8125rem !important;
+  font-size: var(--text-small) !important;
   color: var(--text-muted);
   transition: color 0.2s;
 }
@@ -905,7 +945,7 @@ html #nd-sidebar a:has(span.font-mono.font-medium) {
   align-items: center;
   justify-content: center;
   width: 2.625rem;
-  font-size: 0.625rem !important;
+  font-size: var(--text-micro) !important;
   line-height: 1 !important;
   padding: 0.15625rem 0.25rem;
   border-radius: 0.375rem;
@@ -917,7 +957,7 @@ html #nd-sidebar a:has(span.font-mono.font-medium) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.625rem !important;
+  font-size: var(--text-micro) !important;
   line-height: 1 !important;
   padding: 0.15625rem 0.375rem;
   border-radius: 0.375rem;
@@ -984,7 +1024,7 @@ div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {
   span.font-mono.font-medium {
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
   font-weight: 600 !important;
-  font-size: 0.6875rem !important;
+  font-size: var(--text-xs) !important;
   letter-spacing: 0.025em;
   text-transform: uppercase;
   padding: 0.125rem 0.5rem !important;
@@ -1033,7 +1073,7 @@ div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {
   background: none !important;
   border: none !important;
   padding: 0 !important;
-  font-size: 0.8125rem !important;
+  font-size: var(--text-small) !important;
 }
 /* Inline code in API pages — neutral color aligned with sim design.
    Exclude code inside the method+path bar (handled above). */
@@ -1213,7 +1253,7 @@ div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {
   color: var(--text-secondary);
   padding: 0.1875rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1223,7 +1263,6 @@ html.dark
   .flex.flex-wrap.items-center.gap-3.not-prose
   > span.text-sm.font-mono.text-fd-muted-foreground {
   background-color: var(--surface-4);
-  color: var(--text-secondary);
 }
 
 /* Hide the "*" inside the name span — we'll add "required" as a ::after on the flex row */
@@ -1242,7 +1281,7 @@ html.dark
   color: var(--badge-error-text);
   padding: 0.1875rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1284,7 +1323,7 @@ html.dark
   > .flex.flex-wrap.items-center.gap-3.not-prose
   > span.text-sm.font-mono.text-fd-muted-foreground::after {
   content: "string";
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1301,7 +1340,6 @@ html.dark
   > .flex.flex-wrap.items-center.gap-3.not-prose
   > span.text-sm.font-mono.text-fd-muted-foreground::after {
   background-color: var(--surface-4);
-  color: var(--text-secondary);
 }
 
 /* "header" badge via ::before on the auth flex row */
@@ -1314,7 +1352,7 @@ html.dark
   color: var(--text-secondary);
   padding: 0.1875rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1324,7 +1362,6 @@ html.dark
   div.my-4
   > .flex.flex-wrap.items-center.gap-3.not-prose::before {
   background-color: var(--surface-4);
-  color: var(--text-secondary);
 }
 
 /* "required" badge via ::after on the auth flex row — red pill */
@@ -1337,7 +1374,7 @@ html.dark
   color: var(--badge-error-text);
   padding: 0.1875rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1389,7 +1426,7 @@ html.dark
   color: var(--text-secondary);
   padding: 0.1875rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   line-height: 1.125rem;
   font-weight: 500;
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
@@ -1400,7 +1437,6 @@ html.dark
   .flex.flex-wrap.items-center.gap-3.not-prose
   > span:has(> button) {
   background-color: var(--surface-4);
-  color: var(--text-secondary);
 }
 
 /* Section headings (Authorization, Path Parameters, etc.) — consistent top spacing */
@@ -1562,10 +1598,6 @@ div > figure.shiki {
   box-shadow: none !important;
 }
 
-html.dark div > figure.shiki {
-  background-color: transparent !important;
-}
-
 /* Tabbed code block container (cURL/JS/Go tabs) */
 div:has(> [role="tablist"]):has(> div > figure.shiki) {
   border-radius: 0.5rem !important;
@@ -1610,19 +1642,11 @@ figure.shiki pre {
   background-color: transparent !important;
 }
 
-html.dark figure.shiki pre {
-  background-color: transparent !important;
-}
-
 /* Code viewport scroll area — transparent bg */
 figure.shiki > div[role="region"] {
   background-color: transparent !important;
 }
 
-html.dark figure.shiki > div[role="region"] {
-  background-color: transparent !important;
-}
-
 /* Copy button — minimal ghost style */
 figure.shiki button[aria-label="Copy Text"],
 figure.shiki button[aria-label="Copied Text"] {
@@ -1690,7 +1714,7 @@ figure.shiki > div:has(> button[aria-label]) {
 .grid > a[data-card] p,
 .grid > a[data-card] div {
   color: var(--text-muted) !important;
-  font-size: 0.8125rem !important;
+  font-size: var(--text-small) !important;
 }
 
 /* Steps — lighter styling aligned with platform */