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

apps/ui/src/components/metagraphed/search-box.tsx

@@ -41,7 +41,7 @@ function ResultRow({ result }: { result: SemanticSearchResult }) {
       <div className="min-w-0">
         <p className="truncate mg-type-caption-lg text-ink-strong">{resultLabel(result)}</p>
         {result.subtitle ? (
-          <p className="truncate text-[11px] text-ink-muted">{result.subtitle}</p>
+          <p className="truncate mg-type-caption text-ink-muted">{result.subtitle}</p>
         ) : null}
         {tags.length > 0 ? (
           <div className="mt-1 flex flex-wrap gap-1">

apps/ui/src/components/metagraphed/settings-popover.tsx

@@ -102,7 +102,7 @@ export function SettingsPanel() {
             />
           ))}
         </ul>
-        <p className="mt-2 text-[10px] text-ink-muted">
+        <p className="mt-2 mg-type-caption text-ink-muted">
           All presets verified for perceptible contrast in light and dark.
         </p>
       </Section>
@@ -123,7 +123,7 @@ function Section({
     <div>
       <div className="mg-type-micro text-ink-muted mb-1.5">{label}</div>
       {children}
-      {sub ? <p className="mt-1 text-[10px] text-ink-muted">{sub}</p> : null}
+      {sub ? <p className="mt-1 mg-type-caption text-ink-muted">{sub}</p> : null}
     </div>
   );
 }
@@ -157,7 +157,7 @@ function SegmentBtn({
       aria-label={label}
       title={title ?? label}
       className={classNames(
-        "flex-1 inline-flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-[11px] font-medium transition-colors min-h-8",
+        "flex-1 inline-flex items-center justify-center gap-1.5 rounded px-2 py-1.5 mg-type-caption font-medium transition-colors min-h-8",
         active ? "bg-card text-ink-strong shadow-sm" : "text-ink-muted hover:text-ink-strong",
       )}
     >
@@ -205,7 +205,7 @@ function PaletteRow({
         </span>
         <span className="flex-1 min-w-0">
           <span className="block mg-type-caption font-medium text-ink-strong">{label}</span>
-          <span className="block text-[10px] text-ink-muted truncate">{description}</span>
+          <span className="block mg-type-caption text-ink-muted truncate">{description}</span>
         </span>
       </button>
     </li>

apps/ui/src/components/metagraphed/shortcuts-popover.tsx

@@ -75,7 +75,7 @@ export function ShortcutsPopover() {
             </button>
           </PopoverTrigger>
         </TooltipTrigger>
-        <TooltipContent side="right" className="text-[11px]">
+        <TooltipContent side="right" className="mg-type-caption">
           Keyboard shortcuts (?)
         </TooltipContent>
       </Tooltip>

apps/ui/src/components/metagraphed/sponsored-validator-callout.tsx

@@ -85,7 +85,7 @@ export function SponsoredValidatorCallout({
             <button
               type="button"
               onClick={open}
-              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5 text-[11px] font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
+              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5 mg-type-caption font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
             >
               <Coins className="size-3 text-ink-muted" aria-hidden />
               Delegate

apps/ui/src/components/metagraphed/stake-amount-input.tsx

@@ -1,5 +1,6 @@
 import { AlertCircle, Loader2 } from "lucide-react";
 import { SearchInput } from "@/components/metagraphed/table-controls";
+import { Panel } from "@/components/metagraphed/primitives";
 import { classNames, formatNumber } from "@/lib/metagraphed/format";
 import { raoToTao, type Rao } from "@/lib/metagraphed/units";
 import type { SubnetStakeQuote } from "@/lib/metagraphed/types";
@@ -117,10 +118,12 @@ export function StakeAmountInput({
 
   return (
     <div className="space-y-4">
-      <div
+      <Panel
+        as="div"
         role="tablist"
         aria-label="Stake or unstake"
-        className="inline-flex items-center rounded-md border border-border bg-card p-0.5"
+        flush
+        bodyClassName="inline-flex items-center !p-0.5"
       >
         {STAKE_FLOW_ACTIONS.map((a) => {
           const active = a === action;
@@ -140,7 +143,7 @@ export function StakeAmountInput({
             </button>
           );
         })}
-      </div>
+      </Panel>
 
       <div className="flex flex-wrap items-end gap-3">
         <div className="flex flex-col gap-1">
@@ -159,10 +162,12 @@ export function StakeAmountInput({
         {showUnitToggle ? (
           <div className="flex flex-col gap-1">
             <span className="mg-type-micro text-ink-muted">Unit</span>
-            <div
+            <Panel
+              as="div"
               role="tablist"
               aria-label="TAO or alpha"
-              className="inline-flex items-center rounded-md border border-border bg-card p-0.5"
+              flush
+              bodyClassName="inline-flex items-center !p-0.5"
             >
               {(["tao", "alpha"] as const).map((u) => {
                 const active = u === unit;
@@ -184,7 +189,7 @@ export function StakeAmountInput({
                   </button>
                 );
               })}
-            </div>
+            </Panel>
           </div>
         ) : null}
 

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

@@ -303,7 +303,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/states.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useQueryClient, type QueryKey } from "@tanstack/react-query";
-import { TimeAgo, safeExternalUrl } from "@jsonbored/ui-kit";
+import { TimeAgo, safeExternalUrl, ExternalLink } from "@jsonbored/ui-kit";
 import { ApiError } from "@/lib/metagraphed/client";
 import { getNetworkPrefix } from "@/lib/metagraphed/config";
 import { isUsableTimestamp } from "@/lib/metagraphed/format";
@@ -114,20 +114,19 @@ export function ErrorState({
         {onRetry ? (
           <button
             onClick={onRetry}
-            className="inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 text-[11px] font-medium hover:border-ink/30"
+            className="inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 mg-type-caption font-medium hover:border-ink/30"
           >
             <RefreshCw className="size-3" /> Retry
           </button>
         ) : null}
         {safeUrl ? (
-          <a
+          <ExternalLink
+            bare
             href={safeUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink-muted hover:border-ink/30 hover:text-ink-strong"
+            className="inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink-muted hover:border-ink/30 hover:text-ink-strong"
           >
             <ExternalLinkIcon className="size-3" /> Open API URL
-          </a>
+          </ExternalLink>
         ) : null}
       </div>
     </div>
@@ -183,7 +182,7 @@ export function EmptyState({
         <a
           href={actionHref}
           {...(action.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-          className="mt-3 inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 text-[11px] font-medium hover:border-ink/30"
+          className="mt-3 inline-flex min-h-9 items-center gap-1.5 rounded border border-border bg-card px-2.5 py-1 mg-type-caption font-medium hover:border-ink/30"
         >
           {action.label}
           {action.external ? <ExternalLinkIcon className="size-3" /> : null}

apps/ui/src/components/metagraphed/states/registry-empty.tsx

@@ -120,15 +120,22 @@ export function RegistryEmpty({
           ) : null}
 
           {freshnessHint ? (
-            <p className="text-[11px] leading-relaxed text-ink-muted/80">
+            <p className="mg-type-caption leading-relaxed text-ink-muted/80">
               <span className="mg-type-micro opacity-70">how freshness works · </span>
               {freshnessHint}
             </p>
           ) : null}
 
           {evidenceHref ? (
-            <p className="text-[11px] text-ink-muted">
+            <p className="mg-type-caption text-ink-muted">
               <span className="mg-type-micro opacity-70">where to verify · </span>
+              {/* Stays a raw anchor deliberately: evidenceHref is a
+                  same-origin relative artifact path (e.g. /metagraph/gaps.json
+                  on -gaps-page / -surfaces-page), and <ExternalLink>'s
+                  safeExternalUrl rejects relative URLs outright -- converting
+                  would render the "blocked unsafe URL" fallback and break the
+                  link. Residual no-restricted-syntax warning flagged in the
+                  PR body per the issue's req-2 escape hatch. */}
               <a
                 href={evidenceHref}
                 target="_blank"

apps/ui/src/components/metagraphed/status-diagnostics.tsx

@@ -501,7 +501,7 @@ function ProviderRow({ provider }: { provider: SourceHealthProvider }) {
               <span
                 key={label}
                 className={classNames(
-                  "inline-flex items-center gap-1 rounded border px-1 py-0.5 font-mono text-[9px]",
+                  "inline-flex items-center gap-1 rounded border px-1 py-0.5 mg-type-data-sm",
                   label === "dead"
                     ? "border-health-down/40 text-health-down"
                     : label === "live"

apps/ui/src/components/metagraphed/subnet-compare-drawer.tsx

@@ -64,7 +64,7 @@ export function SubnetCompareDrawer({ netuid }: { netuid: number }) {
         <SheetTrigger asChild>
           <button
             type="button"
-            className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink-strong hover:border-accent/50 hover:text-accent transition-colors mg-focus-ring"
+            className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink-strong hover:border-accent/50 hover:text-accent transition-colors mg-focus-ring"
           >
             <GitCompare className="size-3 text-ink-muted" />
             Compare
@@ -106,7 +106,7 @@ export function SubnetCompareDrawer({ netuid }: { netuid: number }) {
             />
             <button
               type="submit"
-              className="inline-flex items-center gap-1 rounded border border-border bg-card px-2.5 py-1.5 text-[11px] font-medium text-ink-strong hover:border-accent/50 hover:text-accent"
+              className="inline-flex items-center gap-1 rounded border border-border bg-card px-2.5 py-1.5 mg-type-caption font-medium text-ink-strong hover:border-accent/50 hover:text-accent"
             >
               Compare <ArrowRight className="size-3" />
             </button>

apps/ui/src/components/metagraphed/subnet-health-matrix.tsx

@@ -67,12 +67,12 @@ export function SubnetHealthMatrix() {
                     )}
                     aria-label={`SN${s.netuid}${s.name ? ` — ${s.name}` : ""} — ${s.health ?? "unknown"}`}
                   >
-                    <span className="font-mono text-[9px] font-semibold leading-none tabular-nums tracking-tight">
+                    <span className="mg-type-data-sm font-semibold leading-none tabular-nums tracking-tight">
                       {s.netuid}
                     </span>
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent side="top" className="text-[11px]">
+                <TooltipContent side="top" className="mg-type-caption">
                   <div className="font-display font-semibold text-ink-strong">
                     SN{s.netuid}{" "}
                     {s.name ? <span className="text-ink-muted">· {s.name}</span> : null}

apps/ui/src/components/metagraphed/subnet-masthead.tsx

@@ -15,6 +15,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   BrandIcon,
+  ExternalLink,
   safeExternalUrl,
   CurationChip,
   HealthPill,
@@ -308,7 +309,7 @@ export function SubnetMasthead({
     uptimeDelta != null && Math.abs(uptimeDelta) > 0.01 ? (
       <span
         className={
-          "inline-flex items-center gap-0.5 font-mono text-[9.5px] " +
+          "inline-flex items-center gap-0.5 mg-type-data-sm " +
           (uptimeDelta > 0 ? "text-health-ok" : "text-health-down")
         }
         title={`${uptimeDelta > 0 ? "+" : ""}${uptimeDelta.toFixed(2)}% over window`}
@@ -431,16 +432,20 @@ export function SubnetMasthead({
                   <Tooltip key={l.label} delayDuration={150}>
                     <TooltipTrigger asChild>
                       {safeHref ? (
-                        <a
-                          href={safeHref}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          title={l.label}
-                          aria-label={l.label}
-                          className={className}
-                        >
-                          <Icon className="size-4" />
-                        </a>
+                        <span className="inline-flex">
+                          {/* span carries TooltipTrigger's Slot ref/props --
+                              ExternalLink doesn't forward refs to its anchor
+                              (same wrapper recipe as batch 2/5). */}
+                          <ExternalLink
+                            bare
+                            href={safeHref}
+                            title={l.label}
+                            ariaLabel={l.label}
+                            className={className}
+                          >
+                            <Icon className="size-4" />
+                          </ExternalLink>
+                        </span>
                       ) : (
                         <span
                           className={className}
@@ -635,7 +640,7 @@ export function SubnetMasthead({
                 size={22}
                 stroke={3}
               />
-              <span className="font-mono text-[9.5px] text-ink-muted truncate">
+              <span className="mg-type-data-sm text-ink-muted truncate">
                 {profile?.curation_level ?? "—"}
               </span>
             </div>

apps/ui/src/components/metagraphed/subnet-price-ticker.tsx

@@ -104,7 +104,7 @@ export function SubnetPriceTicker({ limit = 12 }: { limit?: number }) {
                 key={`${it.netuid}-${i}`}
                 to="/subnets/$netuid"
                 params={{ netuid: it.netuid }}
-                className="inline-flex items-center gap-2 text-[11px] hover:text-ink-strong transition-colors"
+                className="inline-flex items-center gap-2 mg-type-caption hover:text-ink-strong transition-colors"
                 title={`${it.name} · SN${it.netuid} · ${priceStr(it.price)}${
                   t.changePct != null
                     ? ` · ${t.changePct >= 0 ? "+" : ""}${t.changePct.toFixed(1)}%`

apps/ui/src/components/metagraphed/subnet-priority-highlights.tsx

@@ -60,9 +60,14 @@ function Tile({
       </span>
       <div className="min-w-0 flex-1">
         <div className="mg-type-micro text-ink-muted">{eyebrow}</div>
-        <div className="truncate font-display text-[15px] font-medium text-ink-strong">{value}</div>
+        <div
+          className="truncate font-display font-medium text-ink-strong"
+          style={{ fontSize: "var(--mg-type-body-lg)" }}
+        >
+          {value}
+        </div>
         {hint ? (
-          <div className="truncate text-[11px] leading-snug text-ink-muted">{hint}</div>
+          <div className="truncate mg-type-caption leading-snug text-ink-muted">{hint}</div>
         ) : null}
       </div>
     </a>

apps/ui/src/components/metagraphed/subnet-profile-panel.tsx

@@ -65,15 +65,16 @@ function Stat({ field, trailing }: { field: Field; trailing?: React.ReactNode })
             {field.label}
           </div>
         </TooltipTrigger>
-        <TooltipContent side="top" className="max-w-xs text-[11px] leading-relaxed">
+        <TooltipContent side="top" className="max-w-xs mg-type-caption leading-relaxed">
           {field.hint}
         </TooltipContent>
       </Tooltip>
       <div className="mt-1 flex items-baseline gap-1 min-w-0">
         <Tooltip delayDuration={200}>
           <TooltipTrigger asChild>
             <span
-              className="min-w-0 truncate font-display text-[14px] font-semibold tabular-nums text-ink-strong"
+              className="min-w-0 truncate font-display font-semibold tabular-nums text-ink-strong"
+              style={{ fontSize: "var(--mg-type-body)" }}
               tabIndex={hasValue ? 0 : -1}
             >
               {short}
@@ -234,7 +235,7 @@ export function SubnetProfilePanel({ netuid }: { netuid: number }) {
             <Link
               to="/subnets/$netuid"
               params={{ netuid: lineagePeer.netuid }}
-              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-paper px-2.5 py-0.5 text-[11px] font-medium text-ink-strong hover:border-accent/50 hover:text-accent transition-colors"
+              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-paper px-2.5 py-0.5 mg-type-caption font-medium text-ink-strong hover:border-accent/50 hover:text-accent transition-colors"
             >
               <span className="font-mono tabular-nums text-ink-muted">
                 {String(lineagePeer.netuid).padStart(3, "0")}
@@ -325,8 +326,8 @@ export function SubnetProfilePanel({ netuid }: { netuid: number }) {
               {providerLockup.length > 0 ? (
                 <ul className="mt-2 space-y-1.5">
                   {providerLockup.map((p) => (
-                    <li key={p.slug} className="flex items-center gap-2 text-[11px]">
-                      <span className="inline-flex size-5 items-center justify-center rounded border border-border bg-paper font-mono text-[9px] uppercase text-ink-muted">
+                    <li key={p.slug} className="flex items-center gap-2 mg-type-caption">
+                      <span className="inline-flex size-5 items-center justify-center rounded border border-border bg-paper mg-type-micro text-ink-muted">
                         {p.name.slice(0, 2)}
                       </span>
                       <Link
@@ -386,7 +387,7 @@ export function SubnetProfilePanel({ netuid }: { netuid: number }) {
                   ) : null}
                 </>
               ) : (
-                <div className="text-[11px] text-ink-muted">No ownership keys recorded.</div>
+                <div className="mg-type-caption text-ink-muted">No ownership keys recorded.</div>
               );
             })()}
           </div>
@@ -461,7 +462,7 @@ function Meta({ label, value, hint }: { label: string; value: string; hint: stri
           </div>
         </div>
       </TooltipTrigger>
-      <TooltipContent side="top" className="max-w-xs text-[11px] leading-relaxed">
+      <TooltipContent side="top" className="max-w-xs mg-type-caption leading-relaxed">
         {hint}
       </TooltipContent>
     </Tooltip>

apps/ui/src/components/metagraphed/subnet-validators-preview.tsx

@@ -125,7 +125,7 @@ function ValidatorPreviewRow({
             <button
               type="button"
               onClick={open}
-              className="inline-flex items-center gap-1 rounded-full border border-border bg-surface px-2.5 py-1 text-[11px] font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
+              className="inline-flex items-center gap-1 rounded-full border border-border bg-surface px-2.5 py-1 mg-type-caption font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
             >
               <Coins className="size-3 text-ink-muted" aria-hidden />
               Delegate