+): JSX.Element {
+ const {
+ sources,
+ highlightedInstruction,
+ highlightMode
+ } = useProgramExampleContext();
+
+ if (sources.length !== 1) {
+ throw new Error("Multiple sources per example not currently supported");
+ }
+
+ const source = sources[0];
+
+ const context = highlightedInstruction?.context;
+
+ const simpleDecorations = Program.Context.isCode(context)
+ ? decorateCodeContext(context, source)
+ : [];
+
+ const detailedDecorations = [
+ ...simpleDecorations,
+ ...(Program.Context.isVariables(context)
+ ? decorateVariablesContext(context, source)
+ : []
+ )
+ ];
+
+ const decorations = highlightMode === "detailed"
+ ? detailedDecorations
+ : simpleDecorations;
+
+ return ;
+}
+
+function decorateCodeContext(
+ { code }: Program.Context.Code,
+ source: Materials.Source
+): Shiki.DecorationItem[] {
+ const { offset, length } = normalizeRange(code.range, source);
+
+ return [
+ {
+ start: offset,
+ end: offset + length,
+ properties: {
+ class: "highlighted-code"
+ }
+ }
+ ];
+}
+
+function decorateVariablesContext(
+ { variables }: Program.Context.Variables,
+ source: Materials.Source
+): Shiki.DecorationItem[] {
+
+ return variables.map(({ declaration }) => {
+ const { offset, length } = normalizeRange(declaration?.range, source);
+ return {
+ start: offset,
+ end: offset + length,
+ properties: {
+ class: "highlighted-variable-declaration"
+ }
+ };
+ });
+}
+
+function normalizeRange(
+ range: Materials.SourceRange["range"],
+ source: Materials.Source
+): Materials.SourceRange["range"] & { offset: number; length: number } {
+ const { offset, length } = range
+ ? { offset: Number(range.offset), length: Number(range.length) }
+ : { offset: 0, length: source.contents.length };
+
+ return { offset, length };
+}
diff --git a/packages/web/src/theme/ProgramExample/Variables.tsx b/packages/web/src/theme/ProgramExample/Variables.tsx
new file mode 100644
index 000000000..fbdf8c873
--- /dev/null
+++ b/packages/web/src/theme/ProgramExample/Variables.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import Admonition from "@theme/Admonition";
+import Link from "@docusaurus/Link";
+import { useProgramExampleContext } from "./ProgramExampleContext";
+
+import { Program } from "@ethdebug/format";
+import { ShikiCodeBlock } from "@theme/ShikiCodeBlock";
+
+export function Variables(): JSX.Element {
+ const { highlightedInstruction } = useProgramExampleContext();
+
+ const link =
+ ethdebug/format/program Variables context schema
+ ;
+
+ if (highlightedInstruction === undefined) {
+ return
+ Hover or click on an offset above to see the {link} object
+ for that instruction.
+ ;
+ }
+
+ const { context } = highlightedInstruction;
+ if (!(context && "variables" in context)) {
+ return
+ The highlighted instruction does not specify any variables in context
+ information. See other tab for full instruction object.
+ ;
+ }
+
+ const { variables } = context;
+
+ if (!variables.every(variable => "identifier" in variable)) {
+ throw new Error(
+ "Unnamed variables are currently unsupported by this documentation system"
+ );
+ }
+
+ return <>
+
+ The following is the {link} object for the selected instruction.
+
+
+ {
+ variables.map((variable) =>
+
+ )
+ }
+ ;
+}
+
+interface VariableProps {
+ variable: Program.Context.Variables.Variable;
+}
+
+function Variable(props: VariableProps): JSX.Element {
+ const { variable } = props;
+
+ const details = (["type", "pointer"] as const)
+ .filter(detail => detail in variable)
+ .map((detail) =>
+
{`${detail.slice(0,1).toUpperCase()}${detail.slice(1)}`}
+
+
+ )
+ return <>
+
+ {variable.identifier}
+
+
+
+ {details}
+
+
+ ;
+}
diff --git a/packages/web/src/theme/ProgramExample/Viewer.css b/packages/web/src/theme/ProgramExample/Viewer.css
new file mode 100644
index 000000000..db4d60832
--- /dev/null
+++ b/packages/web/src/theme/ProgramExample/Viewer.css
@@ -0,0 +1,15 @@
+
+.viewer-row {
+ display: flex;
+
+ justify-content: space-between;
+ align-items: stretch;
+
+ width: 100%;
+ gap: 5px;
+
+}
+
+.viewer-row > * {
+ flex-grow:1;
+}
diff --git a/packages/web/src/theme/ProgramExample/Viewer.tsx b/packages/web/src/theme/ProgramExample/Viewer.tsx
new file mode 100644
index 000000000..91fd137be
--- /dev/null
+++ b/packages/web/src/theme/ProgramExample/Viewer.tsx
@@ -0,0 +1,72 @@
+import Admonition from "@theme/Admonition";
+import Link from "@docusaurus/Link";
+import { useProgramExampleContext } from "./ProgramExampleContext";
+import { SourceContents } from "./SourceContents";
+import { Opcodes } from "./Opcodes";
+import { HighlightedInstruction } from "./HighlightedInstruction";
+import { Variables } from "./Variables";
+
+import "./Viewer.css";
+import "./SourceContents.css";
+
+export interface Props {
+}
+
+export function Viewer(props: Props): JSX.Element {
+ const { highlightedInstruction, highlightMode } = useProgramExampleContext();
+
+ const basicAdmonition =
+ Select an instruction offset to see associated
+ ethdebug/format
+ debugging information.
+ ;
+
+ const detailedAdmonition =
+
+ The selected instruction provides the following
+ ethdebug/format Program contexts
+ :
+
+
+ -
+ Code context is highlighted in this
+ style above.
+
+ -
+ Variables context is indicated by variable declarations
+ highlighted in this
+ style above.
+
+
+ ;
+
+ const details = highlightedInstruction && highlightMode === "detailed"
+ ? <>
+ Details
+ {detailedAdmonition}
+
+ See full ethdebug/format/program/instruction object
+
+
+
+ : <>
+ Details
+ {basicAdmonition}
+ ;
+
+
+ return <>
+ Interactive example
+
+
+
Source contents
+
+
+
+
Compiled opcodes
+
+
+