@fluojs/studio 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fluo contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ko.md

@@ -0,0 +1,97 @@
+# @fluojs/studio
+
+<p><a href="./README.md"><kbd>English</kbd></a> <strong><kbd>한국어</kbd></strong></p>
+
+fluo 런타임 내보내기의 공유 플랫폼 snapshot을 파일 기반으로 확인하는 뷰어입니다.
+
+## 목차
+
+- [설치](#설치)
+- [릴리스 정책](#릴리스-정책)
+- [사용 시점](#사용-시점)
+- [빠른 시작](#빠른-시작)
+- [주요 패턴](#주요-패턴)
+- [공개 API](#공개-api)
+- [관련 패키지](#관련-패키지)
+- [예제 소스](#예제-소스)
+
+## 설치
+
+```bash
+pnpm add @fluojs/studio
+```
+
+배포된 패키지는 두 가지 caller-facing entrypoint를 제공합니다.
+
+- `@fluojs/studio` / `@fluojs/studio/contracts`: snapshot 파싱, 필터링, Mermaid 내보내기 헬퍼
+- `@fluojs/studio/viewer`: 패키징된 브라우저 뷰어 HTML 진입 파일
+
+## 릴리스 정책
+
+- `@fluojs/studio`는 fluo의 intended public publish surface에 포함되는 공개 배포 패키지입니다.
+- Studio의 npm 설치 계약은 `pnpm add @fluojs/studio`이며, 저장소 내부 개발 경로는 계속 `pnpm --dir packages/studio dev`를 사용합니다.
+- 이번 릴리스에서 지원하는 공개 패키지 표면은 파일 기반 뷰어와 문서화된 snapshot 소비 계약까지입니다. 내부 workspace 연결 방식은 지원되는 설치 경로가 아닙니다.
+
+## 사용 시점
+
+- **시각화**: 애플리케이션의 모듈 그래프와 의존성 체인을 탐색할 때.
+- **진단**: 가이드된 힌트를 사용하여 플랫폼 수준의 설정 문제를 식별하고 해결할 때.
+- **성능 분석**: 부트스트랩 타이밍을 분석하고 초기화 병목 지점을 찾을 때.
+- **문서화**: 애플리케이션 아키텍처의 Mermaid 다이어그램을 생성할 때.
+
+## 빠른 시작
+
+Studio는 fluo CLI에서 내보낸 JSON 파일을 소비합니다.
+
+1. **Snapshot 내보내기**:
+   ```bash
+   fluo inspect ./src/app.module.ts --json > snapshot.json
+   ```
+
+2. **Studio 실행**:
+   ```bash
+   pnpm --dir packages/studio dev
+   ```
+
+3. **파일 로드**: Studio 웹 인터페이스에 `snapshot.json` 파일을 드래그 앤 드롭합니다.
+
+## 주요 패턴
+
+### 초기화 문제 해결
+**Diagnostics** 탭을 사용하여 런타임 부트스트랩 과정에서 수집된 이슈들을 확인합니다.
+- 심각도(Error, Warning)별로 필터링합니다.
+- `fixHint`를 통해 문제를 해결하기 위한 구체적인 조치 방법을 확인합니다.
+- `dependsOn`을 통해 어떤 컴포넌트가 실패 지점을 차단하고 있는지 확인합니다.
+
+### 아키텍처 다이어그램 내보내기
+1. **Graph** 뷰로 이동합니다.
+2. 시각화하려는 모듈이나 컴포넌트를 선택합니다.
+3. **Export to Mermaid** 버튼을 사용하여 문서에 사용할 수 있는 텍스트 기반 다이어그램을 가져옵니다.
+
+## 공개 API
+
+Studio는 주로 웹 애플리케이션이지만, 배포된 패키지는 도구/자동화가 사용할 수 있는 snapshot 소비 헬퍼도 함께 공개합니다.
+
+| 규격 | 설명 |
+|---|---|
+| `PlatformShellSnapshot` | 애플리케이션 상태를 나타내는 핵심 데이터 구조입니다. |
+| `PlatformDiagnosticIssue` | 플랫폼 오류 보고 및 수정을 위한 스키마입니다. |
+| `parseStudioPayload(rawJson)` | CLI/export JSON을 Studio snapshot/timing envelope로 검증합니다. |
+| `applyFilters(snapshot, filter)` | 원본 snapshot을 변경하지 않고 readiness/severity/query 필터를 적용합니다. |
+| `renderMermaid(snapshot)` | 로드된 플랫폼 그래프를 Mermaid 텍스트로 변환합니다. |
+
+### 배포 패키지 entrypoint
+
+- `@fluojs/studio`: snapshot 파싱/필터링/렌더링용 루트 헬퍼 배럴
+- `@fluojs/studio/contracts`: 계약 헬퍼를 직접 가져오고 싶은 도구용 명시적 서브패스
+- `@fluojs/studio/viewer`: 브라우저 뷰어 번들의 `dist/index.html` 진입 파일
+
+## 관련 패키지
+
+- **[@fluojs/cli](../cli/README.ko.md)**: Studio 호환 데이터를 생성하기 위한 `inspect` 명령을 제공합니다.
+- **[@fluojs/runtime](../runtime/README.ko.md)**: 진단 및 snapshot 데이터를 생성하는 엔진입니다.
+
+## 예제 소스
+
+- [main.ts](./src/main.ts) - 애플리케이션 진입점.
+- [contracts.ts](./src/contracts.ts) - snapshot 소비를 위한 타입 정의.

package/README.md

@@ -0,0 +1,97 @@
+# @fluojs/studio
+
+<p><strong><kbd>English</kbd></strong> <a href="./README.ko.md"><kbd>한국어</kbd></a></p>
+
+File-first shared platform snapshot viewer for fluo runtime exports.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Release Policy](#release-policy)
+- [When to Use](#when-to-use)
+- [Quick Start](#quick-start)
+- [Common Patterns](#common-patterns)
+- [Public API](#public-api)
+- [Related Packages](#related-packages)
+- [Example Sources](#example-sources)
+
+## Installation
+
+```bash
+pnpm add @fluojs/studio
+```
+
+The published package serves two caller-facing entrypoints:
+
+- `@fluojs/studio` / `@fluojs/studio/contracts` for snapshot parsing, filtering, and Mermaid export helpers.
+- `@fluojs/studio/viewer` for the packaged browser viewer HTML entry file.
+
+## Release Policy
+
+- `@fluojs/studio` is part of the intended public publish surface for fluo.
+- The npm install contract for Studio is `pnpm add @fluojs/studio`; local repo development still uses `pnpm --dir packages/studio dev`.
+- Studio's public package surface in this release is the file-first viewer and its documented snapshot-consumption contracts. Internal workspace wiring is not a supported install path.
+
+## When to Use
+
+- **Visualization**: To explore your application's module graph and dependency chains.
+- **Diagnostics**: To identify and fix platform-level configuration issues using guided hints.
+- **Performance**: To analyze bootstrap timing and identify initialization bottlenecks.
+- **Documentation**: To generate Mermaid diagrams of your application architecture.
+
+## Quick Start
+
+Studio consumes JSON exports from the fluo CLI.
+
+1. **Export a snapshot**:
+   ```bash
+   fluo inspect ./src/app.module.ts --json > snapshot.json
+   ```
+
+2. **Open Studio**:
+   ```bash
+   pnpm --dir packages/studio dev
+   ```
+
+3. **Load the file**: Drag and drop `snapshot.json` into the Studio web interface.
+
+## Common Patterns
+
+### Troubleshooting Initialization
+Use the **Diagnostics** tab to see issues collected during the runtime bootstrap process.
+- Filter by severity (Error, Warning).
+- Use `fixHint` to get actionable advice on how to resolve the issue.
+- View `dependsOn` to see which components are blocking the failing one.
+
+### Exporting Architecture Diagrams
+1. Navigate to the **Graph** view.
+2. Select the modules or components you want to visualize.
+3. Use the **Export to Mermaid** button to get a text-based diagram for your documentation.
+
+## Public API
+
+Studio is primarily a web application, but the published package also exposes the documented snapshot-consumption helpers used by tooling and automation.
+
+| Contract | Description |
+|---|---|
+| `PlatformShellSnapshot` | The core data structure representing the application state. |
+| `PlatformDiagnosticIssue` | Schema for reporting and fixing platform errors. |
+| `parseStudioPayload(rawJson)` | Validates CLI/exported JSON into the Studio snapshot/timing envelope. |
+| `applyFilters(snapshot, filter)` | Applies readiness/severity/query filters without mutating the source snapshot. |
+| `renderMermaid(snapshot)` | Produces Mermaid graph text from the loaded platform graph. |
+
+### Published package entrypoints
+
+- `@fluojs/studio`: root helper barrel for snapshot parsing/filtering/rendering.
+- `@fluojs/studio/contracts`: explicit helper subpath for tooling that wants the contract helpers directly.
+- `@fluojs/studio/viewer`: packaged `dist/index.html` entrypoint for the browser viewer bundle.
+
+## Related Packages
+
+- **[@fluojs/cli](../cli/README.md)**: Provides the `inspect` command to generate Studio-compatible exports.
+- **[@fluojs/runtime](../runtime/README.md)**: The engine that generates the diagnostic and snapshot data.
+
+## Example Sources
+
+- [main.ts](./src/main.ts) - Application entry point.
+- [contracts.ts](./src/contracts.ts) - Type definitions for snapshot consumption.

package/dist/assets/index-BTqPuJus.css

@@ -0,0 +1 @@
+:root{color-scheme:light dark;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{margin:0;background:#0b1020;color:#e5e7eb}main{max-width:1200px;margin:0 auto;padding:24px}h1,h2,h3{margin-top:0}code{background:#1f2937;border-radius:4px;padding:2px 6px}.card{border:1px solid #334155;border-radius:10px;background:#111827;padding:16px;margin-bottom:16px}.split-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}button{background:#2563eb;border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}button:disabled{background:#475569;cursor:not-allowed}label{display:block;margin-bottom:10px}input[type=text]{width:100%;margin-top:6px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e5e7eb;padding:8px 10px}.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}.muted{color:#94a3b8}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.chip{border:1px solid #334155;border-radius:999px;padding:2px 8px;font-size:12px}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #334155;text-align:left;font-size:13px;padding:6px}pre{overflow:auto;max-height:300px;background:#0f172a;border:1px solid #334155;padding:12px;border-radius:8px}.notice{margin-top:8px;color:#93c5fd}.uploader.drag-active{border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa59 inset}#graph-host{overflow:auto;border:1px solid #334155;border-radius:8px;background:#0f172a}.edge-line{stroke:#64748b;stroke-width:1.6}.edge-arrow{fill:#64748b}.module-node{fill:#1e293b;stroke:#64748b;stroke-width:1.5;cursor:pointer}.module-root{stroke:#3b82f6;stroke-width:2.6}.component-ready{fill:#14532d}.component-degraded{fill:#7c2d12}.component-not-ready{fill:#7f1d1d}.module-selected{stroke:#f59e0b;stroke-width:3}.module-label{fill:#e5e7eb;font-size:11px;pointer-events:none}.diagnostics-list{display:grid;gap:12px}.issue{margin-bottom:0}.issue.severity-error{border-color:#ef4444}.issue.severity-warning{border-color:#f59e0b}.issue.severity-info{border-color:#3b82f6}a{color:#93c5fd}

package/dist/assets/index-CUoyTA_q.js

@@ -0,0 +1,128 @@
+(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))l(o);new MutationObserver(o=>{for(const r of o)if(r.type==="childList")for(const a of r.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&l(a)}).observe(document,{childList:!0,subtree:!0});function n(o){const r={};return o.integrity&&(r.integrity=o.integrity),o.referrerPolicy&&(r.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?r.credentials="include":o.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function l(o){if(o.ep)return;o.ep=!0;const r=n(o);fetch(o.href,r)}})();function g(t){return typeof t=="object"&&t!==null}function b(t){return Array.isArray(t)&&t.every(e=>typeof e=="string")}function E(t){return t==="ready"||t==="not-ready"||t==="degraded"}function x(t){return t==="healthy"||t==="unhealthy"||t==="degraded"}function I(t){return t==="error"||t==="warning"||t==="info"}function M(t){if(!g(t))return null;if(typeof t.generatedAt!="string"||!g(t.readiness)||!g(t.health)||!Array.isArray(t.components)||!Array.isArray(t.diagnostics))throw new Error("Invalid platform snapshot payload.");if(!E(t.readiness.status)||typeof t.readiness.critical!="boolean")throw new Error("Invalid aggregate readiness in platform snapshot payload.");if(!x(t.health.status))throw new Error("Invalid aggregate health in platform snapshot payload.");for(const e of t.components){if(!g(e))throw new Error("Invalid component entry in platform snapshot payload.");if(typeof e.id!="string"||typeof e.kind!="string"||typeof e.state!="string"||!g(e.readiness)||!g(e.health)||!b(e.dependencies)||!g(e.telemetry)||!g(e.ownership)||!g(e.details))throw new Error("Invalid component shape in platform snapshot payload.");if(!E(e.readiness.status)||typeof e.readiness.critical!="boolean")throw new Error("Invalid component readiness in platform snapshot payload.");if(!x(e.health.status))throw new Error("Invalid component health in platform snapshot payload.");if(typeof e.telemetry.namespace!="string"||!g(e.telemetry.tags)||typeof e.ownership.ownsResources!="boolean"||typeof e.ownership.externallyManaged!="boolean")throw new Error("Invalid component telemetry/ownership in platform snapshot payload.")}for(const e of t.diagnostics){if(!g(e))throw new Error("Invalid diagnostics issue entry in platform snapshot payload.");if(typeof e.code!="string"||!I(e.severity)||typeof e.componentId!="string"||typeof e.message!="string")throw new Error("Invalid diagnostics issue shape in platform snapshot payload.");if(e.cause!==void 0&&typeof e.cause!="string"||e.fixHint!==void 0&&typeof e.fixHint!="string"||e.docsUrl!==void 0&&typeof e.docsUrl!="string"||e.dependsOn!==void 0&&!b(e.dependsOn))throw new Error("Invalid optional diagnostics issue fields in platform snapshot payload.")}return t}function j(t){if(!g(t))return null;if(t.version!==1)throw new Error("Unsupported bootstrap timing version. Expected version: 1.");if(typeof t.totalMs!="number"||!Array.isArray(t.phases))throw new Error("Invalid bootstrap timing payload.");for(const e of t.phases)if(!g(e)||typeof e.name!="string"||typeof e.durationMs!="number")throw new Error("Invalid phase entry in bootstrap timing payload.");return t}function k(t){const e=JSON.parse(t),n=g(e)?e:void 0,l=M((n==null?void 0:n.snapshot)??e),o=j((n==null?void 0:n.timing)??(l?void 0:e));if(!l&&!o)throw new Error("Unsupported file format. Expected platform snapshot JSON or timing JSON.");return{payload:{...l?{snapshot:l}:{},...o?{timing:o}:{}},rawJson:t}}function D(t,e){const n=e.query.trim().toLowerCase(),l=t.components.filter(r=>e.readinessStatuses.length>0&&!e.readinessStatuses.includes(r.readiness.status)?!1:n?r.id.toLowerCase().includes(n)||r.kind.toLowerCase().includes(n)||r.dependencies.some(a=>a.toLowerCase().includes(n)):!0),o=t.diagnostics.filter(r=>{var a,c,p,w;return e.severities.length>0&&!e.severities.includes(r.severity)?!1:n?r.code.toLowerCase().includes(n)||r.componentId.toLowerCase().includes(n)||r.message.toLowerCase().includes(n)||(((a=r.cause)==null?void 0:a.toLowerCase().includes(n))??!1)||(((c=r.fixHint)==null?void 0:c.toLowerCase().includes(n))??!1)||(((p=r.docsUrl)==null?void 0:p.toLowerCase().includes(n))??!1)||(((w=r.dependsOn)==null?void 0:w.some(m=>m.toLowerCase().includes(n)))??!1):!0});return{...t,components:l,diagnostics:o}}function S(t){return t.replaceAll('"','\\"')}function J(t){return t.replaceAll(/[^a-zA-Z0-9_]/g,"_")}function q(t){let e=2166136261;for(const n of t)e^=n.codePointAt(0)??0,e=Math.imul(e,16777619)>>>0;return e.toString(16).padStart(8,"0")}function T(t){return`EXT_${J(t)}_${q(t)}`}function L(t){const e=["graph TD"],n=new Map,l=new Map;if(t.components.length===0)return e.push('  EMPTY["No registered platform components"]'),e.join(`
+`);for(const[a,c]of t.components.entries()){const p=`C${String(a+1)}`;n.set(c.id,p),e.push(`  ${p}["${S(c.id)}\\nkind: ${S(c.kind)}\\nreadiness: ${c.readiness.status}\\nhealth: ${c.health.status}"]`)}for(const a of t.components){const c=n.get(a.id);if(c)for(const p of a.dependencies){const w=n.get(p);if(w){e.push(`  ${c} --> ${w}`);continue}let m=l.get(p);m||(m=T(p),l.set(p,m),e.push(`  ${m}["${S(p)}"]`)),e.push(`  ${c} --> ${m}`)}}const o=[],r=[];for(const a of t.components){const c=n.get(a.id);c&&(a.readiness.status==="degraded"&&o.push(c),a.readiness.status==="not-ready"&&r.push(c))}return o.length>0&&(e.push(`  class ${o.join(",")} degraded`),e.push("  classDef degraded stroke:#f59e0b,stroke-width:2px")),r.length>0&&(e.push(`  class ${r.join(",")} notReady`),e.push("  classDef notReady stroke:#ef4444,stroke-width:2px")),e.join(`
+`)}const C=document.querySelector("#app");if(!C)throw new Error("App root not found.");const R=C,U=["ready","degraded","not-ready"],P=["error","warning","info"],i={filter:{query:"",readinessStatuses:[],severities:[]}};function d(t){return t.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#039;")}function F(t,e){const n=new Blob([e],{type:"application/json"}),l=URL.createObjectURL(n),o=document.createElement("a");o.href=l,o.download=t,o.click(),URL.revokeObjectURL(l)}async function O(t){if(!navigator.clipboard)throw new Error("Clipboard API is unavailable.");await navigator.clipboard.writeText(t)}function N(t,e){return t.includes(e)?t.filter(n=>n!==e):[...t,e]}function A(t,e){return!t||t.components.length===0?void 0:(e?t.components.find(l=>l.id===e):void 0)??t.components[0]}function v(){var n;const t=(n=i.payload)==null?void 0:n.snapshot;if(!t){i.filteredSnapshot=void 0,i.selectedComponentId=void 0;return}i.filteredSnapshot=D(t,i.filter);const e=A(i.filteredSnapshot,i.selectedComponentId);i.selectedComponentId=e==null?void 0:e.id}function H(t,e){const o=Math.min(900,460)/2-70,r=900/2,a=460/2,c=t.components,p=new Map;c.forEach((u,s)=>{const f=Math.PI*2*s/Math.max(c.length,1);p.set(u.id,{x:r+o*Math.cos(f),y:a+o*Math.sin(f)})});const w=c.flatMap(u=>u.dependencies.map(s=>{const f=p.get(u.id),h=p.get(s);return!f||!h?"":`<line x1="${f.x}" y1="${f.y}" x2="${h.x}" y2="${h.y}" class="edge-line" marker-end="url(#arrow)" />`})).join(""),m=c.map(u=>{const s=p.get(u.id);if(!s)return"";const h=["module-node",u.readiness.status==="not-ready"?"component-not-ready":u.readiness.status==="degraded"?"component-degraded":"component-ready",u.id===e?"module-selected":""].filter(Boolean).join(" ");return`<g>
+  <circle cx="${s.x}" cy="${s.y}" r="34" class="${h}" data-component="${d(u.id)}" />
+  <text x="${s.x}" y="${s.y+4}" text-anchor="middle" class="module-label">${d(u.id)}</text>
+</g>`}).join("");return`<svg viewBox="0 0 900 460" role="img" aria-label="Platform component dependency graph">
+  <defs>
+    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" class="edge-arrow" />
+    </marker>
+  </defs>
+  ${w}
+  ${m}
+</svg>`}function _(t){if(!t)return'<p class="muted">No component selected.</p>';const e=t.dependencies.length>0?t.dependencies.map(n=>`<span class="chip">dependsOn: ${d(n)}</span>`).join(""):'<span class="chip">dependsOn: none</span>';return`
+    <h3>${d(t.id)}</h3>
+    <p class="muted">kind: <strong>${d(t.kind)}</strong> · state: <strong>${d(t.state)}</strong></p>
+    <div class="chips">
+      <span class="chip">readiness: ${d(t.readiness.status)}</span>
+      <span class="chip">critical: ${t.readiness.critical?"true":"false"}</span>
+      <span class="chip">health: ${d(t.health.status)}</span>
+      <span class="chip">ownership: owns=${t.ownership.ownsResources?"true":"false"}/external=${t.ownership.externallyManaged?"true":"false"}</span>
+      ${e}
+    </div>
+    <p class="muted">telemetry namespace: <code>${d(t.telemetry.namespace)}</code></p>
+    <h4>Sanitized details</h4>
+    <pre>${d(JSON.stringify(t.details,null,2))}</pre>
+  `}function z(){var e;const t=(e=i.payload)==null?void 0:e.timing;return t?`
+    <p><strong>Total:</strong> ${t.totalMs.toFixed(3)}ms</p>
+    <table>
+      <thead>
+        <tr><th>phase</th><th>duration (ms)</th></tr>
+      </thead>
+      <tbody>
+        ${t.phases.map(n=>`<tr><td>${d(n.name)}</td><td>${n.durationMs.toFixed(3)}</td></tr>`).join("")}
+      </tbody>
+    </table>
+  `:'<p class="muted">Timing not collected.</p>'}function Y(t){if(!t)return'<p class="muted">No platform snapshot loaded.</p>';const e={degraded:t.components.filter(n=>n.readiness.status==="degraded").length,notReady:t.components.filter(n=>n.readiness.status==="not-ready").length,ready:t.components.filter(n=>n.readiness.status==="ready").length};return`
+    <div class="chips">
+      <span class="chip">generatedAt: ${d(t.generatedAt)}</span>
+      <span class="chip">aggregate readiness: ${d(t.readiness.status)}</span>
+      <span class="chip">aggregate health: ${d(t.health.status)}</span>
+      <span class="chip">components: ${String(t.components.length)}</span>
+      <span class="chip">diagnostics: ${String(t.diagnostics.length)}</span>
+      <span class="chip">ready/degraded/not-ready: ${e.ready}/${e.degraded}/${e.notReady}</span>
+    </div>
+  `}function X(t){return t?t.diagnostics.length===0?'<p class="muted">No diagnostics issues.</p>':`<div class="diagnostics-list">
+    ${t.diagnostics.map(e=>{const n=e.dependsOn&&e.dependsOn.length>0?`<div class="chips">${e.dependsOn.map(l=>`<span class="chip">dependsOn: ${d(l)}</span>`).join("")}</div>`:"";return`<article class="card issue severity-${d(e.severity)}">
+          <h3>${d(e.code)}</h3>
+          <p><strong>severity:</strong> ${d(e.severity)} · <strong>component:</strong> ${d(e.componentId)}</p>
+          <p>${d(e.message)}</p>
+          ${e.cause?`<p><strong>cause:</strong> ${d(e.cause)}</p>`:""}
+          ${e.fixHint?`<p><strong>fix hint:</strong> ${d(e.fixHint)}</p>`:""}
+          ${e.docsUrl?`<p><strong>docs:</strong> <a href="${d(e.docsUrl)}" target="_blank" rel="noreferrer">${d(e.docsUrl)}</a></p>`:""}
+          ${n}
+        </article>`}).join("")}
+  </div>`:'<p class="muted">No platform snapshot loaded.</p>'}function y(t){const e=i.filteredSnapshot,n=A(e,i.selectedComponentId),l=e?L(e):"",o=e&&e.components.length>0?H(e,n==null?void 0:n.id):'<p class="muted">No platform components loaded.</p>';R.innerHTML=`
+    <main>
+      <header>
+        <h1>Fluo Studio Platform Snapshot Viewer</h1>
+        <p>Load JSON exported by <code>fluo inspect --json</code> (shared platform snapshot/diagnostic schema) and optionally timing JSON from <code>--timing</code>.</p>
+      </header>
+
+      <section class="card uploader" id="drop-zone">
+        <h2>Diagnostics file input</h2>
+        <p>Drag & drop a JSON file, or choose one manually.</p>
+        <input type="file" id="file-input" accept="application/json" />
+        <div class="actions">
+          <button id="download-json" ${i.rawJson?"":"disabled"}>Download loaded JSON</button>
+          <button id="copy-json" ${i.rawJson?"":"disabled"}>Copy loaded JSON</button>
+          <button id="copy-mermaid" ${e?"":"disabled"}>Copy Mermaid</button>
+        </div>
+        ${t?`<p class="notice">${d(t)}</p>`:""}
+      </section>
+
+      <section class="card">
+        <h2>Snapshot summary</h2>
+        ${Y(e)}
+      </section>
+
+      <section class="split-grid">
+        <div class="card">
+          <h2>Search and filtering</h2>
+          <label>
+            Search component/diagnostic
+            <input type="text" id="search" value="${d(i.filter.query)}" placeholder="e.g. redis.default or QUEUE_DEPENDENCY_NOT_READY" />
+          </label>
+
+          <div class="filter-row">
+            <span>Component readiness</span>
+            ${U.map(s=>`<label><input type="checkbox" data-readiness="${s}" ${i.filter.readinessStatuses.includes(s)?"checked":""}/> ${s}</label>`).join("")}
+          </div>
+
+          <div class="filter-row">
+            <span>Diagnostic severity</span>
+            ${P.map(s=>`<label><input type="checkbox" data-severity="${s}" ${i.filter.severities.includes(s)?"checked":""}/> ${s}</label>`).join("")}
+          </div>
+        </div>
+
+        <div class="card">
+          <h2>Timing</h2>
+          ${z()}
+        </div>
+      </section>
+
+      <section class="card">
+        <h2>Platform dependency graph</h2>
+        <p class="muted">Component dependencies are rendered directly from the shared platform snapshot schema.</p>
+        <div id="graph-host">${o}</div>
+      </section>
+
+      <section class="split-grid">
+        <div class="card" id="details-panel">
+          <h2>Component details</h2>
+          ${_(n)}
+        </div>
+        <div class="card">
+          <h2>Mermaid output</h2>
+          <pre>${d(l||"No snapshot loaded.")}</pre>
+        </div>
+      </section>
+
+      <section class="card">
+        <h2>Diagnostics issues</h2>
+        <p class="muted">Fix hints and dependency chains are rendered from <code>diagnostics.fixHint</code> and <code>diagnostics.dependsOn</code>.</p>
+        ${X(e)}
+      </section>
+    </main>
+  `;const r=document.querySelector("#file-input"),a=document.querySelector("#drop-zone"),c=document.querySelector("#search"),p=document.querySelector("#copy-json"),w=document.querySelector("#download-json"),m=document.querySelector("#copy-mermaid"),u=async s=>{const f=await s.text();try{const h=k(f);i.payload=h.payload,i.rawJson=h.rawJson,v(),y("Diagnostics file loaded successfully.")}catch(h){i.payload=void 0,i.filteredSnapshot=void 0,i.selectedComponentId=void 0,i.rawJson=void 0,y(h instanceof Error?h.message:"Failed to parse diagnostics file.")}};r==null||r.addEventListener("change",async s=>{var $;const h=($=s.target.files)==null?void 0:$[0];h&&await u(h)}),a==null||a.addEventListener("dragover",s=>{s.preventDefault(),a.classList.add("drag-active")}),a==null||a.addEventListener("dragleave",()=>{a.classList.remove("drag-active")}),a==null||a.addEventListener("drop",async s=>{var h,$;s.preventDefault(),a.classList.remove("drag-active");const f=($=(h=s.dataTransfer)==null?void 0:h.files)==null?void 0:$[0];f&&await u(f)}),c==null||c.addEventListener("input",s=>{const f=s.target;i.filter.query=f.value,v(),y()}),document.querySelectorAll("input[data-readiness]").forEach(s=>{s.addEventListener("change",()=>{i.filter.readinessStatuses=N(i.filter.readinessStatuses,s.dataset.readiness),v(),y()})}),document.querySelectorAll("input[data-severity]").forEach(s=>{s.addEventListener("change",()=>{i.filter.severities=N(i.filter.severities,s.dataset.severity),v(),y()})}),p==null||p.addEventListener("click",async()=>{if(i.rawJson)try{await O(i.rawJson),y("Loaded JSON copied to clipboard.")}catch(s){y(s instanceof Error?s.message:"Failed to copy JSON.")}}),w==null||w.addEventListener("click",()=>{i.rawJson&&(F("fluo-diagnostics.json",i.rawJson),y("Loaded JSON downloaded."))}),m==null||m.addEventListener("click",async()=>{if(e)try{await O(L(e)),y("Mermaid copied to clipboard.")}catch(s){y(s instanceof Error?s.message:"Failed to copy Mermaid text.")}}),document.querySelectorAll("[data-component]").forEach(s=>{s.addEventListener("click",()=>{const f=s.dataset.component;f&&(i.selectedComponentId=f,y())})})}v();y();

package/dist/contracts.d.ts

@@ -0,0 +1,49 @@
+import type { BootstrapTimingDiagnostics, PlatformDiagnosticIssue, PlatformShellSnapshot, PlatformSnapshot } from '@fluojs/runtime';
+export type PlatformReadinessStatus = PlatformSnapshot['readiness']['status'];
+export type PlatformDiagnosticSeverity = PlatformDiagnosticIssue['severity'];
+/**
+ * Serializable Studio payload envelope built from inspect snapshot/timing exports.
+ */
+export interface StudioPayload {
+    snapshot?: PlatformShellSnapshot;
+    timing?: BootstrapTimingDiagnostics;
+}
+/**
+ * Filter state applied to the loaded platform snapshot inside Studio.
+ */
+export interface FilterState {
+    query: string;
+    readinessStatuses: PlatformReadinessStatus[];
+    severities: PlatformDiagnosticSeverity[];
+}
+/**
+ * Parsed Studio payload together with the original JSON source.
+ */
+export interface ParsedPayload {
+    payload: StudioPayload;
+    rawJson: string;
+}
+/**
+ * Parses a Studio JSON file into the documented snapshot/timing envelope.
+ *
+ * @param rawJson - Raw JSON emitted by `fluo inspect` or a Studio-compatible producer.
+ * @returns The validated Studio payload plus the original JSON string.
+ * @throws Error when the JSON does not match the supported Studio file contracts.
+ */
+export declare function parseStudioPayload(rawJson: string): ParsedPayload;
+/**
+ * Applies Studio filter state to a platform snapshot without mutating the input.
+ *
+ * @param snapshot - The loaded platform snapshot.
+ * @param filter - Active readiness, severity, and query filters.
+ * @returns A filtered snapshot containing only the matching components and diagnostics.
+ */
+export declare function applyFilters(snapshot: PlatformShellSnapshot, filter: FilterState): PlatformShellSnapshot;
+/**
+ * Renders the loaded platform snapshot as a Mermaid dependency graph.
+ *
+ * @param snapshot - The platform snapshot to render.
+ * @returns Mermaid graph text suitable for docs or clipboard export.
+ */
+export declare function renderMermaid(snapshot: PlatformShellSnapshot): string;
+//# sourceMappingURL=contracts.d.ts.map

package/dist/contracts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contracts.d.ts","sourceRoot":"","sources":["../src/contracts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC9E,MAAM,MAAM,0BAA0B,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,uBAAuB,EAAE,CAAC;IAC7C,UAAU,EAAE,0BAA0B,EAAE,CAAC;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAmID;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAkBjE;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,qBAAqB,EAAE,MAAM,EAAE,WAAW,GAAG,qBAAqB,CAwCxG;AAyBD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,qBAAqB,GAAG,MAAM,CAsErE"}

package/dist/contracts.js

@@ -0,0 +1,230 @@
+/**
+ * Serializable Studio payload envelope built from inspect snapshot/timing exports.
+ */
+
+/**
+ * Filter state applied to the loaded platform snapshot inside Studio.
+ */
+
+/**
+ * Parsed Studio payload together with the original JSON source.
+ */
+
+function isRecord(value) {
+  return typeof value === 'object' && value !== null;
+}
+function isStringArray(value) {
+  return Array.isArray(value) && value.every(entry => typeof entry === 'string');
+}
+function isReadinessStatus(value) {
+  return value === 'ready' || value === 'not-ready' || value === 'degraded';
+}
+function isHealthStatus(value) {
+  return value === 'healthy' || value === 'unhealthy' || value === 'degraded';
+}
+function isDiagnosticSeverity(value) {
+  return value === 'error' || value === 'warning' || value === 'info';
+}
+function validateSnapshot(value) {
+  if (!isRecord(value)) {
+    return null;
+  }
+  if (typeof value.generatedAt !== 'string' || !isRecord(value.readiness) || !isRecord(value.health) || !Array.isArray(value.components) || !Array.isArray(value.diagnostics)) {
+    throw new Error('Invalid platform snapshot payload.');
+  }
+  if (!isReadinessStatus(value.readiness.status) || typeof value.readiness.critical !== 'boolean') {
+    throw new Error('Invalid aggregate readiness in platform snapshot payload.');
+  }
+  if (!isHealthStatus(value.health.status)) {
+    throw new Error('Invalid aggregate health in platform snapshot payload.');
+  }
+  for (const component of value.components) {
+    if (!isRecord(component)) {
+      throw new Error('Invalid component entry in platform snapshot payload.');
+    }
+    if (typeof component.id !== 'string' || typeof component.kind !== 'string' || typeof component.state !== 'string' || !isRecord(component.readiness) || !isRecord(component.health) || !isStringArray(component.dependencies) || !isRecord(component.telemetry) || !isRecord(component.ownership) || !isRecord(component.details)) {
+      throw new Error('Invalid component shape in platform snapshot payload.');
+    }
+    if (!isReadinessStatus(component.readiness.status) || typeof component.readiness.critical !== 'boolean') {
+      throw new Error('Invalid component readiness in platform snapshot payload.');
+    }
+    if (!isHealthStatus(component.health.status)) {
+      throw new Error('Invalid component health in platform snapshot payload.');
+    }
+    if (typeof component.telemetry.namespace !== 'string' || !isRecord(component.telemetry.tags) || typeof component.ownership.ownsResources !== 'boolean' || typeof component.ownership.externallyManaged !== 'boolean') {
+      throw new Error('Invalid component telemetry/ownership in platform snapshot payload.');
+    }
+  }
+  for (const issue of value.diagnostics) {
+    if (!isRecord(issue)) {
+      throw new Error('Invalid diagnostics issue entry in platform snapshot payload.');
+    }
+    if (typeof issue.code !== 'string' || !isDiagnosticSeverity(issue.severity) || typeof issue.componentId !== 'string' || typeof issue.message !== 'string') {
+      throw new Error('Invalid diagnostics issue shape in platform snapshot payload.');
+    }
+    if (issue.cause !== undefined && typeof issue.cause !== 'string' || issue.fixHint !== undefined && typeof issue.fixHint !== 'string' || issue.docsUrl !== undefined && typeof issue.docsUrl !== 'string' || issue.dependsOn !== undefined && !isStringArray(issue.dependsOn)) {
+      throw new Error('Invalid optional diagnostics issue fields in platform snapshot payload.');
+    }
+  }
+  return value;
+}
+function validateTiming(value) {
+  if (!isRecord(value)) {
+    return null;
+  }
+  if (value.version !== 1) {
+    throw new Error('Unsupported bootstrap timing version. Expected version: 1.');
+  }
+  if (typeof value.totalMs !== 'number' || !Array.isArray(value.phases)) {
+    throw new Error('Invalid bootstrap timing payload.');
+  }
+  for (const phase of value.phases) {
+    if (!isRecord(phase) || typeof phase.name !== 'string' || typeof phase.durationMs !== 'number') {
+      throw new Error('Invalid phase entry in bootstrap timing payload.');
+    }
+  }
+  return value;
+}
+
+/**
+ * Parses a Studio JSON file into the documented snapshot/timing envelope.
+ *
+ * @param rawJson - Raw JSON emitted by `fluo inspect` or a Studio-compatible producer.
+ * @returns The validated Studio payload plus the original JSON string.
+ * @throws Error when the JSON does not match the supported Studio file contracts.
+ */
+export function parseStudioPayload(rawJson) {
+  const parsed = JSON.parse(rawJson);
+  const envelope = isRecord(parsed) ? parsed : undefined;
+  const snapshot = validateSnapshot(envelope?.snapshot ?? parsed);
+  const timing = validateTiming(envelope?.timing ?? (!snapshot ? parsed : undefined));
+  if (!snapshot && !timing) {
+    throw new Error('Unsupported file format. Expected platform snapshot JSON or timing JSON.');
+  }
+  return {
+    payload: {
+      ...(snapshot ? {
+        snapshot
+      } : {}),
+      ...(timing ? {
+        timing
+      } : {})
+    },
+    rawJson
+  };
+}
+
+/**
+ * Applies Studio filter state to a platform snapshot without mutating the input.
+ *
+ * @param snapshot - The loaded platform snapshot.
+ * @param filter - Active readiness, severity, and query filters.
+ * @returns A filtered snapshot containing only the matching components and diagnostics.
+ */
+export function applyFilters(snapshot, filter) {
+  const query = filter.query.trim().toLowerCase();
+  const components = snapshot.components.filter(component => {
+    if (filter.readinessStatuses.length > 0 && !filter.readinessStatuses.includes(component.readiness.status)) {
+      return false;
+    }
+    if (!query) {
+      return true;
+    }
+    return component.id.toLowerCase().includes(query) || component.kind.toLowerCase().includes(query) || component.dependencies.some(dependency => dependency.toLowerCase().includes(query));
+  });
+  const diagnostics = snapshot.diagnostics.filter(issue => {
+    if (filter.severities.length > 0 && !filter.severities.includes(issue.severity)) {
+      return false;
+    }
+    if (!query) {
+      return true;
+    }
+    return issue.code.toLowerCase().includes(query) || issue.componentId.toLowerCase().includes(query) || issue.message.toLowerCase().includes(query) || (issue.cause?.toLowerCase().includes(query) ?? false) || (issue.fixHint?.toLowerCase().includes(query) ?? false) || (issue.docsUrl?.toLowerCase().includes(query) ?? false) || (issue.dependsOn?.some(dependency => dependency.toLowerCase().includes(query)) ?? false);
+  });
+  return {
+    ...snapshot,
+    components,
+    diagnostics
+  };
+}
+function escapeMermaidText(value) {
+  return value.replaceAll('"', '\\"');
+}
+function sanitizeMermaidNodeIdSegment(value) {
+  return value.replaceAll(/[^a-zA-Z0-9_]/g, '_');
+}
+function hashMermaidNodeId(value) {
+  let hash = 2_166_136_261;
+  for (const character of value) {
+    hash ^= character.codePointAt(0) ?? 0;
+    hash = Math.imul(hash, 16_777_619) >>> 0;
+  }
+  return hash.toString(16).padStart(8, '0');
+}
+function createExternalMermaidNodeId(value) {
+  return `EXT_${sanitizeMermaidNodeIdSegment(value)}_${hashMermaidNodeId(value)}`;
+}
+
+/**
+ * Renders the loaded platform snapshot as a Mermaid dependency graph.
+ *
+ * @param snapshot - The platform snapshot to render.
+ * @returns Mermaid graph text suitable for docs or clipboard export.
+ */
+export function renderMermaid(snapshot) {
+  const lines = ['graph TD'];
+  const nodeByComponent = new Map();
+  const externalNodeByDependency = new Map();
+  if (snapshot.components.length === 0) {
+    lines.push('  EMPTY["No registered platform components"]');
+    return lines.join('\n');
+  }
+  for (const [index, component] of snapshot.components.entries()) {
+    const nodeId = `C${String(index + 1)}`;
+    nodeByComponent.set(component.id, nodeId);
+    lines.push(`  ${nodeId}["${escapeMermaidText(component.id)}\\nkind: ${escapeMermaidText(component.kind)}\\nreadiness: ${component.readiness.status}\\nhealth: ${component.health.status}"]`);
+  }
+  for (const component of snapshot.components) {
+    const from = nodeByComponent.get(component.id);
+    if (!from) {
+      continue;
+    }
+    for (const dependency of component.dependencies) {
+      const to = nodeByComponent.get(dependency);
+      if (to) {
+        lines.push(`  ${from} --> ${to}`);
+        continue;
+      }
+      let externalNode = externalNodeByDependency.get(dependency);
+      if (!externalNode) {
+        externalNode = createExternalMermaidNodeId(dependency);
+        externalNodeByDependency.set(dependency, externalNode);
+        lines.push(`  ${externalNode}["${escapeMermaidText(dependency)}"]`);
+      }
+      lines.push(`  ${from} --> ${externalNode}`);
+    }
+  }
+  const degradedNodes = [];
+  const notReadyNodes = [];
+  for (const component of snapshot.components) {
+    const nodeId = nodeByComponent.get(component.id);
+    if (!nodeId) {
+      continue;
+    }
+    if (component.readiness.status === 'degraded') {
+      degradedNodes.push(nodeId);
+    }
+    if (component.readiness.status === 'not-ready') {
+      notReadyNodes.push(nodeId);
+    }
+  }
+  if (degradedNodes.length > 0) {
+    lines.push(`  class ${degradedNodes.join(',')} degraded`);
+    lines.push('  classDef degraded stroke:#f59e0b,stroke-width:2px');
+  }
+  if (notReadyNodes.length > 0) {
+    lines.push(`  class ${notReadyNodes.join(',')} notReady`);
+    lines.push('  classDef notReady stroke:#ef4444,stroke-width:2px');
+  }
+  return lines.join('\n');
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { applyFilters, parseStudioPayload, renderMermaid, type FilterState, type ParsedPayload, type PlatformDiagnosticSeverity, type PlatformReadinessStatus, type StudioPayload, } from './contracts.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,aAAa,GACnB,MAAM,gBAAgB,CAAC"}

package/dist/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fluo Studio</title>
+    <script type="module" crossorigin src="/assets/index-CUoyTA_q.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BTqPuJus.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/dist/index.js

@@ -0,0 +1 @@
+export { applyFilters, parseStudioPayload, renderMermaid } from './contracts.js';

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@fluojs/studio",
+  "description": "File-first diagnostics viewer for Fluo runtime platform snapshot and timing JSON exports.",
+  "keywords": [
+    "fluo",
+    "studio",
+    "diagnostics",
+    "viewer",
+    "module-graph",
+    "devtools"
+  ],
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fluojs/fluo.git",
+    "directory": "packages/studio"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./contracts": {
+      "types": "./dist/contracts.d.ts",
+      "import": "./dist/contracts.js"
+    },
+    "./viewer": "./dist/index.html"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@fluojs/runtime": "^1.0.0-beta.1"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4",
+    "@fluojs-internal/tooling-vite": "^0.0.0"
+  },
+  "scripts": {
+    "prebuild": "node ../../tooling/scripts/clean-dist.mjs",
+    "build": "pnpm exec vite build && pnpm exec babel src/contracts.ts src/index.ts --extensions .ts --out-dir dist --config-file ../../tooling/babel/babel.config.cjs && pnpm exec tsc -p tsconfig.build.json",
+    "dev": "pnpm exec vite",
+    "preview": "pnpm exec vite preview",
+    "typecheck": "pnpm exec tsc -p tsconfig.json --noEmit",
+    "test": "pnpm exec vitest run -c vitest.config.ts",
+    "test:watch": "pnpm exec vitest -c vitest.config.ts"
+  }
+}