docs: update customise-theme guide

- Add Theme Editor section documenting the visual editor
- Fix import path: 'tiny-design' -> '@tiny-design/react'
- Fix SCSS import path to @tiny-design/react/es/style/index
- Fix GitHub links to correct monorepo paths (packages/tokens/scss/)
- Add useTheme hook API table and commonly used tokens table

Author: wangdicoder

apps/docs/guides/customise-theme.md

@@ -1,9 +1,22 @@
 # Customise Theme
 
-Tiny UI provides two layers of theming:
+Tiny UI provides three ways to customise the look and feel:
 
-1. **Design tokens** — CSS custom properties that power light and dark mode. These are the runtime values every component reads.
-2. **SCSS variables** — compile-time variables (sizes, font stacks, border radii, etc.) that can be overridden when you build your own stylesheet.
+1. **Theme Editor** — a visual, no-code tool for real-time theming (great for exploration and quick customisation).
+2. **Design tokens** — CSS custom properties that power light and dark mode. These are the runtime values every component reads.
+3. **SCSS variables** — compile-time variables (sizes, font stacks, border radii, etc.) that can be overridden when you build your own stylesheet.
+
+## Theme Editor
+
+The built-in [Theme Editor](/theme/theme-editor) lets you visually customise design tokens in real time. You can:
+
+- Pick from **20+ preset themes** (e.g. Catppuccin, Mocha Mousse, Cyberpunk) or start from scratch.
+- Adjust primary, success, warning, danger, and info colours, background, text, and border colours.
+- Tweak typography (font size, line height, font weight) and details (border radius, spacing, sizing).
+- Preview changes live on real components.
+- Export your customised tokens as CSS or SCSS to use in your project.
+
+Changes are applied instantly via CSS custom properties — no rebuild required.
 
 ## Dark mode
 
@@ -23,14 +36,23 @@ Tiny UI ships with built-in light and dark themes. Light mode is the default. To
 You can also use the `useTheme` hook to switch themes at runtime:
 
 ```tsx
-import { useTheme } from 'tiny-design';
+import { useTheme } from '@tiny-design/react';
 
 const App = () => {
-  const { mode, setMode, toggle } = useTheme();
-  return <button onClick={toggle}>Current: {mode}</button>;
+  const { mode, resolvedTheme, setMode, toggle } = useTheme();
+  return <button onClick={toggle}>Current: {resolvedTheme}</button>;
 };
 ```
 
+The hook returns:
+
+| Property | Type | Description |
+|---|---|---|
+| `mode` | `'light' \| 'dark' \| 'system'` | The stored preference |
+| `resolvedTheme` | `'light' \| 'dark'` | The actual resolved theme (resolves `'system'` to the OS preference) |
+| `setMode(mode)` | `(mode: ThemeMode) => void` | Set a specific mode |
+| `toggle()` | `() => void` | Toggle between light and dark |
+
 ## Design tokens (CSS custom properties)
 
 Every colour, shadow, and visual state is exposed as a `--ty-*` CSS custom property on `:root`. You can override any token in your own stylesheet:
@@ -43,9 +65,21 @@ Every colour, shadow, and visual state is exposed as a `--ty-*` CSS custom prope
 }
 ```
 
+### Commonly used tokens
+
+| Token | Light default | Description |
+|---|---|---|
+| `--ty-color-primary` | `#6e41bf` | Primary brand colour |
+| `--ty-color-primary-hover` | `#8b62d0` | Primary hover state |
+| `--ty-color-primary-active` | `#5a30a8` | Primary active state |
+| `--ty-color-bg` | `#fff` | Page background |
+| `--ty-color-text` | `rgba(0,0,0,0.85)` | Primary text colour |
+| `--ty-color-text-secondary` | `rgba(0,0,0,0.65)` | Secondary text colour |
+| `--ty-color-border` | `#d9d9d9` | Default border colour |
+
 The full list of tokens can be found in the source:
-- [Light theme tokens](https://github.com/wangdicoder/tiny-design/blob/master/components/style/themes/_light.scss)
-- [Dark theme tokens](https://github.com/wangdicoder/tiny-design/blob/master/components/style/themes/_dark.scss)
+- [Light theme tokens](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/themes/_light.scss)
+- [Dark theme tokens](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/themes/_dark.scss)
 
 ## SCSS variables
 
@@ -70,7 +104,7 @@ $border-radius: 4px;
 $font-size-base: 14px;
 
 // Import Tiny UI styles (applies your overrides via !default)
-@use "tiny-design/es/style/index" as *;
+@use "@tiny-design/react/es/style/index" as *;
 ```
 
 ### 3. Import in your entry file
@@ -79,7 +113,7 @@ $font-size-base: 14px;
 import './theme-variables.scss';
 ```
 
-The full list of SCSS variables can be found in [_variables.scss](https://github.com/wangdicoder/tiny-design/blob/master/components/style/_variables.scss).
+The full list of SCSS variables can be found in [_variables.scss](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/_variables.scss).
 
 Some commonly overridden variables:
 

apps/docs/guides/customise-theme.zh_CN.md

@@ -1,9 +1,22 @@
 # 自定义主题
 
-Tiny UI 提供两层主题定制方案：
+Tiny UI 提供三种方式来定制外观：
 
-1. **设计令牌（Design tokens）** — 驱动亮色/暗色模式的 CSS 自定义属性，所有组件在运行时读取这些值。
-2. **SCSS 变量** — 编译时变量（尺寸、字体、圆角等），可在构建自定义样式表时覆盖。
+1. **主题编辑器** — 一个可视化的实时主题工具，无需编写代码（非常适合探索和快速定制）。
+2. **设计令牌（Design tokens）** — 驱动亮色/暗色模式的 CSS 自定义属性，所有组件在运行时读取这些值。
+3. **SCSS 变量** — 编译时变量（尺寸、字体、圆角等），可在构建自定义样式表时覆盖。
+
+## 主题编辑器
+
+内置的[主题编辑器](/theme/theme-editor)让你可以实时可视化定制设计令牌。你可以：
+
+- 从 **20+ 个预设主题**中选择（如 Catppuccin、摩卡慕斯、赛博朋克等），或从零开始。
+- 调整主色、成功色、警告色、危险色和信息色，以及背景色、文本色和边框色。
+- 调整排版（字号、行高、字重）和细节（圆角、间距、尺寸）。
+- 在真实组件上实时预览更改效果。
+- 导出自定义的令牌为 CSS 或 SCSS，在你的项目中使用。
+
+更改通过 CSS 自定义属性即时生效 — 无需重新构建。
 
 ## 暗色模式
 
@@ -23,14 +36,23 @@ Tiny UI 内置亮色和暗色主题。默认为亮色模式。要启用暗色模
 也可以使用 `useTheme` hook 在运行时切换主题：
 
 ```tsx
-import { useTheme } from 'tiny-design';
+import { useTheme } from '@tiny-design/react';
 
 const App = () => {
-  const { mode, setMode, toggle } = useTheme();
-  return <button onClick={toggle}>当前：{mode}</button>;
+  const { mode, resolvedTheme, setMode, toggle } = useTheme();
+  return <button onClick={toggle}>当前：{resolvedTheme}</button>;
 };
 ```
 
+该 hook 返回：
+
+| 属性 | 类型 | 说明 |
+|---|---|---|
+| `mode` | `'light' \| 'dark' \| 'system'` | 存储的用户偏好 |
+| `resolvedTheme` | `'light' \| 'dark'` | 实际解析的主题（将 `'system'` 解析为操作系统偏好） |
+| `setMode(mode)` | `(mode: ThemeMode) => void` | 设置指定模式 |
+| `toggle()` | `() => void` | 在亮色和暗色之间切换 |
+
 ## 设计令牌（CSS 自定义属性）
 
 所有颜色、阴影和视觉状态都以 `--ty-*` CSS 自定义属性的形式暴露在 `:root` 上。你可以在自己的样式表中覆盖任意令牌：
@@ -43,9 +65,21 @@ const App = () => {
 }
 ```
 
+### 常用令牌
+
+| 令牌 | 亮色默认值 | 说明 |
+|---|---|---|
+| `--ty-color-primary` | `#6e41bf` | 主品牌色 |
+| `--ty-color-primary-hover` | `#8b62d0` | 主色悬停状态 |
+| `--ty-color-primary-active` | `#5a30a8` | 主色激活状态 |
+| `--ty-color-bg` | `#fff` | 页面背景色 |
+| `--ty-color-text` | `rgba(0,0,0,0.85)` | 主文本色 |
+| `--ty-color-text-secondary` | `rgba(0,0,0,0.65)` | 次要文本色 |
+| `--ty-color-border` | `#d9d9d9` | 默认边框色 |
+
 完整的令牌列表请参考源码：
-- [亮色主题令牌](https://github.com/wangdicoder/tiny-design/blob/master/components/style/themes/_light.scss)
-- [暗色主题令牌](https://github.com/wangdicoder/tiny-design/blob/master/components/style/themes/_dark.scss)
+- [亮色主题令牌](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/themes/_light.scss)
+- [暗色主题令牌](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/themes/_dark.scss)
 
 ## SCSS 变量
 
@@ -70,7 +104,7 @@ $border-radius: 4px;
 $font-size-base: 14px;
 
 // 引入 Tiny UI 样式（通过 !default 应用你的覆盖值）
-@use "tiny-design/es/style/index" as *;
+@use "@tiny-design/react/es/style/index" as *;
 ```
 
 ### 3. 在入口文件中引入
@@ -79,7 +113,7 @@ $font-size-base: 14px;
 import './theme-variables.scss';
 ```
 
-完整的 SCSS 变量列表请参考 [_variables.scss](https://github.com/wangdicoder/tiny-design/blob/master/components/style/_variables.scss)。
+完整的 SCSS 变量列表请参考 [_variables.scss](https://github.com/wangdicoder/tiny-design/blob/master/packages/tokens/scss/_variables.scss)。
 
 以下是一些常用的可覆盖变量：