Editor: composition structure wireframe (read-only)

src/app/components/LivePreview.tsx

@@ -37,6 +37,7 @@ import { usePreviewStore } from '../stores/PreviewStore';
 import { selectShownText, useSnippetStore } from '../stores/SnippetStore';
 import { useUserSettingsStore } from '../stores/UserSettingsStore';
 import { ChartExport } from './ChartExport';
+import { CompositionWireframe } from './CompositionWireframe';
 import { DataInspector } from './DataInspector';
 import { InspectorSplitHandle } from './InspectorSplitHandle';
 import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
@@ -451,10 +452,12 @@ export function LivePreview() {
     <div className={styles.preview}>
       <div className={styles.header}>
         <FitControl />
-        {/* Right cluster: chart theme, export this chart, then the settings gear. */}
+        {/* Right cluster: chart theme, export this chart, the structure wireframe,
+            then the settings gear. */}
         <div className={styles.headerEnd}>
           <ChartThemeControl />
           <ChartExport chartReady={chartReady} getImageUrl={getImageUrl} />
+          <CompositionWireframe />
           <PreviewSettings />
         </div>
       </div>