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} />
+```

packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx

@@ -9,6 +9,8 @@ toc:
     title: 组合主题卡片
   - id: connected-layer
     title: 状态连接层
+  - id: live-preview
+    title: 在线预览
 ---
 
 ## 受控原子组件 {#controlled-atoms}
@@ -39,3 +41,18 @@ toc:
 ## 状态连接层 {#connected-layer}
 
 `AppearanceSettings` 是原子组件与共享 `PreferencesProvider` 之间的默认连接层。自定义界面可以直接使用 `@workspace/preferences` 的 `usePreference` 读取单个字段，而不必复用默认布局。
+
+## 在线预览 {#live-preview}
+
+文档 Sandbox 可以加载通过类型检查的多文件示例，而不需要把实现细节内联到 MDX：
+
+<Sandbox example="appearance/theme-colors" title="主题颜色控件" />
+
+单文件示例不需要创建 Manifest，直接导入组件和原始源码即可：
+
+```mdx
+import Demo from "./Demo"
+import source from "./Demo.tsx?raw"
+
+<SingleFileSandbox component={Demo} filename="Demo.tsx" source={source} />
+```