Playground in docs (#93)

* First small steps to separate out the playground

the initial generated code is bad ... and the model gets constatly lost ... so we need to do this step by step

* Dialog now working

* Polish the standalone look a bit

* Finally

* First example with dialog playground

Author: aarne

packages/docs-site/src/components/MiniPlaygroundModal.tsx

@@ -0,0 +1,21 @@
+import {
+  DialogPlayground,
+  type DialogPlaygroundProps,
+} from "@stackables/bridge-playground";
+// Import playground styles - the docs-site custom.css overrides the base layer
+// to prevent it from breaking Starlight layout
+import "@stackables/bridge-playground/style.css";
+
+/**
+ * A button that opens a modal with MiniPlayground.
+ * Used in documentation to provide interactive examples.
+ */
+export default function MiniPlaygroundModal(props: DialogPlaygroundProps) {
+  // not-content prevents Starlight's .sl-markdown-content styles (e.g. button
+  // height overrides, typography resets) from affecting the playground.
+  return (
+    <div className="not-content">
+      <DialogPlayground {...props} />
+    </div>
+  );
+}

packages/docs-site/src/components/PlaygroundWrapper.tsx

@@ -1,6 +1,6 @@
-import { Playground } from "@stackables/bridge-playground";
+import { App } from "@stackables/bridge-playground";
 import "@stackables/bridge-playground/style.css";
 
 export default function PlaygroundWrapper() {
-  return <Playground />;
+  return <App />;
 }

packages/docs-site/src/content/docs/reference/30-wiring-routing.mdx

@@ -4,6 +4,7 @@ description: How to move data from sources to targets, build nested payloads, an
 ---
 
 import { Aside } from "@astrojs/starlight/components";
+import MiniPlaygroundModal from "../../../components/MiniPlaygroundModal.tsx";
 
 Wires are the fundamental building blocks of The Bridge. They define the exact paths data takes as it flows through your graph.
 
@@ -32,6 +33,49 @@ o.country = "Germany"
 
 ```
 
+<MiniPlaygroundModal
+  client:load
+  bridge={`
+version 1.5
+
+const lorem = {
+"ipsum": "dolor sit amet",
+"consetetur": 8.9
+}
+
+bridge Query.greet {
+
+# witnout alias
+
+with const
+
+# with alias
+
+with input as inp
+with output as o
+
+# Pull value from input node
+
+o.nameFromInput <- inp.name
+
+# Constants
+
+o.constNumer = 7.7
+o.constString = "just a string"
+
+# Bridge variables also need pulling
+
+o.constFromConst <- const.lorem
+}
+`}
+
+inputJson={`{
+  "name": "Hello Bridge"
+}`}
+
+autoRun={true}
+/>
+
 ## 2. Path Scoping Blocks (Nested Objects)
 
 When you are wiring deeply nested JSON objects (like a complex REST API request body), repeating long path prefixes over and over becomes tedious and difficult to read.

packages/docs-site/src/styles/custom.css

@@ -1,3 +1,28 @@
+@layer theme, base, starlight, catppuccin, components, utilities;
+@import "tailwindcss";
+/* Source playground components for Tailwind to detect their classes */
+/* @source "../../../playground/src"; */
+@source "../components";
+
+@theme {
+  /* Monospace font stack for code editors - same as playground */
+  --font-mono:
+    "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
+
+  /* Custom accent colors from playground */
+  --color-sky-badge: #164e63;
+  --color-sky-trace: #1e3a5f;
+}
+
+/* Override Tailwind's base layer to prevent it breaking Starlight's layout */
+@layer base {
+  html,
+  body {
+    /* Reset to auto to let Starlight control layout */
+    height: auto;
+  }
+}
+
 /* Widen the default content column (Starlight default: 45rem / 720px) */
 /* :root {
   --sl-content-width: 55rem;

packages/docs-site/worker-configuration.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // Generated by Wrangler by running `wrangler types` (hash: e41227086db6ad8bb19b68d77b165868)
-// Runtime types generated with workerd@1.20260305.0 2026-02-24 global_fetch_strictly_public,nodejs_compat
+// Runtime types generated with workerd@1.20260301.1 2026-02-24 global_fetch_strictly_public,nodejs_compat
 declare namespace Cloudflare {
 	interface GlobalProps {
 		mainModule: typeof import("./dist/_worker.js/index");
@@ -3328,6 +3328,12 @@ declare abstract class Performance {
     get timeOrigin(): number;
     /* [Cloudflare Docs Reference](https://developers.cloudflare.com/workers/runtime-apis/performance/#performancenow) */
     now(): number;
+    /**
+     * The **`toJSON()`** method of the Performance interface is a Serialization; it returns a JSON representation of the Performance object.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Performance/toJSON)
+     */
+    toJSON(): object;
 }
 // AI Search V2 API Error Interfaces
 interface AiSearchInternalError extends Error {

packages/playground/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "exports": {
-    ".": "./src/Playground.tsx",
+    ".": "./src/index.ts",
     "./style.css": "./src/index.css"
   },
   "scripts": {