docs: add live playground demos to getting-started and request guides

Author: cc-hearts

docs/guide/getting-started.md

@@ -0,0 +1,60 @@
+# Getting Started
+
+`@cc-heart/utils` is a library of JavaScript common tools — the environment-agnostic core of the utils family.
+
+## Install
+
+```shell
+npm install @cc-heart/utils
+# or
+pnpm add @cc-heart/utils
+```
+
+## Usage
+
+```js
+import { capitalize } from '@cc-heart/utils'
+
+capitalize('string') // String
+```
+
+## What's inside
+
+- **string** — `capitalize`, `unCapitalize`, ...
+- **date** — date formatting helpers
+- **random** — random number / string generators
+- **validate** — type & value validators
+- **promise** — async helpers (`retry`, `withTimeout`, ...)
+- **request** — fetch-based HTTP client, see the [Request guide](/guide/request)
+- **sse** — Server-Sent Events, see the [SSE guide](/guide/sse)
+
+## Try it online
+
+Edit the code below and see results instantly — the demo runs against the published `@cc-heart/utils` package:
+
+```tsx playground
+import { useState } from 'react'
+import { capitalize, unCapitalize, underlineToHump, random } from '@cc-heart/utils'
+
+export default function App() {
+  const [text, setText] = useState('hello_world')
+  const [num, setNum] = useState(() => random(1, 100))
+
+  return (
+    <div style={{ fontFamily: 'monospace', lineHeight: 2 }}>
+      <input value={text} onChange={(e) => setText(e.target.value)} />
+      <div>capitalize: <b>{capitalize(text)}</b></div>
+      <div>unCapitalize: <b>{unCapitalize(text)}</b></div>
+      <div>underlineToHump: <b>{underlineToHump(text)}</b></div>
+      <div>
+        random(1, 100): <b>{num}</b>{' '}
+        <button onClick={() => setNum(random(1, 100))}>re-roll</button>
+      </div>
+    </div>
+  )
+}
+```
+
+## API Reference
+
+See the auto-generated [API documentation](/api/).

docs/guide/getting-started.mdx

@@ -114,3 +114,44 @@ const data2 = await cachedApi.get('/users', {}, { cache: { ttl: 5000 } }) // cac
 
 const otherApi = new Request('/api') // isolated cache
 ```
+
+## Try it online
+
+A live `Request` demo against the public JSONPlaceholder API:
+
+```tsx playground
+import { useState } from 'react'
+import { Request } from '@cc-heart/utils'
+
+const api = new Request('https://jsonplaceholder.typicode.com')
+
+export default function App() {
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = async (id) => {
+    setLoading(true)
+    setError('')
+    try {
+      setUser(await api.get(`/users/${id}`))
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div style={{ fontFamily: 'monospace' }}>
+      <button onClick={() => load(1)}>GET /users/1</button>{' '}
+      <button onClick={() => load(999)}>GET /users/999 (error)</button>
+      {loading && <p>loading...</p>}
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {user && !loading && (
+        <pre>{JSON.stringify(user, null, 2)}</pre>
+      )}
+    </div>
+  )
+}
+```

docs/guide/request.md docs/guide/request.mdxdocs/guide/request.md renamed to docs/guide/request.mdx

@@ -51,6 +51,7 @@
     "@rslib/core": "^1.0.2",
     "@rslint/core": "^0.9.3",
     "@rspress/core": "^2.0.22",
+    "@rspress/plugin-playground": "^2.0.22",
     "@rspress/plugin-typedoc": "^2.0.22",
     "@rstest/core": "^0.12.2",
     "@types/node": "^18.19.44",