From 407f7449e42a65d11d926fdf25adb477f9b1d6fc Mon Sep 17 00:00:00 2001
From: "g. nicholas d'andrea" <nick@gnidan.org>
Date: Wed, 1 Apr 2026 16:00:13 -0400
Subject: [PATCH] docs: fix missing indentation in tracing page BUG examples

Move BUG source strings from inline template literals in tracing.mdx
to a separate tracing-examples.ts file. Prettier preserves indentation
in .ts template literals but strips it in .mdx JSX attributes, which
was the root cause of the missing indentation.
---
 .../core-schemas/programs/tracing-examples.ts | 53 +++++++++++++++++
 .../docs/core-schemas/programs/tracing.mdx    | 59 +++----------------
 2 files changed, 61 insertions(+), 51 deletions(-)
 create mode 100644 packages/web/docs/core-schemas/programs/tracing-examples.ts

diff --git a/packages/web/docs/core-schemas/programs/tracing-examples.ts b/packages/web/docs/core-schemas/programs/tracing-examples.ts
new file mode 100644
index 000000000..19cd1b936
--- /dev/null
+++ b/packages/web/docs/core-schemas/programs/tracing-examples.ts
@@ -0,0 +1,53 @@
+export const counterIncrement = `name Counter;
+
+storage {
+  [0] count: uint256;
+}
+
+create {
+  count = 0;
+}
+
+code {
+  count = count + 1;
+}`;
+
+export const thresholdCheck = `name ThresholdCounter;
+
+storage {
+  [0] count: uint256;
+  [1] threshold: uint256;
+}
+
+create {
+  count = 0;
+  threshold = 5;
+}
+
+code {
+  count = count + 1;
+
+  if (count >= threshold) {
+    count = 0;
+  }
+}`;
+
+export const multipleStorageSlots = `name MultiSlot;
+
+storage {
+  [0] a: uint256;
+  [1] b: uint256;
+  [2] sum: uint256;
+}
+
+create {
+  a = 10;
+  b = 20;
+  sum = 0;
+}
+
+code {
+  sum = a + b;
+  a = a + 1;
+  b = b + 1;
+}`;
diff --git a/packages/web/docs/core-schemas/programs/tracing.mdx b/packages/web/docs/core-schemas/programs/tracing.mdx
index efbae0cfc..7d1fadc86 100644
--- a/packages/web/docs/core-schemas/programs/tracing.mdx
+++ b/packages/web/docs/core-schemas/programs/tracing.mdx
@@ -5,6 +5,11 @@ sidebar_position: 4
 import SpecLink from "@site/src/components/SpecLink";
 import SchemaExample from "@site/src/components/SchemaExample";
 import { TracePlayground, TraceExample } from "@theme/ProgramExample";
+import {
+  counterIncrement,
+  thresholdCheck,
+  multipleStorageSlots,
+} from "./tracing-examples";
 
 # Tracing execution
 
@@ -50,19 +55,7 @@ This example shows a basic counter that increments a storage variable:
 <TraceExample
   title="Counter increment"
   description="Increments count from 0 to 1, storing the result"
-  source={`name Counter;
-
-storage {
-[0] count: uint256;
-}
-
-create {
-count = 0;
-}
-
-code {
-count = count + 1;
-}`}
+  source={counterIncrement}
 />
 
 ### Storage with threshold check
@@ -72,25 +65,7 @@ This example demonstrates conditional logic with storage variables:
 <TraceExample
   title="Threshold check"
   description="Increments counter and resets when reaching threshold"
-  source={`name ThresholdCounter;
-
-storage {
-[0] count: uint256;
-[1] threshold: uint256;
-}
-
-create {
-count = 0;
-threshold = 5;
-}
-
-code {
-count = count + 1;
-
-if (count >= threshold) {
-count = 0;
-}
-}`}
+  source={thresholdCheck}
 />
 
 ### Multiple storage slots
@@ -100,25 +75,7 @@ This example shows working with multiple storage locations:
 <TraceExample
   title="Multiple storage slots"
   description="Updates multiple storage values in sequence"
-  source={`name MultiSlot;
-
-storage {
-[0] a: uint256;
-[1] b: uint256;
-[2] sum: uint256;
-}
-
-create {
-a = 10;
-b = 20;
-sum = 0;
-}
-
-code {
-sum = a + b;
-a = a + 1;
-b = b + 1;
-}`}
+  source={multipleStorageSlots}
 />
 
 ## Trace data structure