@clidey/dory 1.0.8 → 1.9.0

package/docs/getting-started/quick-start.mdx

@@ -0,0 +1,53 @@
+---
+title: 'Quick Start'
+description: 'Create, check, and build your first Dory documentation site.'
+---
+
+# Quick Start
+
+## 1. Create a documentation project
+
+Install the CLI, create a folder, and initialize your site:
+
+```bash
+pnpm add -g @clidey/dory
+mkdir my-docs
+cd my-docs
+dory init
+```
+
+`dory init` creates `dory.json`, `docs/introduction.mdx`, and a starter logo. Keep your pages in `docs/` and add their page keys to `dory.json` navigation.
+
+## 2. Write with a live preview
+
+```bash
+dory dev
+```
+
+Open the local URL shown in your terminal. Changes to your MDX files reload while you write.
+
+## 3. Check the whole site
+
+```bash
+dory check
+```
+
+The check reports missing navigation pages, broken local links and anchors, missing assets, and invalid frontmatter. Run it in CI before publishing.
+
+## 4. Build and preview
+
+```bash
+dory build
+dory preview
+```
+
+The static site is written to `dist/`. The build accepts a top-level `docs/` folder and does not modify the installed Dory package. `dory preview` also serves the optional [documentation chat](/configuration/chat) when you configure a model on the server.
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card title="Configuration" href="/getting-started/configuration" icon="settings" description="Customize navigation, branding, and metadata." />
+  <Card title="Components" href="/components/overview" icon="layout-dashboard" description="Add richer examples to your pages." />
+  <Card title="Languages and versions" href="/configuration/internationalization" icon="globe" description="Organize translated and versioned content." />
+  <Card title="Documentation chat" href="/configuration/chat" icon="message-square" description="Add an optional cited assistant." />
+</CardGroup>

package/docs/getting-started/whodb-ee-apps.mdx

@@ -0,0 +1,122 @@
+---
+title: 'WhoDB EE apps'
+description: 'Write MDX documentation in a WhoDB EE app and show it inside the app host.'
+---
+
+# Document WhoDB EE apps
+
+WhoDB EE can keep documentation with the app it describes. Add MDX files under the app's `docs/` directory. App editors can write and preview them in the **Docs** tab. When the app is published, WhoDB publishes the MDX files with the app version and shows them in the app host's **Help** panel. There is no separate Dory site or deployment to manage.
+
+The Dory renderer is bundled with WhoDB as JavaScript and CSS. It runs inside a sandboxed frame, separate from the WhoDB host and the app runner. The host gives it a list of allowed pages; Dory requests an MDX file when the reader opens that page. WhoDB checks each request against the reader's authorized app documentation. The app runner does not receive documentation source or WhoDB credentials.
+
+## Add pages
+
+Start with `docs/index.mdx`. Give each page a title in frontmatter and use ordinary MDX for its body:
+
+```mdx docs/index.mdx
+---
+title: Inventory app
+description: How to use the inventory workspace.
+---
+
+# Inventory app
+
+Use this workspace to review stock levels and update reorder plans.
+
+[View reports](/reports)
+```
+
+Add `docs/reports.mdx` for the `/reports` link. Subfolders work too, such as `docs/admin/permissions.mdx`. Pages are discovered from the files; an app does not need a `dory.json`. Keep linked routes within the app's documentation pages.
+
+The embedded viewer renders Markdown, Dory's layout and callout components, Mermaid diagrams, and KaTeX math. API and WebSocket playgrounds, remote `Source` content, and `Specimen` demos are unavailable in the app sandbox. HTTPS image URLs work; storing binary image files alongside the app's MDX is not yet supported.
+
+The embedded **Ask Dory** panel searches only the app documentation pages already authorized for the reader's selected language. It returns an excerpt and links to the matching source pages. This local mode makes no model request and does not produce a generated AI answer. Dory's standalone documentation chat uses a separate server-side model endpoint; the embedded viewer cannot call that endpoint from its sandbox.
+
+In WhoDB EE, open the app editor and select **Docs**. Create a page, edit its MDX, preview it, and save the draft. Publishing the app makes the saved pages available to readers with access to that app. Draft edits do not change the published docs until the next app publish.
+
+## Customize the docs site
+
+The Docs tab can preview the app's site name, logo, colors, fonts, and navigation alongside its MDX. These settings live in the app's `app.json` under `documentation.site`, so the app and its docs can be published together. The site settings are optional; an app with only MDX pages still has a usable docs layout.
+
+```json app.json
+{
+  "documentation": {
+    "site": {
+      "name": "Inventory docs",
+      "version": "1.0",
+      "logo": {
+        "light": "https://example.com/inventory-logo-light.svg",
+        "dark": "https://example.com/inventory-logo-dark.svg"
+      },
+      "colors": { "primary": "#528ff4" },
+      "fonts": { "family": "Hanken Grotesk", "heading": { "family": "Bricolage Grotesque" } },
+      "navigation": {
+        "tabs": [{
+          "tab": "Guides",
+          "groups": [{ "group": "Getting started", "pages": ["index", "reports"] }]
+        }]
+      }
+    }
+  }
+}
+```
+
+Navigation page names are relative to `docs/` and omit `.mdx`. The viewer includes only pages that exist in the selected language. You can also set `title`, `colors.light` and `colors.dark`, `theme.mode` (`light`, `dark`, or `system`), `theme.radius`, and mono font family. Logos must use HTTPS URLs or image data URLs; local binary assets are not yet bundled with the app documentation. The embedded renderer uses the site's font family if it is already available in the browser; it does not fetch a custom font stylesheet from the config.
+
+The Docs tab saves edits as a draft. Readers see the published version of `documentation.site` and its MDX files after the next app publish.
+
+## Keep docs beside a local app
+
+The WhoDB CLI includes `docs/*.mdx` when it reads an app folder. This lets you review documentation changes alongside app code and publish them together:
+
+```text
+inventory-app/
+├── app.json
+├── docs/
+│   ├── index.mdx
+│   └── reports.mdx
+└── pages/
+    └── main/
+```
+
+```bash
+whodb apps publish ./inventory-app --draft --org <org> --project <project>
+whodb apps publish ./inventory-app --message "Inventory docs" --org <org> --project <project>
+```
+
+The first command syncs the editable draft. The second creates a published app version, including its MDX files. See the WhoDB CLI app workflow for app creation, verification, and publication options.
+
+## Open the right page from an app screen
+
+The Help panel starts at `docs/index.mdx`. To select a page based on the current app screen, add a route map to `app.json`:
+
+```json app.json
+{
+  "documentation": {
+    "pages": {
+      "main": "/",
+      "reports": "/reports"
+    }
+  }
+}
+```
+
+The map keys are app page names. The values select MDX pages under `docs/`; `/reports` selects `docs/reports.mdx`. Missing or invalid mappings fall back to the index or first available page. Readers can also share the app's URL with `?docs=reports` to open a specific docs page in its Help panel.
+
+Documentation access follows the app's permissions. App editors can preview draft MDX; app viewers see the published snapshot. WhoDB loads docs through a separate authorized read path, so app code cannot read them through the app runtime.
+
+## Translate app documentation
+
+Keep the default language at `docs/index.mdx` and put authored translations under a language directory with the same page keys. For example, add `docs/fr/index.mdx` and `docs/fr/reports.mdx` for French. The Docs editor has a language selector so authors can edit and preview each set of pages. WhoDB's `fr_FR` interface language selects `docs/fr/`; English (US) uses the root `docs/` pages. English (UK) uses `docs/en-gb/`, and Chinese variants use `docs/zh-cn/` or `docs/zh-tw/`.
+
+Each translated MDX file owns its title and body. WhoDB does not translate page content automatically. If an app has no pages for the reader's language, Help shows the default-language pages as English. If a language has some translated pages, its navigation shows only those authored pages; a missing matching page opens the first available page in that language. The iframe sets its HTML language and text direction from the chosen docs language, including right-to-left languages.
+
+To translate navigation labels too, add `documentation.site.i18n.locales` entries with a language `code` and a `navigation` object in the same tab/group/page shape as the default navigation. Page names stay the same across languages; translated MDX titles and the locale's tab and group labels are shown to readers.
+
+A link with `?docs=reports` follows the reader's selected language. To share a specific translation, use an explicit path such as `?docs=fr/reports`. The MCP `whodb_app_docs` tool can read a translated page with `page: "docs/fr/reports.mdx"` or that explicit page link. Its default URL lookup reads default-language content when no language is specified.
+
+## Use the docs from an agent
+
+An agent with authorized WhoDB access can use the WhoDB MCP server's read-only `whodb_app_docs` tool. Give it a published app link as `url` to list the available MDX pages. A link with `?docs=reports` reads that page directly. The tool also accepts organization, project, and app IDs plus an optional `page` such as `docs/reports.mdx`. It serves published content and applies WhoDB app permissions.
+
+MCP clients need a one-time connection to the same WhoDB instance's `/mcp` endpoint. A private app link by itself cannot install a tool in Claude or Codex; after connection, the agent can use that one app link to discover and read its documentation without a separate Dory deployment.

package/docs/introduction.mdx

@@ -0,0 +1,50 @@
+---
+title: 'Introduction'
+description: 'Dory is a static documentation site generator for modern teams. Build beautiful docs from MDX files with zero configuration.'
+lead: 'Dory turns a folder of MDX files and one dory.json into a fast, static documentation site. No framework setup, no boilerplate.'
+meta:
+  Stack: Preact + Vite
+  License: MIT
+  Updated: 2026-10-21
+---
+
+# Introduction
+
+## What is Dory?
+
+Dory is a **static site generator built for technical documentation**. It turns MDX files and a single `dory.json` config into a fast, beautiful documentation site — with zero boilerplate.
+
+<CardGroup cols={2}>
+  <Card title="Simple" icon="sparkles" description="Drop in .mdx files, configure one dory.json. No framework knowledge needed." />
+  <Card title="Fast" icon="zap" description="Instant hot reload in dev. Quick static builds optimized for production." />
+  <Card title="Portable" icon="globe" description="No SSR, no vendor lock-in. Deploy anywhere that serves static files." />
+  <Card title="Rich Components" icon="layout-dashboard" description="24 built-in MDX components: code blocks, diagrams, API playgrounds, and more." />
+</CardGroup>
+
+## Key Features
+
+<Steps>
+  <Step title="Write MDX files">
+    Create `.mdx` files in your docs directory. Use standard Markdown with any of Dory's 24 built-in components for rich content.
+  </Step>
+  <Step title="Configure dory.json">
+    Set your site name, colors, fonts, logo, and navigation structure in a single `dory.json` file.
+  </Step>
+  <Step title="Run the CLI">
+    Use `dory build` to generate a static site or `dory preview` to serve a built site on port 3000.
+  </Step>
+  <Step title="Deploy anywhere">
+    The output is plain HTML, CSS, and JS — deploy to Netlify, Vercel, S3, GitHub Pages, or any static host.
+  </Step>
+</Steps>
+
+## Navigation
+
+Use the sidebar to explore Dory's documentation:
+
+<CardGroup cols={2}>
+  <Card title="Installation" href="/getting-started/installation" icon="package" description="Install Dory and set up your first project in minutes." />
+  <Card title="Quick Start" href="/getting-started/quick-start" icon="rocket" description="Go from zero to a live documentation site in 5 minutes." />
+  <Card title="Components" href="/components/overview" icon="layers" description="Browse all 24 built-in MDX components with live demos." />
+  <Card title="Configuration" href="/configuration/dory-json" icon="settings" description="Full reference for the dory.json configuration file." />
+</CardGroup>

package/docs/logo/logo.svg

@@ -0,0 +1,18 @@
+<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9941 4.99951C19.9947 3.00079 19.9947 3.00079 16.9956 0.00271368V4.99951H21.9941Z" fill="#92BFFA"/>
+<path d="M7.49782 3.91843C7.49782 4.5155 7.98183 4.99951 8.5789 4.99951H16.9951V0.00271606H8.5789C7.98183 0.00271606 7.49782 0.486733 7.49782 1.0838V3.91843Z" fill="url(#paint0_linear_66_680)"/>
+<path d="M21.9932 5.01123C22.0049 8.20987 21.9983 17.7036 21.9951 21.9995C21.9943 23.1041 21.0977 23.9995 19.9932 23.9995H2C0.895431 23.9995 3.87055e-07 23.1041 0 21.9995V8.59131C0 7.99426 0.48401 7.51028 1.08105 7.51025H3.91797C4.51481 7.51052 4.99902 7.99441 4.99902 8.59131V19.5024H16.9951V5.01123H21.9932Z" fill="url(#paint1_linear_66_680)"/>
+<ellipse cx="12.3217" cy="14.276" rx="1.2973" ry="1.29647" fill="#1967D2"/>
+<path d="M5 0.00634813C5.55157 0.00730227 5.99805 0.454718 5.99805 1.00635V4.01221C5.99805 4.64068 6.29707 5.23179 6.80273 5.60498L7.46777 6.09619C7.81171 6.35003 8.22878 6.48682 8.65625 6.48682H14.4951C15.0472 6.48682 15.4949 6.93475 15.4951 7.48682V16.98C15.4951 17.5322 15.0474 17.98 14.4951 17.98H7.49805C6.94583 17.9799 6.49808 17.5322 6.49805 16.98V8.67139C6.49806 8.23724 6.35689 7.81407 6.0957 7.46729L5.58691 6.79248C5.21558 6.29954 4.63759 6.00515 4.02051 5.99561H1C0.447722 5.9956 0 5.54789 0 4.99561V1.00049C0.000165845 0.447951 0.448441 -4.60729e-05 1.00098 0.00048876L5 0.00634813Z" fill="#FFC236"/>
+<ellipse cx="12.9961" cy="15.505" rx="1" ry="0.999359" fill="#3630C4"/>
+<defs>
+<linearGradient id="paint0_linear_66_680" x1="10.9999" y1="0.00271606" x2="10.9999" y2="23.9995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#528FF4"/>
+<stop offset="1" stop-color="#92BFFA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_66_680" x1="10.9999" y1="0.00271606" x2="10.9999" y2="23.9995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#528FF4"/>
+<stop offset="1" stop-color="#92BFFA"/>
+</linearGradient>
+</defs>
+</svg>

package/docs/playgrounds/api-playground.mdx

@@ -0,0 +1,122 @@
+---
+title: 'API Playground'
+description: 'Interactive HTTP API testing built directly into your documentation. Test endpoints with real requests.'
+---
+
+# API Playground
+
+The `<APIPlayground>` component embeds a fully interactive HTTP client inside your documentation. Readers can test API endpoints with real requests without leaving the page.
+
+## Live Demo
+
+Try it now — this makes a real HTTP request to a public API:
+
+<APIPlayground
+  method="GET"
+  url="https://jsonplaceholder.typicode.com/users"
+  title="List Users"
+  description="Fetches a list of all users from the JSONPlaceholder test API."
+  parameters={[
+    { name: "_limit", type: "number", required: false, description: "Limit the number of results.", defaultValue: "10" }
+  ]}
+/>
+
+## POST Request with Body
+
+<APIPlayground
+  method="POST"
+  url="https://jsonplaceholder.typicode.com/posts"
+  title="Create Post"
+  description="Creates a new post. JSONPlaceholder simulates the creation and returns the new object."
+  headers={{ "Content-Type": "application/json" }}
+  body={{ "title": "My Post", "body": "Post content here.", "userId": 1 }}
+/>
+
+## Authenticated Endpoint
+
+<APIPlayground
+  method="GET"
+  url="https://jsonplaceholder.typicode.com/users/1"
+  title="Get User (with Auth)"
+  description="Demonstrates Bearer token authentication. The token is sent in the Authorization header."
+  authType="bearer"
+  servers={[
+    { url: "https://jsonplaceholder.typicode.com", description: "Production" },
+    { url: "https://staging.jsonplaceholder.typicode.com", description: "Staging" }
+  ]}
+/>
+
+## Usage in MDX
+
+```mdx
+<APIPlayground
+  method="GET"
+  url="https://api.example.com/users"
+  title="List Users"
+  description="Returns a paginated list of users."
+  parameters={[
+    {
+      name: "page",
+      type: "number",
+      required: false,
+      description: "Page number (1-indexed).",
+      defaultValue: "1"
+    },
+    {
+      name: "limit",
+      type: "number",
+      required: false,
+      description: "Items per page.",
+      defaultValue: "20"
+    }
+  ]}
+  headers={{
+    "Accept": "application/json"
+  }}
+  authType="bearer"
+/>
+```
+
+## Features
+
+<CardGroup cols={2}>
+  <Card title="Query Parameters" icon="sliders" description="Add, edit, and remove URL query parameters with a visual editor." />
+  <Card title="Request Headers" icon="list" description="Set custom headers including Content-Type, Accept, and custom headers." />
+  <Card title="Request Body" icon="file-json" description="Edit JSON request body with syntax highlighting." />
+  <Card title="Authentication" icon="lock" description="Supports Bearer token, API key, Basic auth, and no auth." />
+  <Card title="Multiple Servers" icon="server" description="Switch between server environments (production, staging, etc.)." />
+  <Card title="Response Display" icon="eye" description="Shows status code, response time, response headers, and formatted body." />
+</CardGroup>
+
+## Authentication Types
+
+| `authType` | Description | Fields |
+| --- | --- | --- |
+| `none` | No authentication | — |
+| `bearer` | Bearer token | Token field |
+| `apiKey` | API key in header | Key name + value |
+| `basic` | HTTP Basic auth | Username + password |
+
+## Props Reference
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `method` | `'GET' \| 'POST' \| 'PUT' \| 'DELETE'` | Yes | HTTP method. |
+| `url` | `string` | Yes | Endpoint URL. |
+| `title` | `string` | No | Display title. |
+| `description` | `string` | No | Description shown above the playground. |
+| `parameters` | `Parameter[]` | No | Pre-populated query parameters. |
+| `headers` | `Record<string, string>` | No | Pre-populated request headers. |
+| `body` | `object` | No | Pre-populated JSON request body. |
+| `authType` | `'bearer' \| 'apiKey' \| 'basic' \| 'none'` | No | Authentication method. |
+| `servers` | `Array<{ url, description }>` | No | Server environment options. |
+
+### Parameter Object
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `name` | `string` | Parameter name. |
+| `type` | `string` | Type hint (e.g. `"string"`, `"number"`). |
+| `required` | `boolean` | Whether the parameter is required. |
+| `description` | `string` | Parameter description. |
+| `defaultValue` | `string` | Pre-populated value. |

package/docs/playgrounds/websocket-playground.mdx

@@ -0,0 +1,98 @@
+---
+title: 'WebSocket Playground'
+description: 'Interactive WebSocket connection tester with real-time message history built into your documentation.'
+---
+
+# WebSocket Playground
+
+The `<WebSocketPlayground>` component embeds a fully interactive WebSocket client inside your documentation. Readers can open connections, send messages, and observe responses in real time.
+
+## Live Demo
+
+Connect to a public WebSocket echo server — it sends back whatever you send:
+
+<WebSocketPlayground
+  url="wss://echo.websocket.org"
+  title="Echo Server"
+  description="Connect to a public WebSocket echo server. Any message you send will be echoed back immediately."
+  servers={[
+    { url: "wss://echo.websocket.org", description: "Public echo server" }
+  ]}
+/>
+
+## With Subprotocols
+
+<WebSocketPlayground
+  url="wss://echo.websocket.org"
+  title="Echo with Subprotocols"
+  description="Demonstrates subprotocol negotiation. The echo server accepts any subprotocol."
+  subprotocols={["chat", "json-protocol"]}
+  servers={[
+    { url: "wss://echo.websocket.org", description: "Echo server" }
+  ]}
+/>
+
+## Usage in MDX
+
+```mdx
+<WebSocketPlayground
+  url="wss://api.example.com/ws"
+  title="Real-time Events"
+  description="Subscribe to live events from the API."
+  subprotocols={["events-v1"]}
+  headers={{
+    "X-Client-Version": "2.0"
+  }}
+  authType="bearer"
+  servers={[
+    { url: "wss://api.example.com/ws", description: "Production" },
+    { url: "wss://staging.api.example.com/ws", description: "Staging" }
+  ]}
+/>
+```
+
+## Features
+
+<CardGroup cols={2}>
+  <Card title="Live Connection" icon="activity" description="Real WebSocket connection with connect/disconnect controls and live status indicator." />
+  <Card title="Message History" icon="message-square" description="Timestamped message log with color-coded sent, received, error, and system messages." />
+  <Card title="Subprotocols" icon="layers" description="Configure and negotiate WebSocket subprotocols." />
+  <Card title="Authentication" icon="lock" description="Supports Bearer token, API key, Basic auth, and custom headers." />
+  <Card title="Multiple Servers" icon="server" description="Switch between server environments (production, staging, local)." />
+  <Card title="Custom Headers" icon="list" description="Add custom headers to the WebSocket handshake request." />
+</CardGroup>
+
+## Message Types
+
+Messages in the log are color-coded:
+
+| Type | Color | Description |
+| --- | --- | --- |
+| SEND | Orange | Messages you send to the server |
+| RECV | Blue | Messages received from the server |
+| ERR | Red | Connection errors and protocol errors |
+| SYS | Muted | Connect, disconnect, and status events |
+
+## Testing JSON APIs
+
+For WebSocket APIs that use JSON messages, send structured messages like:
+
+```json
+{ "type": "subscribe", "channel": "updates" }
+```
+
+```json
+{ "type": "message", "content": "Hello!", "room": "general" }
+```
+
+## Props Reference
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `url` | `string` | Yes | WebSocket URL (`ws://` or `wss://`). |
+| `title` | `string` | No | Display title. |
+| `description` | `string` | No | Description shown above the playground. |
+| `subprotocols` | `string[]` | No | Pre-configured WebSocket subprotocols. |
+| `headers` | `Record<string, string>` | No | Pre-populated handshake headers. |
+| `authType` | `'bearer' \| 'apiKey' \| 'basic' \| 'none'` | No | Authentication method. |
+| `servers` | `Array<{ url, description, protocol? }>` | No | Server environment options. |

package/docs/social-card.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+<rect width="1200" height="630" fill="#15243e"/>
+<rect x="0" y="0" width="1200" height="8" fill="#5c8cf4"/>
+<circle cx="1160" cy="390" r="310" fill="#1c2e4d"/>
+<circle cx="1160" cy="390" r="240" fill="none" stroke="#344767"/>
+<circle cx="1160" cy="390" r="160" fill="none" stroke="#344767"/>
+<image href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjk5NDEgNC45OTk1MUMxOS45OTQ3IDMuMDAwNzkgMTkuOTk0NyAzLjAwMDc5IDE2Ljk5NTYgMC4wMDI3MTM2OFY0Ljk5OTUxSDIxLjk5NDFaIiBmaWxsPSIjOTJCRkZBIi8+CjxwYXRoIGQ9Ik03LjQ5NzgyIDMuOTE4NDNDNy40OTc4MiA0LjUxNTUgNy45ODE4MyA0Ljk5OTUxIDguNTc4OSA0Ljk5OTUxSDE2Ljk5NTFWMC4wMDI3MTYwNkg4LjU3ODlDNy45ODE4MyAwLjAwMjcxNjA2IDcuNDk3ODIgMC40ODY3MzMgNy40OTc4MiAxLjA4MzhWMy45MTg0M1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl82Nl82ODApIi8+CjxwYXRoIGQ9Ik0yMS45OTMyIDUuMDExMjNDMjIuMDA0OSA4LjIwOTg3IDIxLjk5ODMgMTcuNzAzNiAyMS45OTUxIDIxLjk5OTVDMjEuOTk0MyAyMy4xMDQxIDIxLjA5NzcgMjMuOTk5NSAxOS45OTMyIDIzLjk5OTVIMkMwLjg5NTQzMSAyMy45OTk1IDMuODcwNTVlLTA3IDIzLjEwNDEgMCAyMS45OTk1VjguNTkxMzFDMCA3Ljk5NDI2IDAuNDg0MDEgNy41MTAyOCAxLjA4MTA1IDcuNTEwMjVIMy45MTc5N0M0LjUxNDgxIDcuNTEwNTIgNC45OTkwMiA3Ljk5NDQxIDQuOTk5MDIgOC41OTEzMVYxOS41MDI0SDE2Ljk5NTFWNS4wMTEyM0gyMS45OTMyWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzY2XzY4MCkiLz4KPGVsbGlwc2UgY3g9IjEyLjMyMTciIGN5PSIxNC4yNzYiIHJ4PSIxLjI5NzMiIHJ5PSIxLjI5NjQ3IiBmaWxsPSIjMTk2N0QyIi8+CjxwYXRoIGQ9Ik01IDAuMDA2MzQ4MTNDNS41NTE1NyAwLjAwNzMwMjI3IDUuOTk4MDUgMC40NTQ3MTggNS45OTgwNSAxLjAwNjM1VjQuMDEyMjFDNS45OTgwNSA0LjY0MDY4IDYuMjk3MDcgNS4yMzE3OSA2LjgwMjczIDUuNjA0OThMNy40Njc3NyA2LjA5NjE5QzcuODExNzEgNi4zNTAwMyA4LjIyODc4IDYuNDg2ODIgOC42NTYyNSA2LjQ4NjgySDE0LjQ5NTFDMTUuMDQ3MiA2LjQ4NjgyIDE1LjQ5NDkgNi45MzQ3NSAxNS40OTUxIDcuNDg2ODJWMTYuOThDMTUuNDk1MSAxNy41MzIyIDE1LjA0NzQgMTcuOTggMTQuNDk1MSAxNy45OEg3LjQ5ODA1QzYuOTQ1ODMgMTcuOTc5OSA2LjQ5ODA4IDE3LjUzMjIgNi40OTgwNSAxNi45OFY4LjY3MTM5QzYuNDk4MDYgOC4yMzcyNCA2LjM1Njg5IDcuODE0MDcgNi4wOTU3IDcuNDY3MjlMNS41ODY5MSA2Ljc5MjQ4QzUuMjE1NTggNi4yOTk1NCA0LjYzNzU5IDYuMDA1MTUgNC4wMjA1MSA1Ljk5NTYxSDFDMC40NDc3MjIgNS45OTU2IDAgNS41NDc4OSAwIDQuOTk1NjFWMS4wMDA0OUMwLjAwMDE2NTg0NSAwLjQ0Nzk1MSAwLjQ0ODQ0MSAtNC42MDcyOWUtMDUgMS4wMDA5OCAwLjAwMDQ4ODc2TDUgMC4wMDYzNDgxM1oiIGZpbGw9IiNGRkMyMzYiLz4KPGVsbGlwc2UgY3g9IjEyLjk5NjEiIGN5PSIxNS41MDUiIHJ4PSIxIiByeT0iMC45OTkzNTkiIGZpbGw9IiMzNjMwQzQiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl82Nl82ODAiIHgxPSIxMC45OTk5IiB5MT0iMC4wMDI3MTYwNiIgeDI9IjEwLjk5OTkiIHkyPSIyMy45OTk1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1MjhGRjQiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTJCRkZBIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl82Nl82ODAiIHgxPSIxMC45OTk5IiB5MT0iMC4wMDI3MTYwNiIgeDI9IjEwLjk5OTkiIHkyPSIyMy45OTk1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1MjhGRjQiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTJCRkZBIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==" x="72" y="64" width="44" height="48"/>
+<text x="134" y="100" fill="#f8f5ed" font-family="Bricolage Grotesque,Arial,sans-serif" font-size="38" font-weight="700">Dory</text>
+<rect x="242" y="73" width="76" height="27" rx="5" fill="none" stroke="#536078"/>
+<text x="255" y="92" fill="#aebace" font-family="Arial,sans-serif" font-size="12" letter-spacing="3">DOCS</text>
+<text x="72" y="260" fill="#f8f5ed" font-family="Bricolage Grotesque,Arial,sans-serif" font-size="76" font-weight="700" letter-spacing="-2">Documentation,</text>
+<text x="72" y="350" fill="#f8f5ed" font-family="Bricolage Grotesque,Arial,sans-serif" font-size="76" font-weight="700" letter-spacing="-2">beautifully simple.</text>
+<text x="76" y="420" fill="#b2bdd0" font-family="Hanken Grotesk,Arial,sans-serif" font-size="26">Build beautiful documentation from MDX.</text>
+<path d="M76 512H1124" stroke="#344767"/>
+<text x="76" y="559" fill="#aebace" font-family="Hanken Grotesk,Arial,sans-serif" font-size="21">Open source. Built for teams.</text>
+<text x="1124" y="559" text-anchor="end" fill="#8caffb" font-family="Hanken Grotesk,Arial,sans-serif" font-size="21">dory.clidey.com</text>
+</svg>

package/docs/websocket-playground-demo.mdx

@@ -0,0 +1,135 @@
+---
+title: 'WebSocket Playground Demo'
+description: 'Interactive WebSocket playground for testing real-time connections'
+---
+
+# WebSocket Playground Demo
+
+This page demonstrates the WebSocket playground component with various configuration options and real-time connection testing capabilities.
+
+## Basic WebSocket Connection
+
+<WebSocketPlayground
+  url="/ws/chat"
+  title="Basic Chat WebSocket"
+  description="Connect to a WebSocket server and send/receive messages in real-time"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    },
+    {
+      url: "wss://ws.postman-echo.com/raw",
+      description: "Postman Echo WebSocket"
+    }
+  ]}
+/>
+
+## WebSocket with Subprotocols
+
+<WebSocketPlayground
+  url="/ws/protocol"
+  title="WebSocket with Subprotocols"
+  description="WebSocket connection with custom subprotocols for specialized communication"
+  subprotocols={["chat", "v1.0"]}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Echo Server with Subprotocols"
+    }
+  ]}
+/>
+
+## WebSocket with Authentication
+
+<WebSocketPlayground
+  url="/ws/secure"
+  title="Authenticated WebSocket"
+  description="WebSocket connection with authentication headers"
+  authType="bearer"
+  headers={{
+    "User-Agent": "Dory WebSocket Client",
+    "X-Client-Version": "1.0.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Secure Echo Server"
+    }
+  ]}
+/>
+
+## Real-time Chat Example
+
+<WebSocketPlayground
+  url="/chat"
+  title="Real-time Chat"
+  description="Connect to a chat server and participate in real-time conversations"
+  subprotocols={["chat.v1", "json"]}
+  headers={{
+    "X-Client-Type": "web",
+    "X-Protocol-Version": "1.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Chat Echo Server"
+    }
+  ]}
+/>
+
+## Testing Instructions
+
+1. **Connect**: Click the "Connect" button to establish a WebSocket connection
+2. **Send Messages**: Type messages in the input field and click "Send" or press Enter
+3. **View Messages**: All sent and received messages appear in the message history with timestamps
+4. **Configuration**: Use the tabs to configure headers, subprotocols, and authentication
+5. **Server Selection**: Choose different servers from the dropdown to test various endpoints
+
+## Features
+
+- **Real-time Connection**: Live WebSocket connection with status indicators
+- **Message History**: View all sent/received messages with timestamps
+- **Custom Headers**: Add authentication and custom headers
+- **Subprotocols**: Configure WebSocket subprotocols
+- **Multiple Servers**: Easy switching between different WebSocket endpoints
+- **Error Handling**: Clear error messages for connection issues
+- **Binary Support**: Handles both text and binary messages
+
+## Message Types
+
+The playground supports different message types:
+- **Sent**: Messages you send (blue background)
+- **Received**: Messages from the server (green background)
+- **Error**: Connection or sending errors (red background)
+- **System**: Connection status updates (gray background)
+
+## Example Messages
+
+Try sending these JSON messages to test structured data:
+
+```json
+{
+  "type": "chat",
+  "message": "Hello, WebSocket!",
+  "userId": "user123",
+  "timestamp": "2024-01-15T10:30:00Z"
+}
+```
+
+```json
+{
+  "type": "presence",
+  "status": "online",
+  "userId": "user123"
+}
+```
+
+```json
+{
+  "type": "notification",
+  "title": "Test Notification",
+  "message": "This is a test notification",
+  "level": "info"
+}
+```