npm - @chocodrop/mcp - Versions diffs - 0.1.0-alpha.0 - Mend

@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

package/LICENSE +21 -0
package/README.md +19 -0
package/bin/chocodrop-mcp.js +13 -0
package/package.json +42 -0
package/runtime/.chocodrop-mcp-runtime +1 -0
package/runtime/asset-bridge.js +460 -0
package/runtime/mcp-server.js +107 -0
package/runtime/site/examples/basic/README.md +38 -0
package/runtime/site/examples/basic/index.html +1730 -0
package/runtime/site/examples/bookmarklet-v2.html +141 -0
package/runtime/site/examples/bookmarklet.html +126 -0
package/runtime/site/examples/lofi-room/index.html +2570 -0
package/runtime/site/examples/lofi-room/sandbox-lite.html +124 -0
package/runtime/site/examples/music-garden/index.html +2150 -0
package/runtime/site/examples/pixel-ocean/index.html +1780 -0
package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx +338 -0
package/runtime/site/examples/react-three-fiber/App.jsx +97 -0
package/runtime/site/examples/react-three-fiber/README.md +294 -0
package/runtime/site/examples/react-three-fiber/package.json +25 -0
package/runtime/site/examples/sdk-test/README.md +70 -0
package/runtime/site/examples/space/index.html +1975 -0
package/runtime/site/examples/toy-city/index.html +2288 -0
package/runtime/site/examples/wabi-sabi/index.html +2515 -0
package/runtime/site/getting-started.html +84 -0
package/runtime/site/index.html +1370 -0
package/runtime/site/public/CommandUI.js +6341 -0
package/runtime/site/public/LiveCommandClient.js +432 -0
package/runtime/site/public/SceneManager.js +5493 -0
package/runtime/site/public/bookmarklet.js +206 -0
package/runtime/site/public/bootstrap.js +50 -0
package/runtime/site/public/chocodrop-demo.umd.js +24020 -0
package/runtime/site/public/chocodrop-demo.umd.min.js +24020 -0
package/runtime/site/public/chocodrop.esm.js +2 -0
package/runtime/site/public/html-sandbox/frame.js +865 -0
package/runtime/site/public/icons/icon-192.png +0 -0
package/runtime/site/public/icons/icon-512.png +0 -0
package/runtime/site/public/icons/icon-maskable-512.png +0 -0
package/runtime/site/public/immersive-launcher.js +175 -0
package/runtime/site/public/immersive.html +165 -0
package/runtime/site/public/index.html +1011 -0
package/runtime/site/public/index.js +9 -0
package/runtime/site/public/load-chocodrop.js +25 -0
package/runtime/site/public/load-three.js +26 -0
package/runtime/site/public/manifest.webmanifest +59 -0
package/runtime/site/public/pwa-bootstrap.js +128 -0
package/runtime/site/public/sample-card.svg +15 -0
package/runtime/site/public/service-worker.js +117 -0
package/runtime/site/public/translation-dictionary.js +257 -0
package/runtime/site/public/xr/xr-ui.css +338 -0
package/runtime/site/public/xr-viewer.html +263 -0
package/runtime/site/src/client/local-bridge.js +83 -0

package/runtime/site/examples/basic/index.html ADDED Viewed

@@ -0,0 +1,1730 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChocoDrop - Basic Three.js Example</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='8' width='48' height='48' rx='12' fill='%2363410f'/%3E%3Crect x='18' y='18' width='28' height='28' rx='6' fill='%23a16207'/%3E%3C/svg%3E">
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+        }
+    }
+    </script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
+            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 40%, #16213e 100%);
+        }
+        #info {
+            position: fixed;
+            top: 18px;
+            left: 18px;
+            color: #1b2337;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(236, 233, 255, 0.82));
+            backdrop-filter: blur(18px);
+            -webkit-backdrop-filter: blur(18px);
+            border: 1px solid rgba(180, 198, 255, 0.45);
+            padding: 18px 22px;
+            border-radius: 18px;
+            font-size: 13px;
+            font-weight: 500;
+            z-index: 2000;
+            max-width: 320px;
+            line-height: 1.6;
+            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.25);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        #info.hidden {
+            opacity: 0;
+            transform: translateY(-10px);
+            pointer-events: none;
+        }
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(99, 102, 241, 0.12);
+            border: 1px solid rgba(99, 102, 241, 0.2);
+            font-size: 14px;
+            color: #4338ca;
+            cursor: pointer;
+            width: 26px;
+            height: 26px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(6px);
+        }
+        .close-btn:hover {
+            background: rgba(99, 102, 241, 0.22);
+            border-color: rgba(129, 140, 248, 0.45);
+            transform: scale(1.05);
+        }
+        #info .info-header strong {
+            display: block;
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: 0.03em;
+            margin-bottom: 6px;
+        }
+        #info .info-header .subtitle {
+            margin: 0 0 16px;
+            font-size: 12px;
+            font-weight: 500;
+            color: rgba(30, 64, 175, 0.75);
+            line-height: 1.7;
+        }
+        #info .info-list {
+            list-style: none;
+            padding: 0;
+            margin: 0 0 16px;
+            display: grid;
+            gap: 10px;
+        }
+        #info .info-list li {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+        }
+        #info .info-icon {
+            font-size: 18px;
+            line-height: 1;
+            filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.3));
+        }
+        #info code {
+            background: rgba(99, 102, 241, 0.15);
+            color: #4338ca;
+            padding: 2px 6px;
+            border-radius: 6px;
+            font-family: 'SFMono-Regular', ui-monospace, SFMono, menlo, monospace;
+            font-size: 11px;
+        }
+        #info .info-cta {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        #info .cta-primary,
+        #info .cta-secondary {
+            border-radius: 999px;
+            padding: 10px 18px;
+            font-size: 12px;
+            font-weight: 600;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        #info .cta-primary {
+            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
+            color: #fff;
+            box-shadow: 0 12px 24px rgba(168, 85, 247, 0.28);
+        }
+        #info .cta-primary:hover {
+            box-shadow: 0 18px 32px rgba(236, 72, 153, 0.32);
+            transform: translateY(-1px);
+        }
+        #info .cta-secondary {
+            background: rgba(99, 102, 241, 0.1);
+            color: #3730a3;
+            border: 1px solid rgba(99, 102, 241, 0.2);
+        }
+        #info .cta-secondary:hover {
+            background: rgba(99, 102, 241, 0.18);
+        }
+        .navigation {
+            position: fixed;
+            top: 16px;
+            right: 16px;
+            z-index: 100;
+            display: flex;
+            gap: 8px;
+        }
+        .nav-link {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: #2d3748;
+            text-decoration: none;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .nav-link:hover {
+            background: rgba(255, 255, 255, 1);
+            transform: translateY(-1px);
+        }
+        #info strong {
+            font-size: 14px;
+            font-weight: 600;
+            color: #1a202c;
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            display: block;
+            margin-bottom: 10px;
+            text-align: center;
+            letter-spacing: 0.5px;
+        }
+        .controls {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid rgba(0, 0, 0, 0.15);
+            font-size: 11px;
+        }
+        .control-item {
+            margin: 4px 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .key {
+            background: rgba(0, 0, 0, 0.1);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-weight: 500;
+            min-width: fit-content;
+        }
+        #info code {
+            background: rgba(139, 92, 246, 0.15);
+            color: #4a5568;
+            padding: 1px 4px;
+            border-radius: 3px;
+            font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+            font-size: 11px;
+        }
+        #info .emoji {
+            font-size: 14px;
+            margin: 0 1px;
+        }
+        /* チョコアイコンのキラキラアニメーション */
+        .choco-icon {
+            display: inline-block;
+            animation: choco-sparkle 2s ease-in-out infinite;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        .choco-icon:hover {
+            transform: scale(1.2);
+            animation: choco-sparkle-fast 0.8s ease-in-out infinite;
+        }
+        /* タイトル用の控えめなチョコアニメーション */
+        .choco-title {
+            display: inline-block;
+            animation: choco-title-glow 3s ease-in-out infinite;
+            -webkit-text-fill-color: initial !important;
+            color: currentColor !important;
+        }
+        @keyframes choco-title-glow {
+            0%, 100% {
+                opacity: 1;
+                filter: brightness(1);
+            }
+            50% {
+                opacity: 1;
+                filter: brightness(1.1);
+            }
+        }
+        @keyframes choco-sparkle {
+            0%, 100% {
+                filter: brightness(1) drop-shadow(0 0 2px rgba(139, 92, 246, 0.3));
+                transform: scale(1) rotate(0deg);
+            }
+            25% {
+                filter: brightness(1.4) drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
+                transform: scale(1.08) rotate(2deg);
+            }
+            50% {
+                filter: brightness(1.6) drop-shadow(0 0 16px rgba(139, 92, 246, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
+                transform: scale(1.12) rotate(0deg);
+            }
+            75% {
+                filter: brightness(1.4) drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
+                transform: scale(1.08) rotate(-2deg);
+            }
+        }
+        @keyframes choco-sparkle-fast {
+            0%, 100% {
+                filter: brightness(1.3) drop-shadow(0 0 8px rgba(139, 92, 246, 0.8)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
+                transform: rotate(0deg);
+            }
+            33% {
+                filter: brightness(1.8) drop-shadow(0 0 20px rgba(139, 92, 246, 1)) drop-shadow(0 0 12px rgba(255, 255, 255, 1));
+                transform: rotate(5deg);
+            }
+            66% {
+                filter: brightness(1.8) drop-shadow(0 0 20px rgba(139, 92, 246, 1)) drop-shadow(0 0 12px rgba(255, 255, 255, 1));
+                transform: rotate(-5deg);
+            }
+        }
+        #info .highlight {
+            color: #6b46c1;
+            font-weight: 500;
+        }
+        #info .subtitle {
+            color: #4a5568;
+            font-size: 11px;
+            margin-top: 6px;
+        }
+        canvas {
+            display: block;
+        }
+        .demo-links {
+            position: fixed;
+            bottom: 20px;
+            right: 100px;
+            display: flex;
+            gap: 12px;
+            z-index: 100;
+        }
+        .demo-link {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(236, 72, 153, 0.9) 100%);
+            color: white;
+            text-decoration: none;
+            padding: 10px 14px;
+            border-radius: 8px;
+            font-size: 11px;
+            font-weight: 600;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .demo-link:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+            border-color: rgba(255, 255, 255, 0.6);
+        }
+        /* 統合メニュー */
+        .unified-menu {
+            position: fixed;
+            top: 16px;
+            right: 20px;
+            z-index: 1000;
+        }
+        .menu-toggle {
+            background: rgba(99, 102, 241, 0.15);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: #2d3748;
+            padding: 10px 14px;
+            border-radius: 8px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2), 0 2px 6px rgba(0, 0, 0, 0.05);
+            width: 44px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0.8;
+        }
+        .menu-toggle:hover {
+            background: rgba(99, 102, 241, 0.2);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: scale(1.1) translateY(-2px);
+            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3), 0 3px 8px rgba(0, 0, 0, 0.1);
+            opacity: 1;
+        }
+        .menu-dropdown {
+            position: absolute;
+            top: 56px;
+            right: 0;
+            min-width: 220px;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            border: 1px solid rgba(99, 102, 241, 0.2);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+        }
+        .menu-dropdown.active {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        .menu-item {
+            display: block;
+            padding: 12px 16px;
+            color: #2d3748;
+            text-decoration: none;
+            font-size: 13px;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            cursor: pointer;
+            background: none;
+            border-left: none;
+            border-right: none;
+            border-top: none;
+            width: 100%;
+            text-align: left;
+        }
+        .menu-item:last-child {
+            border-bottom: none;
+        }
+        .menu-item:hover {
+            background: rgba(99, 102, 241, 0.08);
+            padding-left: 20px;
+            border-left: 2px solid rgba(99, 102, 241, 0.4);
+        }
+        .menu-item.has-submenu {
+            position: relative;
+            padding: 0;
+            border: none;
+        }
+        .submenu-toggle {
+            display: block;
+            padding: 12px 16px;
+            color: #2d3748;
+            font-size: 13px;
+            background: none;
+            border: none;
+            width: 100%;
+            text-align: left;
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        }
+        .submenu-toggle:hover {
+            background: rgba(99, 102, 241, 0.08);
+            padding-left: 20px;
+            border-left: 2px solid rgba(99, 102, 241, 0.4);
+        }
+        .submenu {
+            display: none;
+            background: rgba(99, 102, 241, 0.03);
+            border-top: 1px solid rgba(99, 102, 241, 0.1);
+        }
+        .submenu.active {
+            display: block;
+        }
+        .submenu .menu-item {
+            padding-left: 32px;
+            font-size: 12px;
+        }
+        .submenu .menu-item:hover {
+            padding-left: 36px;
+            background: rgba(99, 102, 241, 0.12);
+        }
+        /* 🎵 音響ステータス表示 */
+        #audio-status {
+            position: fixed;
+            top: 70px;
+            right: 20px;
+            z-index: 100;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-size: 12px;
+            border: 1px solid rgba(139, 92, 246, 0.3);
+            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
+            color: #2d3748;
+            display: none;
+            transition: opacity 0.3s ease;
+        }
+        #audio-status.active {
+            display: block;
+        }
+        #audio-status .status-icon {
+            display: inline-block;
+            margin-right: 5px;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 0.8; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.1); }
+        }
+        /* メニューアイコンのバウンスアニメーション */
+        .menu-icon {
+            display: inline-block;
+            animation: menu-bounce 2s ease-in-out infinite;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            text-shadow: 0 0 10px currentColor;
+        }
+        .menu-icon:hover {
+            transform: scale(1.4);
+            animation: menu-bounce-fast 0.8s ease-in-out infinite;
+        }
+        @keyframes menu-bounce {
+            0%, 100% {
+                filter: brightness(1) drop-shadow(0 0 8px currentColor);
+                transform: scale(1) translateY(0px);
+            }
+            25% {
+                filter: brightness(1.3) drop-shadow(0 0 15px currentColor);
+                transform: scale(1.1) translateY(-4px);
+            }
+            50% {
+                filter: brightness(1.5) drop-shadow(0 0 20px currentColor);
+                transform: scale(1.15) translateY(-8px);
+            }
+            75% {
+                filter: brightness(1.3) drop-shadow(0 0 15px currentColor);
+                transform: scale(1.1) translateY(-4px);
+            }
+        }
+        @keyframes menu-bounce-fast {
+            0%, 100% {
+                filter: brightness(1.4) drop-shadow(0 0 15px currentColor);
+                transform: translateY(0px);
+            }
+            50% {
+                filter: brightness(1.8) drop-shadow(0 0 25px currentColor);
+                transform: translateY(-12px);
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 🎵 音響ステータス表示 -->
+    <div id="audio-status">
+        <span class="status-icon">🎤</span><span id="audio-text">音声待機中...</span>
+    </div>
+    <!-- Navigation Links (hidden - now in unified menu) -->
+    <div class="navigation" style="display: none;">
+        <a href="../../index.html" class="nav-link">🏠 Home</a>
+        <a href="https://github.com/nyukicorn/chocodrop" class="nav-link" target="_blank">📦 GitHub</a>
+    </div>
+    <!-- Main Info Panel -->
+    <div id="info">
+        <button class="close-btn" type="button" aria-label="ヘルプを閉じる" onclick="hideInfoPanel()">×</button>
+        <div class="info-header">
+            <strong><span class="emoji choco-title">🍫</span>はじまりの国へようこそ</strong>
+            <p class="subtitle">手元の画像・動画・3Dモデルを配置できます。アカウント・MCP・生成サービスの設定は不要です。</p>
+        </div>
+        <ul class="info-list">
+            <li><span class="info-icon">🧭</span><span>右下の <code>🍫</code> をクリックしてコマンドUIを呼び出しましょう。</span></li>
+            <li><span class="info-icon">💡</span><span>「Import」でファイルを選ぶと、自動で配置します。まずは下のサンプルでも試せます。</span></li>
+            <li><span class="info-icon">🎨</span><span>素材はドラッグ＆ドロップ、または「メディアインポート」モードで配置できます。</span></li>
+            <li><span class="info-icon">🎥</span><span>撮影モードでは UI を隠し、WASD でふわりと視点を滑らせましょう。</span></li>
+        </ul>
+        <div class="info-cta">
+            <button id="try-sample" class="cta-primary" disabled>サンプルを配置</button>
+            <a href="../../getting-started.html" class="cta-secondary">使い方・ツール連携</a>
+            <button id="info-open-guide" class="cta-secondary">詳しいガイド</button>
+            <button id="info-show-shortcuts" class="cta-secondary">ショートカットを表示</button>
+        </div>
+    </div>
+    <!-- 世界選択リンク (hidden - now in unified menu) -->
+    <div class="demo-links" style="display: none;">
+        <a href="../pixel-ocean/index.html" class="demo-link">🌊 海底世界</a>
+        <a href="../music-garden/index.html" class="demo-link">🌸 硝子の花</a>
+        <a href="../wabi-sabi/index.html" class="demo-link">🖤 侘び寂び</a>
+        <a href="../space/index.html" class="demo-link">🌌 宇宙空間</a>
+        <a href="../toy-city/index.html" class="demo-link">🎡 AI遊園地</a>
+    </div>
+    <!-- 統合メニュー -->
+    <div class="unified-menu">
+        <button class="menu-toggle" id="unifiedMenuToggle" aria-label="Menu">☰</button>
+        <div class="menu-dropdown" id="unifiedMenuDropdown">
+            <button class="menu-item" id="showInfoBtn"><span class="menu-icon">📖</span> このワールドについて</button>
+            <div class="menu-item has-submenu">
+                <button class="submenu-toggle" id="worldsMenuToggle"><span class="menu-icon">🌍</span> 世界選択 <span style="font-size: 10px;">▼</span></button>
+                <div class="submenu" id="worldsSubmenu">
+                    <a href="index.html" class="menu-item"><span class="menu-icon">🍫</span> はじまりの国（現在地）</a>
+                    <a href="../pixel-ocean/index.html" class="menu-item"><span class="menu-icon">🌊</span> 海底世界</a>
+                    <a href="../music-garden/index.html" class="menu-item"><span class="menu-icon">🌸</span> 硝子の花</a>
+                    <a href="../space/index.html" class="menu-item"><span class="menu-icon">🌌</span> 宇宙空間</a>
+                    <a href="../toy-city/index.html" class="menu-item"><span class="menu-icon">🎡</span> AI遊園地</a>
+                    <a href="../wabi-sabi/index.html" class="menu-item"><span class="menu-icon">🖤</span> 侘び寂びの世界</a>
+                </div>
+            </div>
+            <a href="../../index.html" class="menu-item"><span class="menu-icon">🏠</span> Home</a>
+            <a href="https://github.com/nyukicorn/chocodrop" class="menu-item" target="_blank"><span class="menu-icon">🔗</span> GitHub</a>
+            <button class="menu-item" id="vrMenuButton"><span class="menu-icon">🥽</span> VR</button>
+            <button class="menu-item" id="arMenuButton"><span class="menu-icon">🥽</span> AR</button>
+        </div>
+    </div>
+    <p id="demo-status" role="status" aria-live="polite" style="position: fixed; bottom: 12px; left: 16px; z-index: 1500; max-width: min(380px, 80vw); padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.94); color: #25243c; font-size: 13px; pointer-events: none;">3Dシーンを準備しています…</p>
+    <!-- Three.js r170 + ChocoDrop (module preload) -->
+    <script type="module">
+        // GitHub Pages対応: プロトコルとホスト名を取得し、適切なベースURLを構築
+        const isGitHubPages = window.location.hostname.includes('github.io');
+        const normalizeBase = (base) => {
+            if (!base) return '';
+            return base.replace(/\/$/, '');
+        };
+        const localLoaderBase = `${window.location.protocol}//${window.location.hostname}:3015`;
+        const fallbackBase = window.CHOCODROP_PUBLIC_BASE ||
+            (isGitHubPages
+                ? `${window.location.origin}${window.location.pathname.split('/examples/')[0]}/public`
+                : localLoaderBase
+            );
+        const loaderCandidates = [];
+        const addCandidate = (candidate) => {
+            if (!candidate) return;
+            const normalized = candidate.endsWith('.js')
+                ? candidate
+                : `${normalizeBase(candidate)}/load-chocodrop.js`;
+            if (!loaderCandidates.includes(normalized)) {
+                loaderCandidates.push(normalized);
+            }
+        };
+        // 🎯 情報パネル制御（loader取得待ちの間でも動作させる）
+        let autoHideTimer = null;
+        const getInfoPanel = () => document.getElementById('info');
+        const clearInfoPanelAutoHide = () => {
+            if (autoHideTimer) {
+                clearTimeout(autoHideTimer);
+                autoHideTimer = null;
+            }
+        };
+        const scheduleInfoPanelAutoHide = () => {
+            clearInfoPanelAutoHide();
+            autoHideTimer = window.setTimeout(() => {
+                if (typeof window.hideInfoPanel === 'function') {
+                    window.hideInfoPanel();
+                }
+            }, 30000);
+        };
+        window.hideInfoPanel = function hideInfoPanel() {
+            const infoPanel = getInfoPanel();
+            if (!infoPanel) {
+                clearInfoPanelAutoHide();
+                return;
+            }
+            infoPanel.classList.add('hidden');
+            window.setTimeout(() => {
+                if (infoPanel.classList.contains('hidden')) {
+                    infoPanel.style.display = 'none';
+                }
+            }, 300);
+            clearInfoPanelAutoHide();
+        };
+        window.showInfoPanel = function showInfoPanel() {
+            const infoPanel = getInfoPanel();
+            if (!infoPanel) {
+                return;
+            }
+            infoPanel.style.display = 'block';
+            window.requestAnimationFrame(() => {
+                infoPanel.classList.remove('hidden');
+            });
+            scheduleInfoPanelAutoHide();
+        };
+        const localHostnames = new Set(['localhost', '127.0.0.1', '::1']);
+        const isLanIp = /^\d{1,3}(?:\.\d{1,3}){3}$/.test(window.location.hostname);
+        const shouldUseLocalLoader = !isGitHubPages && (localHostnames.has(window.location.hostname) || window.location.hostname.endsWith('.local') || isLanIp);
+        addCandidate(window.CHOCODROP_PUBLIC_BASE);
+        addCandidate(new URL('../../public/load-chocodrop.js', import.meta.url).href);
+        if (shouldUseLocalLoader) addCandidate(localLoaderBase);
+        addCandidate(fallbackBase);
+        let ensureChocoDrop = null;
+        for (const candidate of loaderCandidates) {
+            try {
+                const module = await import(candidate);
+                ensureChocoDrop = module?.default || module?.ensureChocoDrop || null;
+                if (ensureChocoDrop) {
+                    console.log(`✅ ChocoDrop loader resolved via ${candidate}`);
+                    break;
+                }
+            } catch (error) {
+                console.warn(`⚠️ Failed to load ChocoDrop loader from ${candidate}`, error);
+            }
+        }
+        if (!ensureChocoDrop) {
+            throw new Error('ChocoDrop ローダーを取得できませんでした。`load-chocodrop.js` の提供元を確認してください。');
+        }
+        (async () => {
+            await ensureChocoDrop();
+            const THREE = window.THREE;
+            const ChocoDrop = window.ChocoDrop;
+        // 統合メニューの制御
+        (function() {
+            const menuToggle = document.getElementById('unifiedMenuToggle');
+            const menuDropdown = document.getElementById('unifiedMenuDropdown');
+            const worldsMenuToggle = document.getElementById('worldsMenuToggle');
+            const worldsSubmenu = document.getElementById('worldsSubmenu');
+            const showInfoBtn = document.getElementById('showInfoBtn');
+            const infoPanel = document.getElementById('info');
+            const guideButton = document.getElementById('info-open-guide');
+            const shortcutsButton = document.getElementById('info-show-shortcuts');
+            // 初回訪問チェック - localStorage使用
+            const FIRST_VISIT_KEY = 'basic_visited';
+            const hasVisited = localStorage.getItem(FIRST_VISIT_KEY);
+            if (!hasVisited) {
+                // 初回訪問時は情報パネルを表示
+                if (infoPanel) {
+                    infoPanel.style.display = 'block';
+                }
+                localStorage.setItem(FIRST_VISIT_KEY, 'true');
+            } else {
+                // 2回目以降は非表示
+                if (infoPanel) {
+                    infoPanel.style.display = 'none';
+                }
+            }
+            // 統合メニューのトグル
+            if (menuToggle && menuDropdown) {
+                menuToggle.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    menuDropdown.classList.toggle('active');
+                });
+                // 外側クリックで閉じる
+                document.addEventListener('click', (e) => {
+                    if (!menuToggle.contains(e.target) && !menuDropdown.contains(e.target)) {
+                        menuDropdown.classList.remove('active');
+                        // サブメニューも閉じる
+                        if (worldsSubmenu) {
+                            worldsSubmenu.classList.remove('active');
+                        }
+                    }
+                });
+                // Escキーで閉じる
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        menuDropdown.classList.remove('active');
+                        if (worldsSubmenu) {
+                            worldsSubmenu.classList.remove('active');
+                        }
+                    }
+                });
+            }
+            // 世界選択サブメニューのトグル
+            if (worldsMenuToggle && worldsSubmenu) {
+                worldsMenuToggle.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    worldsSubmenu.classList.toggle('active');
+                });
+            }
+            // 情報パネル表示ボタン
+            if (showInfoBtn) {
+                showInfoBtn.addEventListener('click', () => {
+                    // グローバルに定義された showInfoPanel() を呼び出す
+                    if (typeof showInfoPanel === 'function') {
+                        showInfoPanel();
+                    } else {
+                        // フォールバック: 直接表示
+                        const panel = document.getElementById('info');
+                        if (panel) {
+                            panel.style.display = 'block';
+                            panel.classList.remove('hidden');
+                        }
+                    }
+                    menuDropdown.classList.remove('active');
+                });
+            }
+            if (guideButton) {
+                guideButton.addEventListener('click', () => {
+                    try {
+                        if (window.ChocoDrop?.ui?.onboardingCoach) {
+                            window.ChocoDrop.ui.onboardingCoach.start({ force: true });
+                        } else {
+                            window.dispatchEvent(new CustomEvent('chocodrop:request-onboarding'));
+                        }
+                    } finally {
+                        if (typeof hideInfoPanel === 'function') {
+                            hideInfoPanel();
+                        }
+                    }
+                });
+            }
+            if (shortcutsButton) {
+                shortcutsButton.addEventListener('click', () => {
+                    if (menuDropdown) {
+                        menuDropdown.classList.add('active');
+                    }
+                    window.dispatchEvent(new CustomEvent('chocodrop:show-shortcuts-request'));
+                    if (typeof hideInfoPanel === 'function') {
+                        hideInfoPanel();
+                    }
+                });
+            }
+            // VR/ARボタンは後でThree.jsのrendererと連携
+            // グローバル変数として保存
+            window.unifiedMenuVRButton = document.getElementById('vrMenuButton');
+            window.unifiedMenuARButton = document.getElementById('arMenuButton');
+        })();
+        console.log('THREE loaded:', typeof THREE !== 'undefined');
+        console.log('OrbitControls loaded:', typeof THREE.OrbitControls !== 'undefined');
+        // Basic Three.js setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        renderer.xr.enabled = true; // ★ VR/AR有効化
+        document.body.appendChild(renderer.domElement);
+        // ★ VR/ARボタンを統合メニューと連携（bodyには追加しない）
+        if (typeof VRButton !== 'undefined' && window.unifiedMenuVRButton) {
+            console.log('✅ VRButton script loaded - connecting to unified menu');
+            // VRセッション開始関数を作成
+            function startVRSession() {
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                        if (supported) {
+                            const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] };
+                            navigator.xr.requestSession('immersive-vr', sessionInit).then(session => {
+                                session.addEventListener('end', () => {
+                                    renderer.xr.setSession(null);
+                                });
+                                renderer.xr.setSession(session);
+                            });
+                        } else {
+                            console.log('VR not supported on this device');
+                        }
+                    });
+                }
+            }
+            window.unifiedMenuVRButton.onclick = startVRSession;
+            // サポートチェック - 未サポートの場合はボタンを非表示に
+            if ('xr' in navigator) {
+                navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                    if (!supported) {
+                        window.unifiedMenuVRButton.style.display = 'none';
+                    }
+                });
+            } else {
+                window.unifiedMenuVRButton.style.display = 'none';
+            }
+        } else {
+            console.log('❌ VRButton script not loaded or menu button not found');
+            if (window.unifiedMenuVRButton) {
+                window.unifiedMenuVRButton.style.display = 'none';
+            }
+        }
+        if (typeof ARButton !== 'undefined' && window.unifiedMenuARButton) {
+            console.log('✅ ARButton script loaded - connecting to unified menu');
+            // ARセッション開始関数を作成
+            function startARSession() {
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                        if (supported) {
+                            const sessionInit = {
+                                requiredFeatures: ['hit-test'],
+                                optionalFeatures: ['dom-overlay'],
+                                domOverlay: { root: document.body }
+                            };
+                            navigator.xr.requestSession('immersive-ar', sessionInit).then(session => {
+                                session.addEventListener('end', () => {
+                                    renderer.xr.setSession(null);
+                                });
+                                renderer.xr.setSession(session);
+                            });
+                        } else {
+                            console.log('AR not supported on this device');
+                        }
+                    });
+                }
+            }
+            window.unifiedMenuARButton.onclick = startARSession;
+            // サポートチェック - 未サポートの場合はボタンを非表示に
+            if ('xr' in navigator) {
+                navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                    if (!supported) {
+                        window.unifiedMenuARButton.style.display = 'none';
+                    }
+                });
+            } else {
+                window.unifiedMenuARButton.style.display = 'none';
+            }
+        } else {
+            console.log('❌ ARButton script not loaded or menu button not found');
+            if (window.unifiedMenuARButton) {
+                window.unifiedMenuARButton.style.display = 'none';
+            }
+        }
+        // 🌈 夢の国の環境設定 - ミルキーホワイト背景
+        scene.background = new THREE.Color(0xfaf8ff); // ミルキーホワイト
+        scene.fog = new THREE.FogExp2(0xfaf8ff, 0.002);
+        // ✨ ミルキーな夢ライティング
+        const ambientLight = new THREE.AmbientLight(0xfff8ff, 0.8);
+        scene.add(ambientLight);
+        // ソフトライト1
+        const directionalLight1 = new THREE.DirectionalLight(0xffe6ff, 0.6);
+        directionalLight1.position.set(30, 40, 30);
+        directionalLight1.castShadow = true;
+        directionalLight1.shadow.mapSize.width = 2048;
+        directionalLight1.shadow.mapSize.height = 2048;
+        scene.add(directionalLight1);
+        // ソフトライト2
+        const directionalLight2 = new THREE.DirectionalLight(0xf0f8ff, 0.4);
+        directionalLight2.position.set(-30, 40, -30);
+        scene.add(directionalLight2);
+        // ミルキー環境光
+        const hemisphereLight = new THREE.HemisphereLight(0xfff8ff, 0xf8f0ff, 0.6);
+        scene.add(hemisphereLight);
+        // ☁️ 雲のプラットフォーム（複数レイヤー）
+        function createCloudPlatform(x, y, z, scale) {
+            const cloudGroup = new THREE.Group();
+            // 雲の各パーツを球体で作成
+            const cloudMaterial = new THREE.MeshPhongMaterial({
+                color: 0xffddee, // ミルキーピンク
+                transparent: true,
+                opacity: 0.8,
+                emissive: 0xffb3d9,
+                emissiveIntensity: 0.3
+            });
+            // メインの雲
+            for(let i = 0; i < 8; i++) {
+                const radius = Math.random() * 3 + 2;
+                const cloud = new THREE.Mesh(
+                    new THREE.SphereGeometry(radius * scale, 16, 12),
+                    cloudMaterial
+                );
+                cloud.position.set(
+                    x + (Math.random() - 0.5) * 10 * scale,
+                    y + (Math.random() - 0.5) * 2 * scale,
+                    z + (Math.random() - 0.5) * 10 * scale
+                );
+                cloud.receiveShadow = true;
+                cloud.castShadow = true;
+                cloudGroup.add(cloud);
+            }
+            scene.add(cloudGroup);
+            return cloudGroup;
+        }
+        // メインの雲プラットフォーム
+        const mainCloud = createCloudPlatform(0, -5, 0, 2);
+        // 周りの小さな雲
+        createCloudPlatform(-20, 2, -15, 1);
+        createCloudPlatform(20, 4, -10, 0.8);
+        createCloudPlatform(-15, 1, 20, 1.2);
+        createCloudPlatform(25, 3, 15, 0.9);
+        // 🌈 虹色のクリスタル
+        function createRainbowCrystal(x, y, z, scale = 1) {
+            const geometry = new THREE.OctahedronGeometry(1.5 * scale, 0);
+            // キラキラクリスタルマテリアル
+            const material = new THREE.MeshPhongMaterial({
+                color: 0xffeeff, // ミルキーピンク
+                transparent: true,
+                opacity: 0.8,
+                emissive: 0xffc0ff,
+                emissiveIntensity: 0.4,
+                shininess: 100,
+                specular: 0xffffff
+            });
+            const crystal = new THREE.Mesh(geometry, material);
+            crystal.position.set(x, y, z);
+            crystal.castShadow = true;
+            crystal.receiveShadow = true;
+            // ゆっくり回転
+            crystal.userData.rotationSpeed = Math.random() * 0.02 + 0.01;
+            scene.add(crystal);
+            return crystal;
+        }
+        // クリスタル配置
+        const crystals = [];
+        crystals.push(createRainbowCrystal(-8, 2, -5, 1.2));
+        crystals.push(createRainbowCrystal(7, 3, -8, 0.8));
+        crystals.push(createRainbowCrystal(-12, 1, 8, 1.5));
+        crystals.push(createRainbowCrystal(10, 2.5, 6, 1));
+        crystals.push(createRainbowCrystal(0, 4, -12, 0.9));
+        crystals.push(createRainbowCrystal(-5, 2, 3, 1.1));
+        // ⭐ キラキラ星パーティクル
+        function createSparkleParticles() {
+            const particleCount = 200;
+            const geometry = new THREE.BufferGeometry();
+            const positions = [];
+            const colors = [];
+            const sizes = [];
+            for(let i = 0; i < particleCount; i++) {
+                positions.push(
+                    (Math.random() - 0.5) * 100,
+                    Math.random() * 50 - 10,
+                    (Math.random() - 0.5) * 100
+                );
+                // ミルキーパステルカラー
+                const hue = Math.random();
+                colors.push(
+                    0.9 + Math.random() * 0.1, // より白っぽく
+                    0.7 + Math.random() * 0.3, // ミルキー
+                    0.9 + Math.random() * 0.1  // 明るく
+                );
+                sizes.push(Math.random() * 3 + 1);
+            }
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+            geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
+            const material = new THREE.PointsMaterial({
+                size: 2,
+                sizeAttenuation: true,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.9,
+                alphaTest: 0.1, // 透明度の閾値設定
+                blending: THREE.NormalBlending, // AdditiveBlendingをやめる
+                map: createStarTexture()
+            });
+            const particles = new THREE.Points(geometry, material);
+            scene.add(particles);
+            return particles;
+        }
+        // 星のテクスチャ作成（完全透明背景）
+        function createStarTexture() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 64;
+            canvas.height = 64;
+            const ctx = canvas.getContext('2d');
+            // 背景を透明にクリア（白で塗らない）
+            ctx.clearRect(0, 0, 64, 64);
+            // 中心から外側へのグラデーション（外側は完全透明）
+            const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 24);
+            gradient.addColorStop(0, 'rgba(255,255,255,1)');
+            gradient.addColorStop(0.3, 'rgba(255,240,255,0.8)');
+            gradient.addColorStop(0.6, 'rgba(255,220,255,0.4)');
+            gradient.addColorStop(0.9, 'rgba(255,200,255,0.1)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0)'); // 完全透明
+            // 円形だけ描画（背景は触らない）
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.beginPath();
+            ctx.arc(32, 32, 24, 0, Math.PI * 2);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            const texture = new THREE.CanvasTexture(canvas);
+            texture.premultiplyAlpha = false; // アルファ事前乗算を無効
+            return texture;
+        }
+        const sparkles = createSparkleParticles();
+        // 🌈 太いグラデーション虹を追加
+        function createRainbow() {
+            // アーチカーブを作成
+            const curve = new THREE.CatmullRomCurve3([
+                new THREE.Vector3(-20, 5, -15),
+                new THREE.Vector3(-10, 18, -15),
+                new THREE.Vector3(0, 22, -15),
+                new THREE.Vector3(10, 18, -15),
+                new THREE.Vector3(20, 5, -15)
+            ]);
+            // 太いチューブジオメトリ（高解像度）
+            const geometry = new THREE.TubeGeometry(curve, 100, 2.5, 32, false);
+            // グラデーション用のvertex shader
+            const vertexShader = `
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+            `;
+            // フラグメントシェーダーで虹色グラデーション
+            const fragmentShader = `
+                varying vec2 vUv;
+                void main() {
+                    float t = vUv.y; // 長さ方向でグラデーション（修正！）
+                    vec3 color;
+                    if (t < 0.167) {
+                        color = mix(vec3(1.0, 0.67, 0.67), vec3(1.0, 0.8, 0.6), t / 0.167);
+                    } else if (t < 0.333) {
+                        color = mix(vec3(1.0, 0.8, 0.6), vec3(1.0, 1.0, 0.67), (t - 0.167) / 0.167);
+                    } else if (t < 0.5) {
+                        color = mix(vec3(1.0, 1.0, 0.67), vec3(0.67, 1.0, 0.67), (t - 0.333) / 0.167);
+                    } else if (t < 0.667) {
+                        color = mix(vec3(0.67, 1.0, 0.67), vec3(0.67, 0.8, 1.0), (t - 0.5) / 0.167);
+                    } else if (t < 0.833) {
+                        color = mix(vec3(0.67, 0.8, 1.0), vec3(0.8, 0.67, 1.0), (t - 0.667) / 0.167);
+                    } else {
+                        color = mix(vec3(0.8, 0.67, 1.0), vec3(1.0, 0.67, 1.0), (t - 0.833) / 0.167);
+                    }
+                    gl_FragColor = vec4(color, 0.8);
+                }
+            `;
+            const material = new THREE.ShaderMaterial({
+                vertexShader: vertexShader,
+                fragmentShader: fragmentShader,
+                transparent: true,
+                side: THREE.DoubleSide
+            });
+            const rainbow = new THREE.Mesh(geometry, material);
+            // 筒の向きを調整（より自然な角度に）
+            rainbow.rotation.x = Math.PI * 0.1;  // X軸を少し回転
+            rainbow.rotation.y = Math.PI * 0.05; // Y軸を少し回転
+            rainbow.rotation.z = Math.PI * 0.02; // Z軸を少し回転
+            scene.add(rainbow);
+        }
+        createRainbow();
+        // 🦄 ユニコーンの角みたいなオブジェクト
+        function createUnicornHorn(x, y, z) {
+            const geometry = new THREE.ConeGeometry(0.5, 3, 8);
+            const material = new THREE.MeshPhysicalMaterial({
+                color: 0xffffff,
+                metalness: 0.3,
+                roughness: 0.2,
+                iridescence: 1,
+                iridescenceIOR: 2.333,
+                iridescenceThicknessRange: [100, 400],
+                emissive: 0xffd0ff,
+                emissiveIntensity: 0.3
+            });
+            const horn = new THREE.Mesh(geometry, material);
+            horn.position.set(x, y, z);
+            horn.rotation.z = Math.PI / 8;
+            horn.castShadow = true;
+            // ゴールドのらせん
+            const spiralGeometry = new THREE.TorusGeometry(0.6, 0.1, 8, 20);
+            const spiralMaterial = new THREE.MeshPhongMaterial({
+                color: 0xffd700,
+                emissive: 0xffd700,
+                emissiveIntensity: 0.3
+            });
+            for(let i = 0; i < 3; i++) {
+                const spiral = new THREE.Mesh(spiralGeometry, spiralMaterial);
+                spiral.position.y = i * 0.8 - 1;
+                spiral.scale.set(1 - i * 0.3, 1 - i * 0.3, 1);
+                horn.add(spiral);
+            }
+            scene.add(horn);
+            return horn;
+        }
+        // ユニコーンの角を配置
+        const horn1 = createUnicornHorn(5, 3, 0);
+        const horn2 = createUnicornHorn(-8, 2, 5);
+        // Camera position
+        camera.position.set(0, 8, 25);
+        camera.lookAt(0, 0, 0);
+        // Controls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.maxPolarAngle = Math.PI / 2.2;
+        // Initialize ChocoDrop (本物!)
+        const chocoDrop = ChocoDrop.createChocoDrop(scene, {
+            camera: camera,
+            renderer: renderer,
+            // GitHub Pagesなので生成機能なし、インポートのみ
+            serverUrl: null,
+            enableServerHealthCheck: false,  // サーバーレス環境なのでヘルスチェック無効
+            uiOptions: { showGuidedOnboarding: false },
+            sceneOptions: {
+                enableMouseInteraction: true
+            },
+            onControlsToggle: (disabled) => {
+                controls.enabled = !disabled;
+            }
+        });
+        const statusElement = document.getElementById('demo-status');
+        statusElement.textContent = '準備完了 · ファイルはこのブラウザ内で配置します';
+        const sampleButton = document.getElementById('try-sample');
+        sampleButton.disabled = false;
+        sampleButton.addEventListener('click', async () => {
+            sampleButton.disabled = true;
+            statusElement.textContent = 'サンプルを読み込んでいます…';
+            try {
+                await chocoDrop.sceneManager.loadImageFile('../../public/sample-card.svg', {
+                    fileName: 'ChocoDrop-sample.svg', position: { x: 0, y: 0, z: 12 }
+                });
+                statusElement.textContent = 'サンプルを配置しました · 次はImportからご自分の素材を選べます';
+            } catch (error) {
+                statusElement.textContent = `配置できませんでした: ${error.message}`;
+            } finally {
+                sampleButton.disabled = false;
+            }
+        });
+        if (new URLSearchParams(location.search).get('local') === '1') {
+            const { connectLocalBridge } = await import('../../src/client/local-bridge.js');
+            connectLocalBridge(chocoDrop.sceneManager, { statusElement });
+        }
+        // GitHub Pages用: サービス設定ダイアログを強制非表示 + UIサイズ調整
+        const hideServiceDialog = () => {
+            // 複数の方法でサービス設定ダイアログを非表示
+            const modals = document.querySelectorAll('[style*="position: fixed"], [style*="backdrop"], div[style*="rgba"], div[style*="blur"]');
+            modals.forEach(modal => {
+                if (modal.textContent && modal.textContent.includes('サービス設定')) {
+                    modal.style.display = 'none !important';
+                    modal.remove();
+                }
+            });
+            // UIサイズ調整は削除（文字が崩れるため）
+        };
+        // 複数回実行して確実に非表示
+        setTimeout(hideServiceDialog, 50);
+        setTimeout(hideServiceDialog, 200);
+        setTimeout(hideServiceDialog, 500);
+        // DOM変更監視
+        const observer = new MutationObserver(() => {
+            hideServiceDialog();
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        // 🎵 高度な音響システムの初期化（wabi-sabi方式）
+        let audioContext = null;
+        let analyser = null;
+        let dataArray = null;
+        let beatDetectionHistory = [];
+        let lastBeatTime = 0;
+        let musicData = {
+            volume: 0,
+            bass: 0,
+            mid: 0,
+            treble: 0,
+            tempo: 0,
+            bpm: 0,
+            beatDetected: false,
+            isPlaying: false
+        };
+        const audioStatusEl = document.getElementById('audio-status');
+        const audioTextEl = document.getElementById('audio-text');
+        function setupAudioAnalysis() {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 256;
+                dataArray = new Uint8Array(analyser.frequencyBinCount);
+                console.log('🎵 Advanced audio analysis initialized');
+            }
+        }
+        // 動画要素を音響分析に接続
+        function connectVideoToAudio(videoElement) {
+            if (!audioContext || !analyser) {
+                setupAudioAnalysis();
+            }
+            try {
+                // AudioContextがsuspended状態の場合は再開
+                if (audioContext.state === 'suspended') {
+                    audioContext.resume();
+                }
+                const source = audioContext.createMediaElementSource(videoElement);
+                source.connect(analyser);
+                analyser.connect(audioContext.destination);
+                musicData.isPlaying = true;
+                if (audioStatusEl) {
+                    audioStatusEl.classList.add('active');
+                    if (audioTextEl) {
+                        audioTextEl.textContent = '音響連動中 ♪ (BPM検出中)';
+                    }
+                }
+                console.log('🎵 Video connected to advanced audio analyser');
+            } catch (error) {
+                console.warn('Audio connection error:', error);
+            }
+        }
+        // 音楽データの詳細解析
+        function analyzeMusicData() {
+            if (!analyser || !dataArray) return;
+            analyser.getByteFrequencyData(dataArray);
+            // 音量計算
+            let sum = 0;
+            for (let i = 0; i < dataArray.length; i++) {
+                sum += dataArray[i];
+            }
+            musicData.volume = sum / dataArray.length / 255;
+            // 周波数帯域分析
+            const bassRange = Math.floor(dataArray.length * 0.1);
+            const midRange = Math.floor(dataArray.length * 0.5);
+            let bassSum = 0, midSum = 0, trebleSum = 0;
+            for (let i = 0; i < bassRange; i++) {
+                bassSum += dataArray[i];
+            }
+            for (let i = bassRange; i < midRange; i++) {
+                midSum += dataArray[i];
+            }
+            for (let i = midRange; i < dataArray.length; i++) {
+                trebleSum += dataArray[i];
+            }
+            musicData.bass = bassSum / bassRange / 255;
+            musicData.mid = midSum / (midRange - bassRange) / 255;
+            musicData.treble = trebleSum / (dataArray.length - midRange) / 255;
+            // 🥁 ビート検出とBPM計算
+            const currentTime = performance.now();
+            const bassThreshold = 0.3;
+            const volumeThreshold = 0.2;
+            musicData.beatDetected = false;
+            // ビート検出（ベース音量の急激な変化）
+            if (musicData.bass > bassThreshold && musicData.volume > volumeThreshold) {
+                if (currentTime - lastBeatTime > 300) { // 最小300ms間隔
+                    musicData.beatDetected = true;
+                    lastBeatTime = currentTime;
+                    // BPM計算用履歴更新
+                    beatDetectionHistory.push(currentTime);
+                    if (beatDetectionHistory.length > 8) {
+                        beatDetectionHistory.shift();
+                    }
+                    // BPM計算
+                    if (beatDetectionHistory.length >= 4) {
+                        const intervals = [];
+                        for (let i = 1; i < beatDetectionHistory.length; i++) {
+                            intervals.push(beatDetectionHistory[i] - beatDetectionHistory[i-1]);
+                        }
+                        const avgInterval = intervals.reduce((a, b) => a + b) / intervals.length;
+                        musicData.bpm = Math.round(60000 / avgInterval);
+                        // ステータス更新
+                        if (audioTextEl && musicData.bpm > 0) {
+                            audioTextEl.textContent = `音響連動中 ♪ (${musicData.bpm} BPM)`;
+                        }
+                    }
+                }
+            }
+        }
+        // ChocoDrop のビデオ要素を監視して自動接続
+        function observeVideoElements() {
+            const videoObserver = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeName === 'VIDEO') {
+                            console.log('🎬 Video element detected, connecting to audio...');
+                            connectVideoToAudio(node);
+                        }
+                    });
+                });
+            });
+            videoObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            // 既存のビデオ要素もチェック
+            const existingVideos = document.querySelectorAll('video');
+            existingVideos.forEach(video => {
+                connectVideoToAudio(video);
+            });
+        }
+        // 初期化
+        if (audioStatusEl) {
+            audioStatusEl.classList.add('active');
+        }
+        observeVideoElements();
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            // ✨ アニメーション
+            const time = Date.now() * 0.001;
+            // 🎵 高度な音響データ解析
+            if (musicData.isPlaying) {
+                analyzeMusicData();
+            }
+            // 音響連動の強度（優しく穏やかに + ビート反応）
+            const audioIntensity = musicData.volume * 0.6; // basicは控えめな反応
+            const bassBoost = musicData.bass * 1.2;
+            const midBoost = musicData.mid * 0.8;
+            const trebleBoost = musicData.treble * 1.0;
+            const beatPulse = musicData.beatDetected ? 1.5 : 1.0; // ビート時に大きく反応
+            // クリスタルの回転 + 音響連動 + ビート反応
+            crystals.forEach((crystal, i) => {
+                crystal.rotation.y = time * crystal.userData.rotationSpeed * (1 + audioIntensity * 0.5) * beatPulse;
+                crystal.rotation.x = Math.sin(time * 0.5 + i) * 0.1 * (1 + bassBoost * 0.3) * beatPulse;
+                crystal.position.y += Math.sin(time + i) * 0.002 * (1 + midBoost * 0.4); // ふわふわ浮遊
+                // 音楽に合わせて輝きを変化 + ビート時に強く光る
+                if (crystal.material && crystal.material.emissiveIntensity !== undefined) {
+                    crystal.material.emissiveIntensity = (0.4 + audioIntensity * 0.6) * beatPulse;
+                }
+            });
+            // 雲のふわふわアニメーション + 音響連動 + ビート反応
+            if (mainCloud) {
+                mainCloud.position.y = -5 + Math.sin(time * 0.3) * 0.5 * (1 + bassBoost * 0.5) * beatPulse;
+                mainCloud.rotation.y = time * 0.05 * (1 + audioIntensity * 0.3);
+            }
+            // キラキラパーティクルの回転 + 音響連動 + ビート反応
+            if (sparkles) {
+                sparkles.rotation.y = time * 0.1 * (1 + trebleBoost * 0.4) * beatPulse;
+                sparkles.rotation.x = time * 0.05 * (1 + midBoost * 0.3);
+                // パーティクルの瞬き効果 + 音響連動 + ビート時に激しく
+                const positions = sparkles.geometry.attributes.position.array;
+                for (let i = 0; i < positions.length; i += 3) {
+                    const waveEffect = Math.sin(time * 2 + i) * 0.01 * (1 + audioIntensity * 1.5) * beatPulse;
+                    positions[i + 1] += waveEffect;
+                }
+                sparkles.geometry.attributes.position.needsUpdate = true;
+                // 音楽に合わせて明るさ変化 + ビート時に明るく
+                if (sparkles.material && sparkles.material.opacity !== undefined) {
+                    sparkles.material.opacity = (0.9 + audioIntensity * 0.1) * beatPulse;
+                }
+            }
+            // ユニコーンの角の回転 + 音響連動 + ビート反応
+            if (horn1) {
+                horn1.rotation.y = time * 0.3 * (1 + audioIntensity * 0.4) * beatPulse;
+                horn1.position.y = 3 + Math.sin(time * 0.7) * 0.3 * (1 + bassBoost * 0.6) * beatPulse;
+                // 音楽に合わせて輝きを変化 + ビート時に強く光る
+                if (horn1.material && horn1.material.emissiveIntensity !== undefined) {
+                    horn1.material.emissiveIntensity = (0.3 + trebleBoost * 0.5) * beatPulse;
+                }
+            }
+            if (horn2) {
+                horn2.rotation.y = -time * 0.2 * (1 + audioIntensity * 0.4) * beatPulse;
+                horn2.position.y = 2 + Math.sin(time * 0.5 + 1) * 0.2 * (1 + bassBoost * 0.6) * beatPulse;
+                // 音楽に合わせて輝きを変化 + ビート時に強く光る
+                if (horn2.material && horn2.material.emissiveIntensity !== undefined) {
+                    horn2.material.emissiveIntensity = (0.3 + trebleBoost * 0.5) * beatPulse;
+                }
+            }
+            renderer.render(scene, camera);
+        }
+        animate();
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // 30秒後の自動非表示タイマー開始
+        scheduleInfoPanelAutoHide();
+        console.log('✅ ベーシックな世界が準備完了！🍫 ChocoDrop でコンテンツを配置しましょう');
+    })().catch(error => {
+        document.getElementById('demo-status').textContent = `起動できませんでした: ${error.message}。通信とWebGL対応を確認して再読み込みしてください。`;
+        console.error(error);
+    });
+    </script>
+    <!-- VR/AR Button inline implementation -->
+    <script>
+        // VRButton implementation
+        const VRButton = {
+            createButton: function(renderer) {
+                const button = document.createElement('button');
+                function showEnterVR() {
+                    button.style.display = '';
+                    button.style.cursor = 'pointer';
+                    button.style.left = 'calc(50% - 50px)';
+                    button.style.width = '100px';
+                    button.textContent = 'ENTER VR';
+                    button.onmouseenter = function() { button.style.opacity = '1.0'; };
+                    button.onmouseleave = function() { button.style.opacity = '0.5'; };
+                    button.onclick = function() {
+                        const session = renderer.xr.getSession();
+                        if (session) {
+                            session.end();
+                        } else {
+                            navigator.xr.requestSession('immersive-vr', {
+                                optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking']
+                            }).then(session => {
+                                renderer.xr.setSession(session);
+                                button.textContent = 'EXIT VR';
+                                session.addEventListener('end', () => {
+                                    button.textContent = 'ENTER VR';
+                                });
+                            }).catch(err => {
+                                console.error('VR session failed:', err);
+                            });
+                        }
+                    };
+                }
+                function showWebXRNotFound() {
+                    button.style.display = '';
+                    button.style.cursor = 'auto';
+                    button.style.left = 'calc(50% - 75px)';
+                    button.style.width = '150px';
+                    button.textContent = 'VR NOT SUPPORTED';
+                    button.onmouseenter = null;
+                    button.onmouseleave = null;
+                    button.onclick = null;
+                }
+                button.style.position = 'absolute';
+                button.style.bottom = '20px';
+                button.style.padding = '12px 6px';
+                button.style.border = '1px solid #fff';
+                button.style.borderRadius = '4px';
+                button.style.background = 'rgba(0,0,0,0.1)';
+                button.style.color = '#fff';
+                button.style.font = 'normal 13px sans-serif';
+                button.style.textAlign = 'center';
+                button.style.opacity = '0.5';
+                button.style.outline = 'none';
+                button.style.zIndex = '999';
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                        supported ? showEnterVR() : showWebXRNotFound();
+                    });
+                } else {
+                    showWebXRNotFound();
+                }
+                return button;
+            }
+        };
+        // ARButton implementation
+        const ARButton = {
+            createButton: function(renderer, options) {
+                const button = document.createElement('button');
+                function showEnterAR() {
+                    button.style.display = '';
+                    button.style.cursor = 'pointer';
+                    button.style.left = 'calc(50% - 50px)';
+                    button.style.width = '100px';
+                    button.textContent = 'ENTER AR';
+                    button.onmouseenter = function() { button.style.opacity = '1.0'; };
+                    button.onmouseleave = function() { button.style.opacity = '0.5'; };
+                    button.onclick = function() {
+                        const session = renderer.xr.getSession();
+                        if (session) {
+                            session.end();
+                        } else {
+                            navigator.xr.requestSession('immersive-ar', {
+                                optionalFeatures: ['hit-test', 'dom-overlay', 'local-floor'],
+                                domOverlay: options?.domOverlay || { root: document.body }
+                            }).then(session => {
+                                renderer.xr.setSession(session);
+                                button.textContent = 'EXIT AR';
+                                session.addEventListener('end', () => {
+                                    button.textContent = 'ENTER AR';
+                                });
+                            }).catch(err => {
+                                console.error('AR session failed:', err);
+                                alert('AR not supported: ' + err.message);
+                            });
+                        }
+                    };
+                }
+                function showWebXRNotFound() {
+                    button.style.display = '';
+                    button.style.cursor = 'auto';
+                    button.style.left = 'calc(50% - 75px)';
+                    button.style.width = '150px';
+                    button.textContent = 'AR NOT SUPPORTED';
+                    button.onmouseenter = null;
+                    button.onmouseleave = null;
+                    button.onclick = null;
+                }
+                button.style.position = 'absolute';
+                button.style.bottom = '70px';
+                button.style.padding = '12px 6px';
+                button.style.border = '1px solid #fff';
+                button.style.borderRadius = '4px';
+                button.style.background = 'rgba(0,0,0,0.1)';
+                button.style.color = '#fff';
+                button.style.font = 'normal 13px sans-serif';
+                button.style.textAlign = 'center';
+                button.style.opacity = '0.5';
+                button.style.outline = 'none';
+                button.style.zIndex = '999';
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                        supported ? showEnterAR() : showWebXRNotFound();
+                    });
+                } else {
+                    showWebXRNotFound();
+                }
+                return button;
+            }
+        };
+        console.log('✅ VRButton/ARButton inline implementation loaded');
+    </script>
+</body>
+</html>