fix(ui): swap raw one-off values for design tokens in metagraphed components batch 3/5

apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { BrandIcon } from "@jsonbored/ui-kit";
+import { BrandIcon, ExternalLink } from "@jsonbored/ui-kit";
 import { Panel } from "@/components/metagraphed/primitives";
 import { adapterQuery } from "@/lib/metagraphed/queries";
 
@@ -63,10 +63,9 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) {
           const sharePct = typeof row.emission_share === "number" ? row.emission_share * 100 : null;
           return (
             <li key={row.repository}>
-              <a
+              <ExternalLink
+                bare
                 href={repoUrl}
-                target="_blank"
-                rel="noopener noreferrer"
                 className="mg-row-hover flex items-center justify-between gap-2 rounded-md px-2 py-1.5"
               >
                 <span className="flex min-w-0 items-center gap-2">
@@ -79,20 +78,19 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) {
                 <span className="shrink-0 font-mono mg-type-caption tabular-nums text-ink-muted">
                   {sharePct !== null ? `${sharePct.toFixed(1)}%` : "—"}
                 </span>
-              </a>
+              </ExternalLink>
             </li>
           );
         })}
       </ol>
       {total && total > rows.length ? (
-        <a
+        <ExternalLink
+          bare
           href="https://gittensor.io/repositories"
-          target="_blank"
-          rel="noopener noreferrer"
           className="mt-2 block text-center text-xs text-accent hover:underline"
         >
           View all {total} registered repositories →
-        </a>
+        </ExternalLink>
       ) : null}
     </Panel>
   );

apps/ui/src/components/metagraphed/hero-subnet-chips.tsx

@@ -82,6 +82,7 @@ export function HeroSubnetChips({ limit = 14 }: { limit?: number }) {
               // glass tier (mg-glass would add unwanted blur + drop to 80/95%
               // depending on browser support; mg-glass-soft's 60% visibly lightens
               // this chip). Kept as a bare fraction rather than a wrong tier.
+              // eslint-disable-next-line no-restricted-syntax -- see exception above
               "inline-flex items-center gap-2 rounded-full border border-border bg-card/80",
               "px-2.5 py-1.5 hover:border-accent/40 transition-colors",
             )}

apps/ui/src/components/metagraphed/integrability-board.tsx

@@ -78,7 +78,7 @@ export function IntegrabilityBoard() {
               <span className="mg-label">% of subnets</span>
             </div>
             <BarMini data={dimensionData} max={100} />
-            <p className="mt-2 text-[11px] text-ink-muted">
+            <p className="mt-2 mg-type-caption text-ink-muted">
               Lowest-coverage dimensions first — the biggest gaps to fill.
             </p>
           </Panel>
@@ -93,7 +93,7 @@ export function IntegrabilityBoard() {
               <span className="mg-label">subnets</span>
             </div>
             <BarMini data={distribution} />
-            <p className="mt-2 text-[11px] text-ink-muted">
+            <p className="mt-2 mg-type-caption text-ink-muted">
               How subnet completeness scores are distributed across the registry.
             </p>
           </Panel>

apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx

@@ -44,7 +44,7 @@ function LiveRowLink({ item, onNavigate, registerItem, itemIndex }: MegaMenuLive
     >
       <span className="min-w-0">
         <span className="block text-sm text-ink-strong truncate">{item.label}</span>
-        <span className="block text-[11px] text-ink-muted truncate">{item.sub}</span>
+        <span className="block mg-type-caption text-ink-muted truncate">{item.sub}</span>
       </span>
       <ArrowUpRight className="size-3 text-ink-muted shrink-0" />
     </Link>

apps/ui/src/components/metagraphed/move-stake-destination-input.tsx

@@ -63,7 +63,7 @@ export function MoveStakeDestinationInput({
 
   return (
     <div className="space-y-4">
-      <div className="rounded border border-border bg-surface/40 px-2.5 py-2 text-[11px] text-ink-muted">
+      <div className="rounded border border-border bg-surface/40 px-2.5 py-2 mg-type-caption text-ink-muted">
         Moving from{" "}
         <span className="font-medium text-ink-strong">
           {originValidatorName ?? shortHash(originHotkey, 6)}

apps/ui/src/components/metagraphed/move-stake-modal.tsx

@@ -274,7 +274,7 @@ function StatusView({
           >
             {shortHash(txHash, 8)}
           </Link>
-          <p className="text-[10px] text-ink-muted">
+          <p className="mg-type-caption text-ink-muted">
             May take a few moments to appear once indexed.
           </p>
         </div>

apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx

@@ -17,7 +17,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   CopyButton,
-  safeExternalUrl,
+  ExternalLink,
 } from "@jsonbored/ui-kit";
 import {
   MEGA_PANELS,
@@ -256,7 +256,7 @@ export function MegaPanelBody({
           </div>
         </div>
         {showOverallEmpty ? (
-          <div className="mt-3 rounded-md border border-dashed border-ink-subtle bg-surface/40 px-3 py-2 text-[11px] text-ink-muted flex items-center justify-between">
+          <div className="mt-3 rounded-md border border-dashed border-ink-subtle bg-surface/40 px-3 py-2 mg-type-caption text-ink-muted flex items-center justify-between">
             <span>
               No results for <span className="text-ink-strong">"{filterValue}"</span>.
             </span>
@@ -276,7 +276,7 @@ export function MegaPanelBody({
       <div className="col-span-5">
         <div className="mg-label mb-3">Browse</div>
         {browseEmpty && !supportsLive ? (
-          <div className="text-[11px] text-ink-muted">No matches in this section.</div>
+          <div className="mg-type-caption text-ink-muted">No matches in this section.</div>
         ) : browseEmpty ? null : (
           <ul className="grid grid-cols-2 gap-x-4 gap-y-1.5">
             {browseFiltered.map((l) => {
@@ -295,7 +295,7 @@ export function MegaPanelBody({
                       {l.label}
                     </div>
                     {l.hint ? (
-                      <div className="text-[11px] text-ink-muted truncate">{l.hint}</div>
+                      <div className="mg-type-caption text-ink-muted truncate">{l.hint}</div>
                     ) : null}
                   </Link>
                 </li>
@@ -316,19 +316,19 @@ export function MegaPanelBody({
               </ul>
             ) : liveError ? (
               <div className="flex items-center justify-between rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-1.5">
-                <span className="text-[11px] text-health-down">
+                <span className="mg-type-caption text-health-down">
                   Couldn't load live {panel.label.toLowerCase()}.
                 </span>
                 <button
                   type="button"
                   onClick={liveRetry}
-                  className="inline-flex items-center gap-1 text-[11px] font-medium text-ink-strong hover:text-accent"
+                  className="inline-flex items-center gap-1 mg-type-caption font-medium text-ink-strong hover:text-accent"
                 >
                   <RefreshCw className="size-3" /> Retry
                 </button>
               </div>
             ) : liveEmpty ? (
-              <div className="text-[11px] text-ink-muted px-2 py-1.5">
+              <div className="mg-type-caption text-ink-muted px-2 py-1.5">
                 No live matches for "{filterValue}".
               </div>
             ) : (
@@ -363,7 +363,7 @@ export function MegaPanelBody({
                       to={r.to}
                       onClick={onNavigate}
                       ref={(el) => registerItem(el, i)}
-                      className="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors"
+                      className="rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors"
                       preload="intent"
                     >
                       {r.label}
@@ -390,7 +390,7 @@ export function MegaPanelBody({
                     search={(l.search ?? undefined) as never}
                     onClick={onNavigate}
                     ref={(el) => registerItem(el, i)}
-                    className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors"
+                    className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors"
                     preload="intent"
                   >
                     {l.label}
@@ -400,7 +400,7 @@ export function MegaPanelBody({
             })}
           </ul>
         ) : (
-          <div className="text-[11px] text-ink-muted">No quick filters.</div>
+          <div className="mg-type-caption text-ink-muted">No quick filters.</div>
         )}
       </div>
 
@@ -414,7 +414,7 @@ export function MegaPanelBody({
             ))}
           </div>
         ) : snapshot.isError ? (
-          <div className="rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-2 text-[11px] text-health-down">
+          <div className="rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-2 mg-type-caption text-health-down">
             Snapshot unavailable.
           </div>
         ) : (
@@ -444,14 +444,13 @@ export function MegaPanelBody({
         <div className="flex items-center gap-2 mg-type-data text-ink-muted">
           <span>{panel.apiPath}</span>
           <CopyButton value={`${API_BASE}${panel.apiPath}`} label={`${panel.apiPath} URL`} />
-          <a
-            href={safeExternalUrl(`${API_BASE}${panel.apiPath}`)}
-            target="_blank"
-            rel="noopener noreferrer"
+          <ExternalLink
+            bare
+            href={`${API_BASE}${panel.apiPath}`}
             className="inline-flex items-center gap-1 hover:text-ink-strong"
           >
             <Boxes className="size-3" /> JSON
-          </a>
+          </ExternalLink>
         </div>
       </div>
     </div>
@@ -535,7 +534,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void })
                           >
                             {l.label}
                             {l.hint ? (
-                              <span className="block text-[11px] text-ink-muted">{l.hint}</span>
+                              <span className="block mg-type-caption text-ink-muted">{l.hint}</span>
                             ) : null}
                           </Link>
                         </li>
@@ -552,7 +551,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void })
                               to={l.to}
                               search={(l.search ?? undefined) as never}
                               onClick={onNavigate}
-                              className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong"
+                              className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong"
                               preload="intent"
                             >
                               {l.label}

apps/ui/src/components/metagraphed/nav-omnibox.tsx

@@ -18,6 +18,7 @@ import {
 import { searchQuery } from "@/lib/metagraphed/queries";
 import { classNames } from "@/lib/metagraphed/format";
 import { Kbd, safeExternalUrl } from "@jsonbored/ui-kit";
+import { Panel } from "@/components/metagraphed/primitives";
 import { loadRecent, pushRecent } from "@/lib/metagraphed/search-history";
 import { isValidSs58 } from "@/lib/metagraphed/accounts";
 import { shortHash } from "@/lib/metagraphed/blocks";
@@ -362,11 +363,14 @@ export function NavOmnibox({ onOpenPalette }: Props) {
       className="hidden md:block relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0"
     >
       {/* Input */}
-      <div
+      <Panel
+        as="div"
+        flush
         className={classNames(
-          "inline-flex w-full items-center gap-2 rounded-full border bg-card pl-3 pr-2 py-2 text-left text-sm transition-all min-h-10",
-          open ? "border-accent/60 ring-2 ring-accent/20" : "border-border hover:border-accent/40",
+          "w-full !rounded-full text-left text-sm transition-all",
+          open ? "!border-accent/60 ring-2 ring-accent/20" : "hover:border-accent/40",
         )}
+        bodyClassName="inline-flex w-full items-center gap-2 !pl-3 !pr-2 !py-2 min-h-10"
       >
         <Search className="size-3.5 shrink-0 text-ink-muted" />
         <input
@@ -387,7 +391,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
           aria-activedescendant={activeOptionId}
           className="flex-1 min-w-0 bg-transparent outline-none text-ink-strong placeholder:text-ink-muted text-sm"
         />
-      </div>
+      </Panel>
 
       {/* Dropdown — wider than the input, right-aligned */}
       {open ? (
@@ -414,15 +418,17 @@ export function NavOmnibox({ onOpenPalette }: Props) {
                         <span className="block mg-type-caption font-medium text-ink-strong truncate">
                           {r.label}
                         </span>
-                        <span className="block text-[10px] text-ink-muted truncate">{r.hint}</span>
+                        <span className="block mg-type-caption text-ink-muted truncate">
+                          {r.hint}
+                        </span>
                       </span>
                     </Link>
                   ))}
                 </div>
               </div>
 
               <div className="mx-3 mb-2 rounded-md border border-border/60 mg-glass-soft px-3 py-2">
-                <p className="text-[11px] text-ink-muted leading-relaxed">
+                <p className="mg-type-caption text-ink-muted leading-relaxed">
                   <span className="font-medium text-ink">Paste anything:</span> wallet address
                   (ss58), block number, transaction hash (0x…) or block hash to jump directly.
                 </p>
@@ -444,7 +450,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
                           setOpen(true);
                           inputRef.current?.focus();
                         }}
-                        className="rounded-full border border-border bg-card px-2.5 py-0.5 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors"
+                        className="rounded-full border border-border bg-card px-2.5 py-0.5 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors"
                       >
                         {r}
                       </button>

apps/ui/src/components/metagraphed/network-switcher.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Check, ChevronDown, Globe2, Pencil, TerminalSquare } from "lucide-react";
-import { Popover, PopoverTrigger } from "@jsonbored/ui-kit";
+import { ExternalLink, Popover, PopoverTrigger } from "@jsonbored/ui-kit";
 import { ClampedPopoverContent } from "./clamped-popover-content";
 import { useApiBase, useNetwork } from "@/hooks/use-api-base";
 import { CHAIN_NETWORKS, LOCAL_DEV, DEFAULT_API_BASE } from "@/lib/metagraphed/config";
@@ -116,7 +116,7 @@ export function NetworkSwitcher() {
                         </span>
                         {active ? <Check className="size-3 text-health-ok" /> : null}
                       </span>
-                      <span className="mt-0.5 block text-[10px] text-ink-muted">
+                      <span className="mt-0.5 block mg-type-caption text-ink-muted">
                         {n.description}
                       </span>
                     </span>
@@ -133,27 +133,26 @@ export function NetworkSwitcher() {
                       {LOCAL_DEV.label}
                     </span>
                   </div>
-                  <span className="mt-0.5 block text-[10px] text-ink-muted">
+                  <span className="mt-0.5 block mg-type-caption text-ink-muted">
                     {LOCAL_DEV.description}
                   </span>
                   <div className="mt-1 flex items-center justify-between gap-2">
                     <code className="mg-type-data-sm text-ink-muted truncate">{LOCAL_DEV.rpc}</code>
-                    <a
+                    <ExternalLink
+                      bare
                       href={LOCAL_DEV.guideUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-[10px] text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
+                      className="mg-type-caption text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
                     >
                       setup →
-                    </a>
+                    </ExternalLink>
                   </div>
                 </div>
               </Panel>
             </li>
           </ul>
         </div>
 
-        <div className="rounded border border-border bg-surface/40 px-2 py-1.5 text-[11px] text-ink-muted">
+        <div className="rounded border border-border bg-surface/40 px-2 py-1.5 mg-type-caption text-ink-muted">
           <div className="flex items-center gap-2">
             <span
               className={classNames("inline-block size-1.5 rounded-full", dotCls)}
@@ -208,7 +207,7 @@ export function NetworkSwitcher() {
                 />
                 <button
                   type="submit"
-                  className="rounded border border-border bg-card px-2 py-1 text-[11px] hover:border-ink/30"
+                  className="rounded border border-border bg-card px-2 py-1 mg-type-caption hover:border-ink/30"
                 >
                   set
                 </button>
@@ -219,7 +218,7 @@ export function NetworkSwitcher() {
                   <button
                     type="button"
                     onClick={() => changeBase(DEFAULT_API_BASE)}
-                    className="text-[10px] text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
+                    className="mg-type-caption text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
                   >
                     reset
                   </button>