사이트: 데모와 전체 glue 코드를 탭형 워크벤치에서 함께 보여준다

site/package.json

@@ -32,6 +32,7 @@
     "react-markdown": "^10.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^4.4.3",
     "zod": "^4.0.0"
   },
   "devDependencies": {

site/src/app/routes/_page.tsx

@@ -1,4 +1,6 @@
 import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { DemoSourcesProvider } from "../../shared/demo-workbench/DemoSurface";
+import { demoSources } from "../../shared/demo-workbench/demo-sources";
 import { PageFrame, PageLeadProvider } from "../../shared/ui/primitives";
 import { SiteBreadcrumb } from "../breadcrumb";
 import { findSiteRoute, siteRoutes, usePathname } from "../router";
@@ -9,10 +11,20 @@ export const Route = createFileRoute("/_page")({
 
 function InteriorPage() {
   const route = findSiteRoute(usePathname());
+  const sources = demoSources(route.path);
+  const content = <Outlet />;
+  if (sources !== undefined) {
+    return (
+      <PageFrame>
+        <SiteBreadcrumb route={route} routes={siteRoutes} />
+        <DemoSourcesProvider sources={sources}>{content}</DemoSourcesProvider>
+      </PageFrame>
+    );
+  }
   return (
     <PageLeadProvider lead={<SiteBreadcrumb route={route} routes={siteRoutes} />}>
       <PageFrame>
-        <Outlet />
+        {content}
       </PageFrame>
     </PageLeadProvider>
   );

site/src/routes/canvas-demo/CanvasDemoRoute.tsx

@@ -1,4 +1,5 @@
 import { useState, type PointerEvent } from "react";
+import { DemoSurface } from "../../shared/demo-workbench/DemoSurface";
 import {
   createObjectEditor,
   type ObjectDocument,
@@ -76,6 +77,7 @@ export function CanvasDemoRoute() {
         Pick a box, drag it, then fill the selection. The board is the editor.
       </PageHeader>
 
+        <DemoSurface>
       <ProductApp
         toolbarLabel="Canvas actions"
         canvasClassName="relative min-h-[22rem] overflow-hidden"
@@ -117,6 +119,7 @@ export function CanvasDemoRoute() {
           })}
         </section>
       </ProductApp>
+        </DemoSurface>
     </PageFrame>
   );
 }

site/src/routes/database-demo/DatabaseDemoRoute.tsx

@@ -1,3 +1,4 @@
+import { DemoSurface } from "../../shared/demo-workbench/DemoSurface";
 import { PageFrame, PageHeader } from "../../shared/ui/primitives";
 import { DatabaseTableDemo } from "./DatabaseTableDemo";
 
@@ -7,7 +8,9 @@ export function DatabaseDemoRoute() {
         <PageHeader illustration="database" title="Database Demo">
             One canonical database, typed property editors, persistent view configuration, structural selection, and native text leases.
         </PageHeader>
-        <DatabaseTableDemo />
+        <DemoSurface>
+          <DatabaseTableDemo />
+        </DemoSurface>
     </PageFrame>
   );
 }

site/src/routes/document-demo/DocumentDemoRoute.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState, type ClipboardEvent } from "react";
+import { DemoSurface } from "../../shared/demo-workbench/DemoSurface";
 import {
   type BlockDocument,
   type DocumentClipboard,
@@ -169,6 +170,7 @@ export function DocumentDemoRoute() {
           )}
         >A deliberately small interface for selection, clipboard, history, keyboard input, and canonical JSON publication.</PageHeader>
 
+        <DemoSurface>
         <ProductApp
           toolbarLabel="Document actions"
           toolbar={(
@@ -255,6 +257,7 @@ export function DocumentDemoRoute() {
             <p className={classes("mb-0 mt-3", ui.text.meta)}>Shift-click selects a range. Mod-click adds or removes a block. Arrow keys move the selection when focus is on the surface.</p>
           </section>
         </ProductApp>
+        </DemoSurface>
     </PageFrame>
   );
 }

site/src/routes/editing-demos/ClipboardDemoRoute.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { DemoSurface } from "../../shared/demo-workbench/DemoSurface";
 import { type BlockDocument, type DocumentClipboard } from "@interactive-os/json-document-editing";
 import { useDocumentEditor, useEditing } from "@interactive-os/json-document-react";
 import { Inspector } from "../../shared/ui/inspector";
@@ -56,6 +57,7 @@ export function ClipboardDemoRoute() {
         Selection에서 시작해 copy 또는 cut으로 구조화된 payload를 만들고 paste에 넘깁니다.
       </PageHeader>
 
+      <DemoSurface>
       <div className="grid gap-4 lg:grid-cols-3">
         <section className={classes("p-4", ui.surface.raised)} aria-labelledby="clipboard-input">
           <p className={ui.text.label}>1 · Selection</p>
@@ -98,6 +100,7 @@ export function ClipboardDemoRoute() {
           ]} />
         </section>
       </div>
+      </DemoSurface>
     </PageFrame>
   );
 }

site/src/routes/editing-demos/HistoryDemoRoute.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { DemoSurface } from "../../shared/demo-workbench/DemoSurface";
 import { type BlockDocument } from "@interactive-os/json-document-editing";
 import { useDocumentEditor, useEditing } from "@interactive-os/json-document-react";
 import { Inspector } from "../../shared/ui/inspector";
@@ -50,6 +51,7 @@ export function HistoryDemoRoute() {
         편집을 한 번 commit하고, 만들어진 History 항목으로 document.value와 Selection을 함께 복원합니다.
       </PageHeader>
 
+      <DemoSurface>
       <div className="grid gap-4 lg:grid-cols-3">
         <section className={classes("p-4", ui.surface.raised)} aria-labelledby="history-input">
           <p className={ui.text.label}>1 · 편집</p>
@@ -104,6 +106,7 @@ export function HistoryDemoRoute() {
           ]} />
         </section>
       </div>
+      </DemoSurface>
     </PageFrame>
   );
 }