feat(docs): add appearance sandbox example

packages/appearance/docs/en-US/advanced/atomic-composition.mdx

@@ -9,6 +9,8 @@ toc:
     title: Compose a theme card
   - id: connected-layer
     title: State bindings
+  - id: live-preview
+    title: Live preview
 ---
 
 ## Controlled atoms {#controlled-atoms}
@@ -39,3 +41,18 @@ For a more granular layout, compose `ThemePreview`, `baseColorSwatches`, `accent
 ## State bindings {#connected-layer}
 
 `AppearanceSettings` is the default binding layer between the atoms and the shared `PreferencesProvider`. A custom surface can call `usePreference` from `@workspace/preferences` for individual values without reusing the default layout.
+
+## Live preview {#live-preview}
+
+The documentation Sandbox can load a typed, multi-file example without embedding implementation details in MDX:
+
+<Sandbox example="appearance/theme-colors" title="Theme color controls" />
+
+For a single file, import the component and its raw source directly instead of creating a manifest:
+
+```mdx
+import Demo from "./Demo"
+import source from "./Demo.tsx?raw"
+
+<SingleFileSandbox component={Demo} filename="Demo.tsx" source={source} />
+```