docs(Q7): mermaid 식 라이브 tile 데모 (estreuv-demo 코드펜스)

코드 블록이 실제 컴포넌트로 렌더되는 형태 (mermaid 처럼):
- .vitepress/config.js: estreuv-demo fence → live HTML + 소스 동시 출력,
  vue isCustomElement(estreuv-*) 로 SSR 통과
- .vitepress/theme/index.js: client-only 로 estreuv tile 등록(hydration
  후 업그레이드) + custom.css 데모 박스
- tiles.md: tile 예제 4종 → estreuv-demo (라이브)
- estreuv/lit 는 docs 가 선언 안 해도 root 워크스페이스 호이스트에서
  Vite 해소 (docs 에 dep 추가 시 install 불안정 → 미선언 채택)

빌드 클린(9p), npm ci 일관, estreuv 38/38 회귀 0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: SoliEstre

packages/docs/.vitepress/config.js

@@ -9,6 +9,36 @@ export default defineConfig({
   cleanUrls: true,
   lastUpdated: true,
 
+  // Treat <estreuv-*> as custom elements so Vue's compiler leaves them
+  // intact (they upgrade client-side once registered in theme/index.js).
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.startsWith('estreuv-'),
+      },
+    },
+  },
+
+  markdown: {
+    // mermaid-style live demo: an ```estreuv-demo fenced block renders the
+    // markup live (registered custom elements) AND shows the source.
+    config: (md) => {
+      const fence = md.renderer.rules.fence;
+      md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+        const token = tokens[idx];
+        if (token.info.trim() === 'estreuv-demo') {
+          const raw = token.content;
+          const asHtml = fence([{ ...token, info: 'html' }], 0, options, env, self);
+          return `<div class="estreuv-demo">
+  <div class="estreuv-demo__live">\n${raw}\n</div>
+  <div class="estreuv-demo__code">${asHtml}</div>
+</div>\n`;
+        }
+        return fence(tokens, idx, options, env, self);
+      };
+    },
+  },
+
   themeConfig: {
     nav: [
       { text: 'Guide', link: '/guide/getting-started' },

packages/docs/.vitepress/theme/custom.css

@@ -0,0 +1,25 @@
+/* Live demo block (```estreuv-demo) — live render above, source below. */
+.estreuv-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 18px 0;
+  overflow: hidden;
+}
+
+.estreuv-demo__live {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 24px;
+  background: var(--vp-c-bg-soft);
+}
+
+.estreuv-demo__code [class*='language-'] {
+  margin: 0;
+  border-radius: 0;
+}
+
+.estreuv-demo__code [class*='language-']::before {
+  display: none; /* hide the lang label inside the demo frame */
+}

packages/docs/.vitepress/theme/index.js

@@ -0,0 +1,18 @@
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
+
+// Register the EstreUV tile custom elements on the client so that
+// ```estreuv-demo blocks render live. Browser-only (web components have
+// no SSR); the markup is emitted during SSR and upgrades after hydration.
+export default {
+  extends: DefaultTheme,
+  enhanceApp() {
+    if (typeof window !== 'undefined') {
+      import('estreuv/dark-mode-tile.js');
+      import('estreuv/clock-tile.js');
+      import('estreuv/notif-count-tile.js');
+      import('estreuv/notelle-sidebar.js');
+      import('estreuv/notelle-item.js');
+    }
+  },
+};

packages/docs/tiles.md

@@ -9,7 +9,7 @@ A theme toggle cycling **auto → light → dark**, persisted to `localStorage`
 `body[data-dark-mode]` (delegates to `estreUi.setDarkMode` when EstreUI is present). Pattern:
 local-state + global-API delegation.
 
-```html
+```estreuv-demo
 <estreuv-dark-mode-tile></estreuv-dark-mode-tile>
 <estreuv-dark-mode-tile text="Theme" color="#2a8"></estreuv-dark-mode-tile>
 ```
@@ -27,7 +27,7 @@ Method: `.cycle()` — advance to the next state.
 A timer-driven clock. Starts its interval on `onShow`, stops on `onHide` — a clean example of
 **resource lifecycle** tied to visibility (and `onClose`/`onRelease`/`disconnectedCallback` cleanup).
 
-```html
+```estreuv-demo
 <estreuv-clock-tile></estreuv-clock-tile>
 <estreuv-clock-tile format="12h" text="12h"></estreuv-clock-tile>
 ```
@@ -38,7 +38,7 @@ A badge counter driven by **external / intent** state. `bump(by)` and `clear()`
 `requestIntentUpdate` (no direct mutation); `onShow` syncs from `intent.notifCount`. Shows `N+` past
 `maxDisplay`.
 
-```html
+```estreuv-demo
 <estreuv-notif-count-tile></estreuv-notif-count-tile>
 <estreuv-notif-count-tile count="128" max="99" text="badge cap"></estreuv-notif-count-tile>
 ```
@@ -50,7 +50,7 @@ Methods: `.bump(by = 1)`, `.clear()`.
 A nested-container prototype — a sidebar with light-DOM `<estreuv-notelle-item>` children. Demonstrates
 **nested lifecycle** (children receive hooks via the flat dispatch) and host-level event bubbling.
 
-```html
+```estreuv-demo
 <estreuv-notelle-sidebar title="Notelle">
   <estreuv-notelle-item label="Inbox" icon="📥"></estreuv-notelle-item>
   <estreuv-notelle-item label="Archive" icon="🗄"></estreuv-notelle-item>