@chocodrop/mcp 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +19 -0
  3. package/bin/chocodrop-mcp.js +13 -0
  4. package/package.json +42 -0
  5. package/runtime/.chocodrop-mcp-runtime +1 -0
  6. package/runtime/asset-bridge.js +460 -0
  7. package/runtime/mcp-server.js +107 -0
  8. package/runtime/site/examples/basic/README.md +38 -0
  9. package/runtime/site/examples/basic/index.html +1730 -0
  10. package/runtime/site/examples/bookmarklet-v2.html +141 -0
  11. package/runtime/site/examples/bookmarklet.html +126 -0
  12. package/runtime/site/examples/lofi-room/index.html +2570 -0
  13. package/runtime/site/examples/lofi-room/sandbox-lite.html +124 -0
  14. package/runtime/site/examples/music-garden/index.html +2150 -0
  15. package/runtime/site/examples/pixel-ocean/index.html +1780 -0
  16. package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx +338 -0
  17. package/runtime/site/examples/react-three-fiber/App.jsx +97 -0
  18. package/runtime/site/examples/react-three-fiber/README.md +294 -0
  19. package/runtime/site/examples/react-three-fiber/package.json +25 -0
  20. package/runtime/site/examples/sdk-test/README.md +70 -0
  21. package/runtime/site/examples/space/index.html +1975 -0
  22. package/runtime/site/examples/toy-city/index.html +2288 -0
  23. package/runtime/site/examples/wabi-sabi/index.html +2515 -0
  24. package/runtime/site/getting-started.html +84 -0
  25. package/runtime/site/index.html +1370 -0
  26. package/runtime/site/public/CommandUI.js +6341 -0
  27. package/runtime/site/public/LiveCommandClient.js +432 -0
  28. package/runtime/site/public/SceneManager.js +5493 -0
  29. package/runtime/site/public/bookmarklet.js +206 -0
  30. package/runtime/site/public/bootstrap.js +50 -0
  31. package/runtime/site/public/chocodrop-demo.umd.js +24020 -0
  32. package/runtime/site/public/chocodrop-demo.umd.min.js +24020 -0
  33. package/runtime/site/public/chocodrop.esm.js +2 -0
  34. package/runtime/site/public/html-sandbox/frame.js +865 -0
  35. package/runtime/site/public/icons/icon-192.png +0 -0
  36. package/runtime/site/public/icons/icon-512.png +0 -0
  37. package/runtime/site/public/icons/icon-maskable-512.png +0 -0
  38. package/runtime/site/public/immersive-launcher.js +175 -0
  39. package/runtime/site/public/immersive.html +165 -0
  40. package/runtime/site/public/index.html +1011 -0
  41. package/runtime/site/public/index.js +9 -0
  42. package/runtime/site/public/load-chocodrop.js +25 -0
  43. package/runtime/site/public/load-three.js +26 -0
  44. package/runtime/site/public/manifest.webmanifest +59 -0
  45. package/runtime/site/public/pwa-bootstrap.js +128 -0
  46. package/runtime/site/public/sample-card.svg +15 -0
  47. package/runtime/site/public/service-worker.js +117 -0
  48. package/runtime/site/public/translation-dictionary.js +257 -0
  49. package/runtime/site/public/xr/xr-ui.css +338 -0
  50. package/runtime/site/public/xr-viewer.html +263 -0
  51. package/runtime/site/src/client/local-bridge.js +83 -0
package/runtime/site/examples/bookmarklet-v2.html ADDED
@@ -0,0 +1,141 @@
1
+ <!doctype html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="description" content="ChocoDropをThree.jsページで使うためのブックマークレット登録ページです。">
7
+ <title>ブックマークレット | ChocoDrop</title>
8
+ <style>
9
+ :root {
10
+ color-scheme: dark;
11
+ --bg: #1c1924;
12
+ --surface: #25212e;
13
+ --soft: #2d2638;
14
+ --ink: #f7eff5;
15
+ --muted: #beb2c8;
16
+ --accent: #d2b0f2;
17
+ --button: #cda8ef;
18
+ --button-ink: #281935;
19
+ --border: #ffffff20;
20
+ font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, sans-serif;
21
+ }
22
+ * { box-sizing: border-box; }
23
+ body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.85; }
24
+ a { color: inherit; text-underline-offset: 4px; }
25
+ .wrap { width: min(880px, calc(100% - 40px)); margin: 0 auto; }
26
+ header { display: flex; align-items: center; justify-content: space-between; min-height: 90px; }
27
+ .brand { text-decoration: none; font-size: 21px; font-weight: 700; }
28
+ .brand span { color: var(--accent); font-size: 29px; vertical-align: -2px; }
29
+ header>a:last-child { color: var(--muted); font-size: 12px; }
30
+ main { padding: 48px 0 80px; }
31
+ .eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
32
+ h1 { max-width: 700px; margin: 12px 0 18px; font-size: clamp(32px, 6vw, 52px); line-height: 1.45; }
33
+ .lead { max-width: 680px; color: var(--muted); }
34
+ .install { margin: 38px 0; padding: 30px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(135deg, var(--surface), var(--soft)); }
35
+ .install h2 { margin-top: 0; }
36
+ .bookmarklet-link, button {
37
+ display: inline-flex; align-items: center; justify-content: center; gap: 10px;
38
+ border: 0; border-radius: 999px; padding: 13px 22px;
39
+ background: var(--button); color: var(--button-ink); font: inherit; font-weight: 700;
40
+ text-decoration: none; cursor: grab;
41
+ }
42
+ button { cursor: pointer; }
43
+ .secondary { margin-left: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink); }
44
+ .status { min-height: 30px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
45
+ .status[data-state=ok] { color: #aee4bd; }
46
+ .status[data-state=error] { color: #efb2bd; }
47
+ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 42px 0; }
48
+ .step, .note { padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
49
+ .step b { display: block; color: var(--accent); font-size: 24px; font-family: Georgia, serif; }
50
+ .step h2 { margin: 5px 0; font-size: 17px; }
51
+ .step p, .note p, li { color: var(--muted); font-size: 13px; }
52
+ pre { overflow-x: auto; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #17141e; color: var(--ink); }
53
+ .note h2 { margin-top: 0; font-size: 20px; }
54
+ .note li { margin: 7px 0; }
55
+ footer { padding: 28px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
56
+ @media (max-width: 680px) {
57
+ main { padding-top: 25px; }
58
+ .steps { grid-template-columns: 1fr; }
59
+ .install { padding: 22px; }
60
+ .bookmarklet-link, button { width: 100%; }
61
+ .secondary { margin: 10px 0 0; }
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <header class="wrap">
67
+ <a class="brand" href="../"><span aria-hidden="true">✿</span> ChocoDrop</a>
68
+ <a href="../getting-started.html">はじめ方へ →</a>
69
+ </header>
70
+ <main class="wrap">
71
+ <span class="eyebrow">BOOKMARKLET</span>
72
+ <h1>いつものThree.jsページに、<br>ChocoDropをひとつ。</h1>
73
+ <p class="lead">GitHubをcloneせず、ブックマークからChocoDrop UIを読み込みます。利用中はローカルdaemonの起動が必要です。</p>
74
+
75
+ <section class="install" aria-labelledby="install-title">
76
+ <h2 id="install-title">ブックマークバーへ登録</h2>
77
+ <p>下のボタンをブックマークバーへドラッグしてください。スマートフォンでは、リンクをコピーしてブックマークのURLへ貼り付けます。</p>
78
+ <a id="bookmarklet-link" class="bookmarklet-link" href="#">🍫 ChocoDropを登録</a>
79
+ <button id="copy-bookmarklet" class="secondary" type="button">リンクをコピー</button>
80
+ <p id="copy-status" class="status" role="status"></p>
81
+ </section>
82
+
83
+ <div class="steps">
84
+ <section class="step"><b>01</b><h2>daemonを起動</h2><p>ターミナルで次のコマンドを実行します。</p></section>
85
+ <section class="step"><b>02</b><h2>Three.jsページを開く</h2><p>自分のページなど、対応するシーンを開きます。</p></section>
86
+ <section class="step"><b>03</b><h2>ブックマークを押す</h2><p>シーンが見つかるとChocoDrop UIが接続されます。</p></section>
87
+ </div>
88
+
89
+ <h2>daemonの起動</h2>
90
+ <pre><code>npx --yes @chocodrop/daemon@alpha</code></pre>
91
+ <button id="check-daemon" type="button">接続を確認する</button>
92
+ <p id="daemon-status" class="status" role="status">未確認</p>
93
+
94
+ <section class="note">
95
+ <h2>利用できるページ</h2>
96
+ <ul>
97
+ <li>Three.jsの<code>scene</code>・<code>camera</code>・<code>renderer</code>がページから参照できること。</li>
98
+ <li>Content Security Policyがローカルdaemonからのスクリプト読込を許可すること。</li>
99
+ <li>モジュール内部に閉じたシーン、第三者iframe、Three.js以外のエンジンでは素材を配置できない場合があります。</li>
100
+ </ul>
101
+ <p>対応条件とトラブルシューティングは<a href="../docs/BOOKMARKLET.md">ブックマークレットガイド</a>で確認できます。</p>
102
+ </section>
103
+ </main>
104
+ <footer class="wrap">ローカルdaemonは127.0.0.1だけで待ち受けます。終了時はターミナルでCtrl+Cを押してください。</footer>
105
+ <script type="module">
106
+ import { createBookmarklet } from '../public/bookmarklet.js';
107
+
108
+ const runtimeUrl = new URL('../runtime/ui.global.js', location.href).href;
109
+ const bookmarklet = createBookmarklet(undefined, runtimeUrl);
110
+ const link = document.querySelector('#bookmarklet-link');
111
+ const copyStatus = document.querySelector('#copy-status');
112
+ const daemonStatus = document.querySelector('#daemon-status');
113
+ link.href = bookmarklet;
114
+
115
+ document.querySelector('#copy-bookmarklet').addEventListener('click', async () => {
116
+ try {
117
+ await navigator.clipboard.writeText(bookmarklet);
118
+ copyStatus.textContent = 'コピーしました。ブックマークのURLへ貼り付けてください。';
119
+ copyStatus.dataset.state = 'ok';
120
+ } catch {
121
+ copyStatus.textContent = 'コピーできませんでした。ボタンをブックマークバーへドラッグしてください。';
122
+ copyStatus.dataset.state = 'error';
123
+ }
124
+ });
125
+
126
+ document.querySelector('#check-daemon').addEventListener('click', async () => {
127
+ daemonStatus.textContent = '確認しています…';
128
+ daemonStatus.dataset.state = '';
129
+ try {
130
+ const response = await fetch('http://127.0.0.1:43110/v1/health', { cache: 'no-store' });
131
+ if (!response.ok) throw new Error(String(response.status));
132
+ daemonStatus.textContent = '接続できました。対象ページでブックマークを押せます。';
133
+ daemonStatus.dataset.state = 'ok';
134
+ } catch {
135
+ daemonStatus.textContent = '接続できません。上のコマンドでdaemonを起動してください。';
136
+ daemonStatus.dataset.state = 'error';
137
+ }
138
+ });
139
+ </script>
140
+ </body>
141
+ </html>
package/runtime/site/examples/bookmarklet.html ADDED
@@ -0,0 +1,126 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChocoDrop Bookmarklet</title>
7
+ <style>
8
+ body {
9
+ font-family: system-ui, -apple-system, sans-serif;
10
+ max-width: 800px;
11
+ margin: 40px auto;
12
+ padding: 20px;
13
+ background: #0a0a0a;
14
+ color: #fff;
15
+ }
16
+ h1 {
17
+ color: #ff6ad5;
18
+ }
19
+ .bookmarklet {
20
+ background: rgba(255, 255, 255, 0.1);
21
+ border: 2px dashed #ff6ad5;
22
+ padding: 20px;
23
+ border-radius: 12px;
24
+ margin: 20px 0;
25
+ }
26
+ .bookmarklet-link {
27
+ display: inline-block;
28
+ background: #ff6ad5;
29
+ color: #000;
30
+ padding: 12px 24px;
31
+ border-radius: 8px;
32
+ text-decoration: none;
33
+ font-weight: 600;
34
+ margin: 10px 0;
35
+ }
36
+ .bookmarklet-link:hover {
37
+ background: #ff4dc4;
38
+ }
39
+ code {
40
+ background: rgba(255, 255, 255, 0.1);
41
+ padding: 2px 6px;
42
+ border-radius: 4px;
43
+ font-family: monospace;
44
+ }
45
+ pre {
46
+ background: rgba(255, 255, 255, 0.05);
47
+ padding: 15px;
48
+ border-radius: 8px;
49
+ overflow-x: auto;
50
+ }
51
+ .step {
52
+ background: rgba(255, 255, 255, 0.05);
53
+ padding: 15px;
54
+ margin: 10px 0;
55
+ border-left: 4px solid #ff6ad5;
56
+ border-radius: 4px;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body>
61
+ <h1>🍫 ChocoDrop Bookmarklet</h1>
62
+
63
+ <p>ChocoDrop をどんな Three.js ページにも1クリックで追加できます。</p>
64
+
65
+ <div class="bookmarklet">
66
+ <h2>📌 使い方</h2>
67
+
68
+ <div class="step">
69
+ <strong>Step 1:</strong> daemon を起動
70
+ <pre>npx --yes @chocodrop/daemon@alpha</pre>
71
+ </div>
72
+
73
+ <div class="step">
74
+ <strong>Step 2:</strong> このリンクをブックマークバーにドラッグ＆ドロップ
75
+ <div style="margin-top: 10px;">
76
+ <a href="javascript:(()=>{const b='http://127.0.0.1:43110';if(document.getElementById('__chocodrop_sdk'))return;const s=document.createElement('script');s.id='__chocodrop_sdk';s.src=b+'/sdk.js';s.onload=()=>window.chocodrop?.ready?.().then(()=>window.chocodrop.attach(window.scene||null,{camera:window.camera,renderer:window.renderer})).catch(e=>console.warn('ChocoDrop:',e));document.head.appendChild(s);})();" class="bookmarklet-link">
77
+ 🍫 ChocoDrop
78
+ </a>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="step">
83
+ <strong>Step 3:</strong> Three.js ページでブックマークをクリック
84
+ </div>
85
+ </div>
86
+
87
+ <h2>📝 コード</h2>
88
+ <p>手動で使う場合は、このコードをコンソールに貼り付けてください：</p>
89
+ <pre><code>(() => {
90
+ const b = 'http://127.0.0.1:43110';
91
+ if (document.getElementById('__chocodrop_sdk')) return;
92
+
93
+ const s = document.createElement('script');
94
+ s.id = '__chocodrop_sdk';
95
+ s.src = b + '/sdk.js';
96
+
97
+ s.onload = () => {
98
+ window.chocodrop?.ready?.()
99
+ .then(() => window.chocodrop.attach(
100
+ window.scene || null,
101
+ {
102
+ camera: window.camera,
103
+ renderer: window.renderer
104
+ }
105
+ ))
106
+ .catch(e => console.warn('ChocoDrop:', e));
107
+ };
108
+
109
+ document.head.appendChild(s);
110
+ })();</code></pre>
111
+
112
+ <h2>🔧 注意事項</h2>
113
+ <ul>
114
+ <li>daemon が起動していることを確認してください</li>
115
+ <li>CORS のため、ローカルサーバーで配信されているページで使用してください</li>
116
+ <li><code>file://</code> プロトコルでは動作しません</li>
117
+ </ul>
118
+
119
+ <h2>💡 対応ページの例</h2>
120
+ <ul>
121
+ <li><a href="../index.html" target="_blank">ChocoDrop デモページ</a></li>
122
+ <li><a href="./basic/index.html" target="_blank">Basic Example</a></li>
123
+ <li><a href="./test-new-sdk.html" target="_blank">New SDK Test</a></li>
124
+ </ul>
125
+ </body>
126
+ </html>