Pyodide_IDE(v1.11.038)

Initializing Sandbox...

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy"
		content="
			default-src 'self' https://script.google.com;
			script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com;
			connect-src 'self' https://script.google.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://pypi.org https://files.pythonhosted.org;
			worker-src 'self' blob: https://cdn.jsdelivr.net https://cdnjs.cloudflare.com;
            style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net;
			font-src 'self' https://cdnjs.cloudflare.com;
			img-src 'self' data:;
			frame-src 'self' data: blob:;
		"
    >
    <title>WEB_Python_IDE</title>

/* ### Footer Elements (フッター内の要素) ### */
		#footer_area_container {
            /* フッター内部のエリアコンテナ（結果エリアとプロットエリアを横並びにする） */
            display: flex; /* Flexboxコンテナとして設定 (子要素を横並びに配置) */
            flex: 1; /* 拡大率: 1 (縦方向の残りのスペースを全て使用) */
            gap: 0px; /* アイテム間の隙間: 5px */
            min-height: 0; /* 最小高さ: 0 (flexアイテムとしての高さの最小値を確保) */
		}
		#py_result_area {
            /* Pythonの実行結果（標準出力）表示エリア */
            flex: 6 1 0%; /* 拡大:0, 縮小:0, 基準サイズ:auto (サイズ固定) */
            padding: 1% 1%; /* 内部パディング (上下1%, 左右5%) */
            background: rgb(30, 30, 30); /* 背景色: 暗いグレー */
            color: rgb(250, 250, 250); /* 文字色: 非常に明るいグレー */
            border: 1px solid #555; /* 境界線: 1px 濃いグレーの実線 */
            border-radius: 4px; /* 角丸: 4px */
            font-size: 14px; /* フォントサイズ: 14px */
            overflow: auto; /* はみ出し処理: コンテンツがはみ出たらスクロール可能に */
            resize: none; /* 手動リサイズ禁止 */
            box-sizing: border-box; /* パディングと境界線を幅と高さに含める */
            min-width: 50px; /* 最小幅: 50px */
		}
		#js_result_area {
            /* JavaScriptの実行結果（ログなど）表示エリア */
            flex: 3 1 0%; /* 拡大:0, 縮小:0, 基準サイズ:auto (サイズ固定) */
            padding: 1% 1%; /* 内部パディング (上下1%, 左右5%) */
            background: rgb(30, 30, 30); /* 背景色: 暗いグレー */
            color: rgb(250, 250, 250); /* 文字色: 非常に明るいグレー */
            border: 1px solid #555; /* 境界線: 1px 濃いグレーの実線 */
            border-radius: 4px; /* 角丸: 4px */
            font-size: 14px; /* フォントサイズ: 14px */
            overflow: auto; /* はみ出し処理: コンテンツがはみ出たらスクロール可能に */
            resize: none; /* 手動リサイズ禁止 */
            box-sizing: border-box; /* パディングと境界線を幅と高さに含める */
            min-width: 50px; /* 最小幅: 50px */
		}
		#extension_area {
            /* グラフ/プロット表示エリア */
            flex: 3 1 0%; /* 拡大:0, 縮小:0, 基準サイズ:auto (サイズ固定) */
            padding: 0.5% 0.5%; /* 内部パディング */
            background: rgb(30, 30, 30); /* 背景色: 黒系の色に変更 */
            color: rgb(250, 250, 250); /* 文字色: 白 */
            border: 1px solid #555; /* 境界線: 1px 濃いグレーの実線 */
            border-radius: 4px; /* 角丸: 4px */
            /* font-size: 14px; /* フォントサイズ: 14px */
            overflow: auto; /* はみ出し処理: コンテンツがはみ出たらスクロール可能に */
            box-sizing: border-box; /* パディングと境界線を幅と高さに含める */
            min-width: 50px; /* 最小幅: 50px */
            height: 100%; /* 親要素の高さに強制的に合わせる */
            /* min-height: 0; /* Flexboxの子要素による親要素の高さ押し広げを防ぎ、overflowを有効にする */
            display: flex; /* Flexboxコンテナとして設定 */
            flex-direction: column; /* 子要素を縦方向に配置 */
            align-items: center; /* 子要素を水平方向の中央に揃える (画像を中央寄せ) */
		}
		#extension_area img {
            /* プロットエリア内の画像 */
            max-width: 100%; /* 最大幅: 親要素の幅からはみ出さない */
            margin-bottom: 10px; /* 下部マージン */
            /* box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* ボックスシャドウ: x:2px, y:2px, ぼかし:5px, 色:黒(透明度0.2) */
		}

/* ### Vertical Resizer (フッター内の垂直リサイズバー) ### */
		#output_resizer_v {
            /* py_result_area <-> js_result_area のリサイズバー */
            width: 5px; /* 幅: 5px */
            cursor: ew-resize; /* カーソル: 左右リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            height: 100%; /* 高さ: 親要素いっぱいに */
            flex-shrink: 0; /* 縮小を禁止 */
		}
		#output_resizer_v2 {
            /* js_result_area <-> extension_area のリサイズバー */
            width: 5px; /* 幅: 5px */
            cursor: ew-resize; /* カーソル: 左右リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            height: 100%; /* 高さ: 親要素いっぱいに */
            flex-shrink: 0; /* 縮小を禁止 */
		}

/* その他のフッター内の要素 */
		footer div {
            font-size: 0.8em; /* フォントサイズ: 親要素の0.8倍 */
            margin-bottom: 0px; /* 下部マージン: 4px */
		}
		button, input[type="file"] {
            margin-right: 10px; /* 右マージン: 10px */
		}

#main_content { /* エディターとフッターを含むメインコンテンツエリア */
            display: flex; /* Flexboxコンテナとして設定 */
            flex-direction: column; /* 子要素を縦並びにする */
            flex: 1; /* 拡大率: 1 (横幅の残りを全て使う) */
            height: 100%; /* 高さ: 親要素いっぱいに */
            min-width: 0; /* 最小幅: 0 (Flexboxの縮小トラブル防止) */
            overflow: hidden; /* はみ出し防止 */
		}
		#editor { /* エディター本体のコンテナ */
            flex: 1; /* 拡大率: 1 (高さの残りを全て使う（フッター以外の部分）) */
            width: 100%; /* 幅: 100% */
            height: auto; /* 高さ: 自動 */
            min-height: 0; /* 最小高さ: 0 (Flexboxの縮小トラブル防止) */
		}
		#editor.editor-dragover { /* エディターへのドラッグ時の視覚効果 */
            opacity: 0.7; /* 不透明度: 70% */
            border: 3px dashed #007acc; /* 境界線: 3px 青っぽい破線 */
            background-color: #2d2d2d; /* 背景色: 暗いグレー */
		}
		#plot_container {
            flex: 1;
            width: 100%;
            height: 100%;
            min-height: 0;
            display: none; /* 初期状態は非表示 */
            background-color: rgb(30, 30, 30); /* エディタ背景に合わせる */
            flex-direction: column;
            align-items: center; /* 画像を中央揃え */
            overflow-y: auto;    /* 縦スクロール有効 */
            padding: 10px;
            box-sizing: border-box;
		}
		#plot_container img {
            max-width: 95%;      /* 画面からはみ出さないように */
            margin-bottom: 20px; /* 画像間の余白 */
            box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 視認性向上のための影 */
		}
		#preview_container {
            flex: 1;
            width: 100%;
            height: 100%;
            min-height: 0;
            display: none; /* 初期状態は非表示 */
            background-color: white;
            flex-direction: column;
		}
		#preview_frame {
            width: 100%;
            height: 100%;
            border: none;
		}
 		/* ### Spreadsheet Styles ### */
 		#spreadsheet_container {
            flex: 1;
            width: 100%;
            height: 100%;
            min-height: 0;
            display: none;
            background-color: #1e1e1e; /* IDEと同じ背景色 */
            color: #ccc; /* IDEと同じ文字色 */
            overflow: auto;
		}

.spreadsheet_instance {
            display: none;
		}
		.spreadsheet_instance.active_spreadsheet {
            display: block;
		}

/* --- Jspreadsheet ダークテーマ用CSSの上書き --- */
		/* テーブル全体の背景と枠線 */
		.jexcel {
            background-color: #1e1e1e !important;
            border: 1px solid #333 !important;
		}
		/* 通常セルの色と枠線 */
		.jexcel tbody tr td {
            background-color: #1e1e1e !important;
            color: #ccc !important;
            border-bottom: 1px solid #333 !important;
            border-right: 1px solid #333 !important;
		}
		/* 行・列のヘッダー (A, B, C... / 1, 2, 3...) */
		.jexcel thead tr td, 
		.jexcel tbody tr td.jexcel_label {
            background-color: #2d2d2d !important; /* 少し明るいグレーで区別 */
            color: #ccc !important;
            border-bottom: 1px solid #444 !important;
            border-right: 1px solid #444 !important;
		}
		/* 選択中のセル */
		.jexcel tbody tr td.highlight {
            background-color: #062f4f !important; /* VSCode等の選択色に近い深い青 */
            color: #fff !important;
		}
		/* 編集中のセル (ダブルクリック時) */
		.jexcel tbody tr td.editor {
            background-color: #1e1e1e !important;
            color: #fff !important;
		}
        .jexcel tbody tr td.editor input,
		.jexcel tbody tr td.editor textarea {
            color: #ffffff !important;
            background-color: #1e1e1e !important;
		}
		/* ### Tab Bar Styles (タブバーのスタイル) ### */
		#tab_bar_container {
            /* タブバーのコンテナ */
            display: flex; /* Flexboxコンテナとして設定 */
            background-color: #252526; /* 背景色: VSCodeライクなヘッダー色 */
            height: 35px; /* 高さ: 35px */
            overflow-x: auto; /* X軸スクロール: タブが多い場合は水平スクロール */
            flex-shrink: 0; /* 縮小を禁止（高さ固定） */
            align-items: center; /* 子要素を垂直方向の中央に揃える */
            border-bottom: 1px solid #1e1e1e; /* 下境界線: 1px 非常に暗いグレーの実線 */
		}
		/* スクロールバーのスタイル（webkit系） */
		#tab_bar_container::-webkit-scrollbar {
            height: 4px; /* スクロールバーの高さ: 4px */
		}
		#tab_bar_container::-webkit-scrollbar-thumb {
            background: #424242; /* スクロールバーのツマミの色 */
		}
		.tab_item {
            /* 各タブアイテムの基本スタイル */
            display: flex; /* Flexboxコンテナとして設定 */
            align-items: center; /* 子要素を垂直方向の中央に揃える */
            padding: 0 10px; /* 内部パディング (上下0, 左右10px) */
            height: 100%; /* 高さ: 親要素いっぱいに */
            background-color: #2d2d2d; /* 背景色: 暗いグレー */
            color: #969696; /* 文字色: グレー */
            font-size: 13px; /* フォントサイズ: 13px */
            cursor: pointer; /* カーソル: ポインター */
            border-right: 1px solid #252526; /* 右境界線: 1px 非常に暗いグレーの実線 */
            min-width: 80px; /* 最小幅: 80px */
            max-width: 200px; /* 最大幅: 200px */
            user-select: none; /* ユーザーによる選択を禁止 */
		}
		.tab_item:hover {
            background-color: #383838; /* ホバー時の背景色 */
		}
		.tab_item.active_tab {
            /* アクティブなタブ */
            background-color: #1e1e1e; /* 背景色: エディタ背景と同じ色 */
            color: #ffffff; /* 文字色: 白 */
            border-top: 1px solid #007acc; /* 上境界線: 1px 青の実線 (強調) */
		}
		.tab_name {
            /* タブのファイル名 */
            white-space: nowrap; /* テキストの折り返しを禁止 */
            overflow: hidden; /* はみ出した部分を隠す */
            text-overflow: ellipsis; /* はみ出したテキストを三点リーダーで表示 */
            margin-right: 8px; /* 右マージン: 8px */
		}
		.tab_close_btn {
            /* タブを閉じるボタン */
            border-radius: 50%; /* 角丸: 円形 */
            width: 16px; /* 幅: 16px */
            height: 16px; /* 高さ: 16px */
            text-align: center; /* テキストを中央揃え */
            line-height: 14px; /* 行の高さ: 14px */
            font-size: 12px; /* フォントサイズ: 12px */
            color: #ccc; /* 文字色: 薄いグレー */
            margin-left: auto; /* 左マージンを自動にし、要素を右寄せ */
		}
		.tab_close_btn:hover {
            background-color: #444; /* ホバー時の背景色: 濃いグレー */
            color: #fff; /* ホバー時の文字色: 白 */
		}
		.tab_unsaved_indicator {
            /* 未保存インジケーター（通常は非表示） */
            font-size: 18px; /* フォントサイズ: 18px */
            line-height: 10px; /* 行の高さ: 10px */
            margin-left: 5px; /* 左マージン: 5px */
            display: none; /* 要素を非表示 */
		}
		.tab_plus_btn {
            /* 新規タブを追加するボタン */
            display: flex; /* Flexboxコンテナとして設定 */
            align-items: center; /* 子要素を垂直方向の中央に揃える */
            justify-content: center; /* 子要素を水平方向の中央に揃える */
            padding: 0 10px; /* 内部パディング (上下0, 左右10px) */
            height: 100%; /* 高さ: 親要素いっぱいに */
            background-color: transparent; /* 背景色: 透明 */
            color: #969696; /* 文字色: グレー */
            font-size: 16px; /* フォントサイズ: 16px */
            cursor: pointer; /* カーソル: ポインター */
            min-width: 30px; /* 最小幅: 30px */
            border-right: 1px solid #252526; /* 右境界線: 1px 非常に暗いグレーの実線 */
            user-select: none; /* ユーザーによる選択を禁止 */
		}
		.tab_plus_btn:hover {
            background-color: #383838; /* ホバー時の背景色: 暗いグレー */
            color: #fff; /* ホバー時の文字色: 白 */
		}

/* ### Resizer Styles (リサイズバーのスタイル) ### */

/* Sidebar <-> Editor の垂直リサイズバー */
		#sidebar_resizer_v {
            width: 5px; /* 幅: 5px */
            cursor: ew-resize; /* カーソル: 左右リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            height: 100%; /* 高さ: 親要素いっぱいに */
		}

/* Script_Explorer <-> VFS_Explorer の水平リサイズバー */
		#sidebar_resizer_h {
            height: 5px; /* 高さ: 5px */
            cursor: ns-resize; /* カーソル: 上下リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            flex-shrink: 0; /* 縮小を禁止（高さ固定） */
		}

/* VFS_Explorer <-> Outline の水平リサイズバー */
		#sidebar_resizer_h2 {
            height: 5px; /* 高さ: 5px */
            cursor: ns-resize; /* カーソル: 上下リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            flex-shrink: 0; /* 縮小を禁止（高さ固定） */
		}

#footer_resizer_h { /* Editor <-> Footer の水平リサイズバー */
            height: 5px; /* 高さ: 5px */
            cursor: ns-resize; /* カーソル: 上下リサイズカーソル */
            background-color: #444; /* 背景色: 濃いグレー */
            flex-shrink: 0; /* 縮小を禁止（潰れないようにする） */
            width: 100%; /* 幅: 100% */
		}

/* ### Sidebar Layout (サイドバーのレイアウト) ### */
		#sidebar_area_container {
            /* サイドバー全体のコンテナ (Script_Explorer + VFS_Explorer + Outline) */
            width: 280px; /* 初期幅: 280px */
            min-width: 150px; /* 最小幅: 150px */
            background-color: rgb(30, 30, 30); /* 背景色: 暗いグレー */
            display: flex; /* Flexboxコンテナとして設定 */
            flex-direction: column; /* 子要素を縦方向に配置 */
            overflow: hidden; /* はみ出しを隠す */
            flex-shrink: 0; /* 縮小を禁止（サイドバー幅拡大を可能にする） */
		}

/* サイドバー内の各パネルの共通スタイル */
		#script_explorer_container, #vfs_explorer_container, #outline_container {
            padding: 10px; /* 内部パディング */
            box-sizing: border-box; /* パディングを幅と高さに含める */
            overflow-y: auto; /* 縦スクロール可能 */
            flex-shrink: 1; /* 縮小を許可 */
            flex-grow: 1; /* 拡大を許可 */
		}
		#script_explorer_container {
			  flex-basis: 25%; /* 初期基準高さ: 25% (Script Explorerの初期高さの割合) */
		}
		#vfs_explorer_container {
		  	flex-basis: 25%; /* 初期基準高さ: 25% (VFS Explorerの初期高さの割合) */
		}
		#outline_container {
		  	flex-basis: 50%; /* 初期基準高さ: 50% (Outlineの初期高さの割合) */
		}

/* サイドバー内のセクション見出し (h3) */
		#sidebar_area_container h3 {
            margin: 0 0 10px 0; /* マージン (上:0, 左右:0, 下:10px) */
            font-size: 14px; /* フォントサイズ: 14px */
            color: #ccc; /* 文字色: 薄いグレー */
            border-bottom: 1px solid #555; /* 下境界線: 1px 濃いグレーの実線 */
            padding-bottom: 5px; /* 下部パディング: 5px */
		}

/* ### File Explorer Styles (ファイルエクスプローラーのスタイル) ### */
		#script_explorer ul, #vfs_explorer ul { /* ツリー構造のリスト */
            list-style: none; /* リストのマーカーを非表示 */
            padding-left: 15px; /* 左パディング: 15px (インデント) */
            margin: 0; /* マージンをリセット */
		}
		/* li 自体のスタイルは構造用のみに残す */
		.explorer-item {
            /* 以前の padding, cursor, color, hover は item_row へ移動 */
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
		}
		/* テキストとアイコンを含む「行」のスタイル */
		.item_row {
            padding: 4px; /* 内部パディング */
            cursor: pointer; /* カーソル */
            color: #ddd; /* 文字色 */
            display: block; /* ブロック表示で幅いっぱいにする */
            border-radius: 3px; /* 少し角丸に */
		}
		/* ホバー時の背景色は「行」に対して適用 */
		.item_row:hover {
			background-color: #555; /* ホバー時の背景色: 濃いグレー */
		}
		/* クリック選択時のスタイル */
		.item_row.selected_item {
            background-color: #007acc; /* 選択時: 青色 (VSCode風) */
            color: white; /* 文字色を白で強調 */
		}

/* アイコン（:before疑似要素）は item_row に対して適用 */
		.item_row::before {
            font-family: "Consolas", monospace; /* アイコン用のフォント */
            margin-right: 8px; /* 右マージン */
            width: 16px; /* 幅 */
            display: inline-block;
            text-align: center;
		}
		/* フォルダかどうかは親の li (.folder-item) で判断し、アイコンは子の .item_row に出す */
		.folder-item > .item_row::before {
		  	content: "📁"; /* フォルダアイコン */
		}
		.folder-item.expanded > .item_row::before {
		  	content: "📂"; /* 展開されたフォルダアイコン */
		}
		.file-item > .item_row::before {
		  	content: "📄"; /* 一般ファイルアイコン */
		}
		.python-file > .item_row::before {
		  	content: "🐍"; /* Pythonファイルアイコン */
		}

.folder-item.collapsed > ul {
		  	display: none; /* 閉じているフォルダの子要素 (ul) を非表示 */
		}

/* ### Outline Styles (アウトラインのスタイル) ### */
		.outline-item {
            /* アウトラインの基本アイテム */
            padding: 1px; /* 内部パディング: 1px */
            cursor: pointer; /* カーソル: ポインター */
            color: #fff; /* 文字色: 白 */
            display: flex; /* Flexboxコンテナとして設定 */
            align-items: center; /* 子要素を垂直方向の中央に揃える */
            font-size: 14px; /* フォントサイズ: 14px */
		}
		.outline-item:hover {
			background-color: rgb(150, 150, 150); /* ホバー時の背景色: 中程度のグレー */
		}
		.class-item {
            /* クラス定義のアイテム */
            color: rgb(30, 170, 30); /* 文字色: 緑系 */
            font-size: 16px; /* フォントサイズ: 16px */
		}
		.function-item {
            /* 関数/メソッド定義のアイテム */
            color: rgb(30, 120, 170); /* 文字色: 青系 */
            padding-left: 15px; /* 左パディング: 15px (クラスよりインデント) */
            font-size: 16px; /* フォントサイズ: 16px */
		}

/* ### Button Styles (各種ボタンのスタイル) ### */
		.sidebar_button_css {
            /* サイドバー内のボタンの共通スタイル */
            display: inline-flex; /* inline-block から変更: SVGを中央配置しやすくするため */
            width: 30px; /* 幅: 30px */
            height: 20px; /* 高さ: 20px */
            border-radius: 5%; /* 角丸: 5% */
            font-size: 1em; /* フォントサイズ: 親要素と同じ */
            margin-right: 3px; /* 右マージン: 3px */
            text-align: center; /* テキストを中央揃え */
            align-items: center;  /* 垂直中央 */
            justify-content: center; /* 水平中央 */
            cursor: pointer; /* カーソル: ポインター */
            padding: 0px 0px; /* 内部パディング: 0 */
            background: rgba(30, 30, 30, 1); /* 背景色: 暗いグレー (不透明) */
            color: #ccc; /* 文字色: 薄いグレー */
            line-height: 1em; /* 行の高さ: 親要素と同じ */
            opacity: 1; /* 不透明度: 100% */
            vertical-align: middle; /* 垂直方向の中央揃え */
            transition: .1s; /* トランジション: 0.1秒 */
		}
		.sidebar_button_css:hover {
            box-shadow: none; /* ホバー時のボックスシャドウを解除 */
            opacity: 1; /* ホバー時の不透明度: 100% */
		}

/* VFSエリアのドラッグオーバー時の視覚効果 */
		#vfs_explorer_container.dragover {
            background-color: #444; /* 背景を少し明るく */
            border: 2px dashed #888; /* 境界線: 2px 濃いグレーの破線を表示 */
            opacity: 0.8; /* 不透明度: 80% */
		}
		/* VFS内部移動時のドロップターゲット強調 */
		.vfs_drop_target {
            background-color: #2a4d69 !important; /* 背景色: 青っぽく強調 (最優先) */
            border: 1px dashed #63ace5; /* 境界線: 1px 明るい青の破線 */
            color: white; /* 文字色: 白 */
		}

.sidebar_button_container {
            /* サイドバーボタンのコンテナ（横並び用） */
            display: flex; /* Flexboxコンテナとして設定 */
            gap: 0px; /* アイテム間の隙間: 0px */
		}
		/* ### Sidebar Toggle Style (サイドバー切り替え) ### */
		/* bodyタグに "sidebar-hidden" クラスが付いた時のスタイル */
		body.sidebar-hidden #sidebar_area_container {
            display: none; /* サイドバーを非表示 */
		}
        body.sidebar-hidden #sidebar_resizer_v {
            display: none; /* サイドバー横のリサイズバーも非表示 */
		}

/* ### Loading Overlay (ロード中画面) ### */
		#loading_overlay {
            position: fixed; /* 配置: 画面に固定 */
            top: 0; /* 上端から: 0 */
            left: 0; /* 左端から: 0 */
            width: 100%; /* 幅: 100% */
            height: 100%; /* 高さ: 100% */
            background-color: rgba(0, 0, 0, 0.5); /* 背景色: 半透明の黒背景 */
            z-index: 9999; /* Z軸の深さ: 最前面に表示 (ヘッダーより下) */
            display: none; /* デフォルトは非表示 */
            justify-content: center; /* 水平方向の中央揃え */
            align-items: center; /* 垂直方向の中央揃え */
            flex-direction: column; /* 子要素を縦方向に配置 */
            color: white; /* 文字色: 白 */
            font-size: 1.2em; /* フォントサイズ: 親要素の1.2倍 */
		}
		.spinner {
            /* 回転するローディングアニメーションの円 */
            border: 8px solid #f3f3f3; /* 境界線: 8px 薄いグレーの実線 */
            border-top: 8px solid #3498db; /* 境界線の上部: 8px 青色 (回転する部分) */
            border-radius: 50%; /* 形状: 円形 */
            width: 60px; /* 幅: 60px */
            height: 60px; /* 高さ: 60px */
            animation: spin 1s linear infinite; /* アニメーション: spin を 1秒かけて線形に無限に繰り返す */
            margin-bottom: 15px; /* 下部マージン: 15px */
		}
        @keyframes spin {
            /* スピナーの回転アニメーションの定義 */
            0% { transform: rotate(0deg); } /* 開始時: 0度回転 */
            100% { transform: rotate(360deg); } /* 終了時: 360度回転 */
		}
    </style>

</head>
	<body>
    <div id="loading_overlay">
		<div class="spinner"></div>
		<div id="loading_text">Loading...</div>
    </div>
    <header>
		<div id="buttons">
			<input type="file" id="input_script_folder" webkitdirectory directory multiple style="display: none;">
			<input type="file" id="input_vfs_folder" webkitdirectory directory multiple style="display: none;">
		</div>
    </header>
    <div id="container">
		<div id="sidebar_area_container">
			<div id="script_explorer_container">
				<h3>
					<div class="sidebar_button_container">
						
						<button id="script_mount" class="sidebar_button_css" title="Script_Folder_Mount" style="display: none;" disabled>
							<svg viewBox="0 0 512 512" width="16" height="16" fill="#ccc" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
								<g>
									<path class="st0" d="M443.291,100.34c-4.563-23.391-16-45.938-34.078-64.016C397.15,24.293,383.134,15.137,368.149,9.09
										c-22.406-9.094-46.859-11.344-70.297-6.844c-23.406,4.563-45.953,16-64.031,34.078l-94.125,94.156
										c-12.063,12.047-21.172,26.094-27.266,41.016c-9.078,22.453-11.328,46.859-6.781,70.313c4.484,23.406,15.938,45.938,34.047,64.016
										c12.031,12.078,26.078,21.203,41.047,27.234c22.438,9.141,46.844,11.375,70.281,6.844c23.422-4.516,45.969-15.953,64.047-34.078
										l7.063-7.016c0.844-6.469,0-13.234-2.422-19.234c-1.906-4.625-4.672-8.859-8.344-12.469c-5.422-5.469-12.031-8.922-19.516-10.438
										c-3.984-0.75-8.141-0.859-12.219-0.344l-7.031,7.078c-6.313,6.25-13.453,10.906-21.125,14.078
										c-11.531,4.656-24.234,5.859-36.328,3.453c-12.156-2.328-23.563-8.094-32.984-17.531c-6.328-6.313-10.938-13.484-14.078-21.188
										c-4.656-11.469-5.828-24.203-3.516-36.297c2.406-12.109,8.125-23.516,17.594-33.016l94.141-94.125
										c6.281-6.297,13.453-10.953,21.125-14.031c11.5-4.703,24.219-5.875,36.313-3.516c12.141,2.359,23.531,8.141,33,17.547
										c6.313,6.313,10.938,13.5,14.078,21.172c4.642,11.484,5.845,24.203,3.485,36.297c-2.298,11.859-7.876,23-16.923,32.328
										c8.328,5.547,16.141,11.938,23.313,19.094c7.234,7.203,13.594,15.031,19.109,23.375c11.75-11.891,20.688-25.672,26.641-40.391
										C445.525,148.199,447.807,123.793,443.291,100.34z">
									</path>
									<path class="st0" d="M372.259,206.168c-12.031-12.047-26.047-21.188-41.016-27.234c-22.406-9.078-46.875-11.328-70.313-6.797
										c-23.406,4.5-45.938,15.938-64.016,34.031l-7.078,7.063c-0.797,6.484,0,13.188,2.469,19.203c1.859,4.641,4.672,8.875,8.344,12.531
										c5.406,5.375,12,8.906,19.5,10.344c3.953,0.797,8.156,0.891,12.188,0.359l7.047-7.031c6.297-6.328,13.438-10.953,21.141-14.063
										c11.5-4.656,24.203-5.844,36.313-3.547c12.125,2.391,23.516,8.172,33,17.609c6.297,6.297,10.922,13.422,14.031,21.078
										c4.688,11.563,5.844,24.266,3.531,36.359c-2.359,12.156-8.125,23.547-17.563,33.016l-94.156,94.109
										c-6.281,6.344-13.453,10.953-21.141,14.078c-11.516,4.641-24.203,5.828-36.313,3.516c-12.141-2.391-23.531-8.156-33-17.594
										c-6.297-6.266-10.922-13.422-14.031-21.094c-4.688-11.563-5.891-24.25-3.531-36.328c2.344-11.875,7.891-23.016,16.953-32.344
										c-8.359-5.5-16.141-11.906-23.344-19.109l-0.078-0.047c-7.188-7.172-13.516-14.984-19.031-23.297
										c-11.75,11.891-20.688,25.688-26.625,40.359c-9.094,22.438-11.344,46.906-6.813,70.313c4.516,23.469,15.953,45.984,34.063,64.031
										c12.047,12.063,26.063,21.156,41.031,27.266c22.406,9.063,46.859,11.313,70.297,6.781s45.953-15.938,64.031-34.047l94.109-94.125
										c12.095-12.063,21.22-26.109,27.267-41.031c9.094-22.453,11.344-46.906,6.813-70.328C401.838,246.762,390.4,224.23,372.259,206.168z">
									</path>
								</g>
							</svg>
						</button>
						
						<button id="script_upload" class="sidebar_button_css" title="Script_Folder_Upload">
							<svg viewBox="0 0 48 48" width="16" height="16" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
								<g>
									<polyline points="6 34.83 6 41.83 42 41.83 42 34.83"></polyline>
									<line x1="24" y1="32.82" x2="24" y2="18.82"></line>
									<line x1="24" y1="9" x2="13" y2="20"></line>
									<line x1="24" y1="9" x2="35" y2="20"></line>
								</g>
							</svg>
						</button>
						
						<button id="refresh_script_explorer" class="sidebar_button_css" title="Refresh_Script">
							<svg viewBox="0 0 512 512" width="16" height="16" fill="currentColor">
								<g>
									<path class="st0" d="M499.795,195.596c-11.804-27.884-31.438-51.515-56.186-68.24c-24.717-16.724-54.739-26.526-86.773-26.518
                                        h-44.222l10.195-24.234c1.335-3.176,0.531-6.834-1.994-9.158c-2.541-2.316-6.255-2.798-9.295-1.19l-108.932,57.578
                                        c-2.67,1.399-4.342,4.173-4.326,7.18c0,3.015,1.656,5.797,4.326,7.189l108.932,57.585c3.023,1.608,6.738,1.126,9.279-1.181
                                        c2.541-2.324,3.344-5.991,2.01-9.158l-10.211-24.266h44.238c13.187,0.008,25.569,2.654,36.906,7.438
                                        c16.982,7.172,31.518,19.24,41.746,34.389c10.228,15.172,16.161,33.248,16.177,52.994c-0.016,13.17-2.653,25.569-7.445,36.89
                                        c-7.172,16.982-19.232,31.518-34.381,41.746c-15.18,10.228-33.255,16.161-53.003,16.177v60.344c21.34,0,41.827-4.342,60.416-12.206
                                        c27.869-11.803,51.508-31.438,68.231-56.178c16.725-24.732,26.534-54.748,26.518-86.773
                                        C512,234.665,507.658,214.178,499.795,195.596z">
                                    </path>
									<path class="st0" d="M309.413,373.796l-108.932-57.585c-3.023-1.608-6.738-1.126-9.278,1.182c-2.541,2.324-3.345,5.998-2.01,9.158
                                        l10.211,24.265h-44.238c-13.187-0.008-25.569-2.653-36.906-7.437c-16.982-7.172-31.518-19.24-41.746-34.389
                                        c-10.228-15.164-16.161-33.247-16.178-52.986c0.016-13.178,2.654-25.576,7.445-36.897c7.172-16.982,19.234-31.519,34.381-41.747
                                        c15.18-10.227,33.256-16.16,53.003-16.177v-60.344c-21.339,0-41.827,4.342-60.416,12.205
                                        c-27.869,11.804-51.508,31.439-68.231,56.187C9.793,193.956-0.016,223.971,0,256.004c0,21.34,4.342,41.818,12.205,60.4
                                        c11.804,27.885,31.438,51.516,56.187,68.24c24.716,16.724,54.74,26.526,86.773,26.518h44.222l-10.195,24.234
                                        c-1.335,3.176-0.53,6.842,1.994,9.158c2.541,2.315,6.256,2.798,9.295,1.19l108.932-57.57c2.669-1.407,4.342-4.181,4.326-7.188
                                        C313.739,377.97,312.082,375.188,309.413,373.796z">
                                    </path>
								</g>
							</svg>
						</button>Script_Explorer
					</div>
				</h3>
				<div id="script_explorer"></div>
			</div>
			<div id="sidebar_resizer_h"></div>
			<div id="vfs_explorer_container">
				<h3>
					<div class="sidebar_button_container">
						
						<button id="vfs_upload" class="sidebar_button_css" title="Folder_Upload">
							<svg viewBox="0 0 48 48" width="16" height="16" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
								<g>
									<polyline points="6 34.83 6 41.83 42 41.83 42 34.83"></polyline>
									<line x1="24" y1="32.82" x2="24" y2="18.82"></line>
									<line x1="24" y1="9" x2="13" y2="20"></line>
									<line x1="24" y1="9" x2="35" y2="20"></line>
								</g>
							</svg>
						</button>
						
						<button id="refresh_vfs_explorer" class="sidebar_button_css" title="Refresh_VFS">
							<svg viewBox="0 0 512 512" width="16" height="16" fill="currentColor">
								<g>
									<path class="st0" d="M499.795,195.596c-11.804-27.884-31.438-51.515-56.186-68.24c-24.717-16.724-54.739-26.526-86.773-26.518
										h-44.222l10.195-24.234c1.335-3.176,0.531-6.834-1.994-9.158c-2.541-2.316-6.255-2.798-9.295-1.19l-108.932,57.578
										c-2.67,1.399-4.342,4.173-4.326,7.18c0,3.015,1.656,5.797,4.326,7.189l108.932,57.585c3.023,1.608,6.738,1.126,9.279-1.181
										c2.541-2.324,3.344-5.991,2.01-9.158l-10.211-24.266h44.238c13.187,0.008,25.569,2.654,36.906,7.438
										c16.982,7.172,31.518,19.24,41.746,34.389c10.228,15.172,16.161,33.248,16.177,52.994c-0.016,13.17-2.653,25.569-7.445,36.89
										c-7.172,16.982-19.232,31.518-34.381,41.746c-15.18,10.228-33.255,16.161-53.003,16.177v60.344c21.34,0,41.827-4.342,60.416-12.206
										c27.869-11.803,51.508-31.438,68.231-56.178c16.725-24.732,26.534-54.748,26.518-86.773
										C512,234.665,507.658,214.178,499.795,195.596z">
									</path>
									<path class="st0" d="M309.413,373.796l-108.932-57.585c-3.023-1.608-6.738-1.126-9.278,1.182c-2.541,2.324-3.345,5.998-2.01,9.158
										l10.211,24.265h-44.238c-13.187-0.008-25.569-2.653-36.906-7.437c-16.982-7.172-31.518-19.24-41.746-34.389
										c-10.228-15.164-16.161-33.247-16.178-52.986c0.016-13.178,2.654-25.576,7.445-36.897c7.172-16.982,19.234-31.519,34.381-41.747
										c15.18-10.227,33.256-16.16,53.003-16.177v-60.344c-21.339,0-41.827,4.342-60.416,12.205
										c-27.869,11.804-51.508,31.439-68.231,56.187C9.793,193.956-0.016,223.971,0,256.004c0,21.34,4.342,41.818,12.205,60.4
										c11.804,27.885,31.438,51.516,56.187,68.24c24.716,16.724,54.74,26.526,86.773,26.518h44.222l-10.195,24.234
										c-1.335,3.176-0.53,6.842,1.994,9.158c2.541,2.315,6.256,2.798,9.295,1.19l108.932-57.57c2.669-1.407,4.342-4.181,4.326-7.188
										C313.739,377.97,312.082,375.188,309.413,373.796z">
									</path>
								</g>
							</svg>
						</button>
						
						<button id="reset_vfs_explorer" class="sidebar_button_css" title="Reset_VFS">
							<svg viewBox="0 0 512 512" width="12" height="12" fill="currentColor">
								<g>
									<polygon class="st0" points="512,89.75 422.256,0.005 256.004,166.256 89.754,0.005 0,89.75 166.255,256 0,422.25 89.754,511.995 
									256.004,345.745 422.26,511.995 512,422.25 345.744,256"></polygon>
								</g>
							</svg>
						</button>VFS_Explorer
					</div>
				</h3>
				<div id="vfs_explorer"></div>
			</div>
			<div id="sidebar_resizer_h2"></div>
			<div id="outline_container">
				<h3>Outline</h3>
				<div id="code_outline"></div>
			</div>
		</div>
		<div id="sidebar_resizer_v"></div>
		<div id="main_content">
			<div id="tab_bar_container"></div>
			<div id="editor"></div>
			<div id="plot_container"></div>
			<div id="preview_container">
				<iframe
					id="preview_frame"
					sandbox="allow-scripts allow-forms allow-modals allow-popups allow-presentation"
					allow="serial; file-system-write; clipboard-read; clipboard-write;"
					style="width: 100%; height: 100%; border: none; background-color: white;">
				</iframe>
			</div>
            <div id="spreadsheet_container"></div>
			<div id="footer_resizer_h"></div>
			<footer>
				<div id="footer_area_container">
					<textarea id="py_result_area" name="py_result_area"></textarea>
					<div id="output_resizer_v"></div>
					<textarea id="js_result_area" name="js_result_area"></textarea>
					<div id="output_resizer_v2"></div>
					<div id="extension_area"></div>
				</div>
			</footer>
		</div>
    </div>

// --------------- ### editor_element
        const editor_element = document.getElementById("editor");
        const preview_container_element = document.getElementById("preview_container");
        const preview_frame_element = document.getElementById("preview_frame");
        const plot_container_element = document.getElementById("plot_container");
        const spreadsheet_container_element = document.getElementById("spreadsheet_container");
        const tab_bar_element = document.getElementById("tab_bar_container");
        // --------------- ### footer_element
        const footer_area_container_element = document.getElementById("footer_area_container"); // (py_result_area & js_result_area & extension_area)
        const py_result_area_element = document.getElementById("py_result_area");
        const js_result_area_element = document.getElementById("js_result_area");
        const extension_area_element = document.getElementById("extension_area");
        // --------------- ### sidebar_element
        const sidebar_area_container_element = document.getElementById("sidebar_area_container"); // (script_exp & vfs_exp & outline)
        const script_container_element = document.getElementById("script_explorer_container");
        const vfs_container_element = document.getElementById("vfs_explorer_container");
        const outline_container_element = document.getElementById("outline_container");
        const outline_content_element = document.getElementById("code_outline");

// --------------- ### footer_resizer_element
        const footer_resizer_h_element = document.getElementById("footer_resizer_h"); // (editor <-> footer)
        const footer_resizer_v_element = document.getElementById("output_resizer_v"); // (py_result_area <-> js_result_area)
        const footer_resizer_v2_element = document.getElementById("output_resizer_v2"); // (js_result_area <-> extension_area)
        // --------------- ### sidebar_resizer_element
        const sidebar_resizer_v_element = document.getElementById("sidebar_resizer_v"); // (sidebar <-> (editor & footer))
        const sidebar_resizer_h_element = document.getElementById("sidebar_resizer_h"); // (Script_Explorer <-> VFS_Explorer)
        const sidebar_resizer_h2_element = document.getElementById("sidebar_resizer_h2"); // (VFS_Explorer <-> outline)

// --------------- ### sidebar_button_element
        const script_mount_button = document.getElementById("script_mount");
        const script_upload_button = document.getElementById("script_upload");
        const refresh_script_button = document.getElementById("refresh_script_explorer");
        const vfs_upload_button = document.getElementById("vfs_upload");
        const refresh_vfs_button = document.getElementById("refresh_vfs_explorer");
        const reset_vfs_button = document.getElementById("reset_vfs_explorer");

// --------------- ### tree_element
        const script_explorer_element = document.getElementById("script_explorer"); // スクリプトツリー
        const vfs_explorer_element = document.getElementById("vfs_explorer"); // VFSツリー

// --------------- ### tab_system_variables
        let tabs_data = {}; // タブ情報を管理するオブジェクト { tab_id: { model: ..., name: ... } }
        let active_tab_id = null; // 現在アクティブなタブID
        let tab_counter = 0; // 一意なID生成用
        let tab_plus_button_element = null; // タブ追加ボタンの要素を保持
        let dragging_tab_element = null; // 現在ドラッグ中のタブ要素
        let spreadsheet_instances = {}; // CSVタブごとのスプレッドシートインスタンスを保持

// --------------- ### ローカルフォルダマウント関連
        let mounted_dir_handle = null; // 現在マウントされているDirectoryHandle
        let is_mounted = false; // マウント状態を追跡
        const MOUNT_PATH = "/mnt/vfs_root"; // PyodideのVFS内でマウントするパス

// --------------- ### 通信ブリッジ用変数
        const pending_host_requests = {}; // 応答待ちのPromiseを管理 { req_id: {resolve, reject} }

// --------------- ### プレビューからのメッセージを受け取るPythonのコールバック関数
        let py_message_callback = null;
        // Python側からコールバック関数を登録するための関数
        function js_register_python_callback(callback) {
            py_message_callback = callback;
            console.log("Python callback registered.")
            js_result_area.value = "Python callback registered.";
        }

/* #################### ↑↑↑ script_global_variables ↑↑↑ #################### */
    </script>

let initial_code = `<?= web_initial_code ?>`;

if (initial_code.includes("web_initial_code")) {

initial_code = `
# Sample
# ========== import ==========
import js
import micropip
import asyncio

# ========== def ==========
async def main_async_def():
	print("# 外部ライブラリのインストール_開始 #")
	await micropip.install("numpy")
	print("# 外部ライブラリのインストール_終了 #")
	import numpy as np

a = 0
	for i in range(1000):
		r = np.random.randint(1, 9)
		a = a + r
		if i % 200 == 0:
		    print(a)
	print("# TEST_COMPLETE #")

# ========== Main ==========
# Python から JavaScript の変数を扱えるようにする
if "JsProxy" in str(type(js_map_global_data)):
	js_map_global_data = js_map_global_data.to_py()

await main_async_def()
`;
        }

/* #################### ↑↑↑ script_initial_code ↑↑↑ #################### */
    </script>

//------------------------------------------------------------------------ ### post_message (ide_frame_to_host_frame) 送信 ###
        function js_post_message(cmd, target = "host", origin = "*", obj = {}, args = []) {
            return new Promise((resolve, reject) => {
                console.log("# called_js_post_message :", cmd)

if (target == "host") { // host_frame に post_message
                    const req_id = "req_" + Date.now() + "_" + Math.random().toString(36).substr(2, 9); // 一意のリクエストIDを生成
                    if (cmd == "fetch_post" || cmd == "serial_write") { // 応答待ちリストに登録
                        pending_host_requests[req_id] = { resolve, reject };
                    }
                    // host_frameウィンドウへメッセージ送信
                    post_message_data = { "cmd": cmd, "req_id": req_id, "obj": obj, "args": args }
                    window.parent.postMessage(post_message_data, origin);

} else if (target == "preview") { // preview_frame に post_message
                    const frame = document.getElementById("preview_frame");
                    if (frame && frame.contentWindow) {
                        // データはJSONシリアライズ可能なオブジェクトである必要があります
                        // "*" 指定により、サンドボックス化された(null originの)iframeにも送信可能
                        frame.contentWindow.postMessage(obj, origin);
                        // console.log("Sent to preview:", obj);
                        js_result_area.value = JSON.stringify(obj, null, 2);
                    }
                }
            });
        }

//------------------------------------------------------------------------ ### js_injector ###
        // JavaScriptコード文字列を <script> タグとして動的に挿入・実行
        // Web Serial API 等、動的に機能を追加したい場合に有効
        // 野心的だが、ウェブページ自体を改変する危険な機能でもある
        //*
        function js_inject_script(code_str) {
            try {
                if (dev_flag === true) {
                    const script = document.createElement("script");
                    script.textContent = code_str;
                    document.body.appendChild(script); // bodyの末尾に追加することで即時実行される

console.log("Injected JS code successfully.");
                    //js_result_area_element.value = "Injected JS code successfully.\n" + js_result_area_element.value;
                } else {
                    js_result_area_element.value = "開発環境以外で「js_inject_script()」は許可されていません";
                }
            } catch (e) {
                console.error("JS Injection Error:", e);
                js_result_area_element.value = "JS Injection Error: " + e.message + "\n" + js_result_area_element.value;
            }
        }
        //*/

//------------------------------------------------------------------------ ### js_print ###
        function js_print(data) {
            if (py_result_area_element.value.length > max_print_len + 1000) { // バッファを持たせて頻度を下げる
                py_result_area_element.value = "[...Logs truncated...]\n" + py_result_area_element.value.substring(py_result_area_element.value.length - max_print_len);
            }
            py_result_area_element.setRangeText(data, py_result_area_element.value.length, py_result_area_element.value.length, "end"); // 末尾に追加
            py_result_area_element.scrollTop = py_result_area_element.scrollHeight; // 自動スクロール
        }

//------------------------------------------------------------------------ ### js_print_clear ###
        function js_print_clear() {
            py_result_area_element.value = "";
        }

//------------------------------------------------------------------------ ### JS_Plot_Display ###
        function js_add_plot_image_old(base64_str) { // Base64画像を受け取って表示する関数
            const img = document.createElement("img");
            img.src = "data:image/png;base64," + base64_str;
            extension_area_element.appendChild(img); // 新しい画像を先頭に追加するか末尾に追加するかはお好みで（ここは末尾に追加）

// メモリ対策: 画像の最大表示枚数を制限する (例: 20枚)
            const max_plots = 20;
            while (extension_area_element.children.length > max_plots) {
                // 古い画像（最初の子要素）から削除してメモリを解放
                extension_area_element.removeChild(extension_area_element.firstChild);
            }

extension_area_element.scrollTop = extension_area_element.scrollHeight; // 自動スクロール
            //console.log("Plot added.");
        }

function js_clear_extension_area_old() { // グラフエリアをクリアする関数（必要に応じてPythonから呼ぶ）
            extension_area_element.innerHTML = "";
        }

//------------------------------------------------------------------------ ### JS_Plot_Display (New Tab Version) ###
        function js_add_plot_image(base64_str) {
            const PLOT_TAB_NAME = "Matplotlib_Plots";

// 1. プロット用タブが既に存在するか確認
            let target_tab_id = null;
            for (const id in tabs_data) {
                if (tabs_data[id].name === PLOT_TAB_NAME) {
                    target_tab_id = id;
                    break;
                }
            }

// 2. 存在しなければ新規作成 (type="plot"として作成)
            if (!target_tab_id) {
                // 第3引数に "plot" を渡して専用タブとして開く
                open_tab(PLOT_TAB_NAME, "", "plot");

// open_tab内部で active_tab_id が更新されているはずだが、IDを取得し直す
                for (const id in tabs_data) {
                    if (tabs_data[id].name === PLOT_TAB_NAME) {
                        target_tab_id = id;
                        break;
                    }
                }
            }

// 3. プロットタブをアクティブにする
            if (active_tab_id !== target_tab_id) {
                activate_tab(target_tab_id);
            }

// 4. 画像要素を作成
            const img = document.createElement("img");
            img.src = "data:image/png;base64," + base64_str;

// 5. コンテナに追加
            // activate_tab 済みなので plot_container_element が表示されている前提
            plot_container_element.appendChild(img);

// 6. メモリ/表示枚数制限 (例: 最新20枚のみ保持)
            const max_plots = 20;
            while (plot_container_element.children.length > max_plots) {
                plot_container_element.removeChild(plot_container_element.firstChild);
            }

// 7. 最下部へスクロール
            plot_container_element.scrollTop = plot_container_element.scrollHeight;

// 念のためフッターのjs_resultにもログを出す
            // js_result_area_element.value = "Plot added to 'Matplotlib_Plots' tab.\n" + js_result_area_element.value;
        }

// グラフクリア用関数もコンテナを対象にするよう変更
        function js_clear_plot_area() {
            if (plot_container_element) {
                plot_container_element.innerHTML = "";
            }
        }

//------------------------------------------------------------------------ ### js_encrypt_zipper ###
        /**
         * Pyodide VFS の内容をZIPとしてダウンロードします。
         * パスワードがある場合は暗号化、ない場合は標準ZIPとなります。
         * Pythonおよび右クリックメニューの両方から利用されます。
         */
        async function js_encrypt_zipper(path, save_name, pass_word, crypto_type) {

const FORBIDDEN_EXTENSIONS = new Set([
                ".exe", ".scr", ".bat", ".cmd", ".sh", ".ps1", ".vbs",
                ".js", ".jar", ".com", ".msi", ".wsf", ".scf", ".lnk"
            ]);

js_result_area_element.value = `Starting zip for: ${path}, Filename: ${save_name}, Pass: ${pass_word ? "Yes" : "No"}`;
            console.log(`Starting zip for: ${path}, Filename: ${save_name}, Pass: ${pass_word ? "Yes" : "No"}`);

if (!pyodide_js || !pyodide_js.FS) {
                const msg = "Error: Pyodide FS is not initialized.";
                console.error(msg);
                js_result_area_element.value = msg;
                return;
            }
            if (typeof zip === "undefined") {
                const msg = "Error: zip.js is not loaded.";
                console.error(msg);
                js_result_area_element.value = msg;
                return;
            }

// 危険拡張子チェック
            function validate_vfs_content(vfs_path) {
                let entries;
                try {
                    entries = pyodide_js.FS.readdir(vfs_path);
                } catch (e) {
                    console.warn(`Skipping validation for ${vfs_path}: ${e.message}`);
                    return true; // 読み込めない場所はスキップ（またはfalseで厳格にする）
                }

for (const entry of entries) {
                    if (entry === "." || entry === "..") continue;

if (pyodide_js.FS.isDir(stat.mode)) {
                        // ディレクトリなら再帰チェック
                        if (!validate_vfs_content(full_vfs_path)) return false;
                    } else if (pyodide_js.FS.isFile(stat.mode)) {
                        // ファイルなら拡張子チェック
                        // ファイル名の最後のドット以降を取得して小文字化
                        const dotIndex = entry.lastIndexOf(".");
                        if (dotIndex !== -1) {
                            const ext = entry.substring(dotIndex).toLowerCase();
                            if (FORBIDDEN_EXTENSIONS.has(ext)) {
                                const warning = `Security Alert: Blocked forbidden file extension "${ext}" in file: ${full_vfs_path}`;
                                console.error(warning);
                                js_result_area_element.value = warning;
                                alert(`【セキュリティ警告】\n危険な形式のファイルが含まれているため、ZIP作成を中止しました。\n\n検出ファイル: ${entry}`);
                                return false; // 検知
                            }
                        }
                    }
                }
                return true; // 問題なし
            }
            if (!validate_vfs_content(path)) {
                return; // ブラックリストに抵触したため終了
            }

let zip_writer = null;
            try {
                // 1. Writerの準備
                const blob_writer = new zip.BlobWriter("application/zip");
                // コンストラクタではオプションを指定せず、ファイル追加時に指定する方式に変更
                zip_writer = new zip.ZipWriter(blob_writer);

// 2. ファイル追加時のオプション設定を作成
                const file_options = {};
                if (pass_word) {
                    file_options.password = pass_word;
                    if (crypto_type) {
                        file_options.zipCrypto = true; // Legacy ZipCrypto
                    } else {
                        file_options.encryptionStrength = 3; // AES-256
                    }
                }

// 3. 再帰処理関数
                async function add_files_to_zip(vfs_path, path_in_zip) {
                    let entries;
                    try {
                        entries = pyodide_js.FS.readdir(vfs_path);
                    } catch (e) {
                        console.warn(`Skipping ${vfs_path}: ${e.message}`);
                        return;
                    }

for (const entry of entries) {
                        if (entry === "." || entry === "..") continue;

const full_vfs_path = `${vfs_path}/${entry}`;
                        const full_zip_path = path_in_zip ? `${path_in_zip}/${entry}` : entry;

let stat;
                        try {
                            stat = pyodide_js.FS.stat(full_vfs_path);
                        } catch (e) { continue; }

if (pyodide_js.FS.isDir(stat.mode)) {
                            // ディレクトリ: パスワード不要
                            await zip_writer.add(full_zip_path + "/", null, { directory: true });
                            await add_files_to_zip(full_vfs_path, full_zip_path);

} else if (pyodide_js.FS.isFile(stat.mode)) {
                            // ファイル: パスワード設定(file_options)を適用
                            // パスワードがnullの場合は空オブジェクトが渡され、通常ZIPになる
                            const file_data = pyodide_js.FS.readFile(full_vfs_path);
                            await zip_writer.add(full_zip_path, new zip.Uint8ArrayReader(file_data), file_options);
                        }
                    }
                }

// 4. 実行
                await add_files_to_zip(path, "");

// 5. 終了・ダウンロード
                const zip_blob = await zip_writer.close();
                zip_writer = null;
                js_download_file(zip_blob, save_name, "application/zip");

js_result_area_element.value = `Zip created: ${save_name}`;

} catch (err) {
                console.error("Zip Error:", err);
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`ZIP作成エラー:\n${err.message}`);

} finally {
                if (zip_writer) { // エラー発生時など、まだ閉じられていない場合のみ実行
                    try {
                        await zip_writer.close();
                        js_result_area_element.value = "zip_writer closed via finally block.";
                        console.log("zip_writer closed via finally block.");
                    } catch (e) {
                        js_result_area_element.value = "Error closing zip_writer in finally:" + e;
                        console.error("Error closing zip_writer in finally:", e);
                    }
                }
            }
        }

//------------------------------------------------------------------------ ### js_decrypt_zipper_vfs ###
        /**
         * VFS上の暗号化ZIPを読み込み、パスワードを解除した標準ZIPに変換してダウンロードする
         * @param {string} input_vfs_path - VFS上の暗号化ZIPのパス (例: "/mnt/secret.zip")
         * @param {string} output_zip_name - ダウンロードするファイル名 (例: "decrypted.zip")
         * @param {string} password - 解凍用パスワード
         */
        async function js_decrypt_zipper_vfs(input_vfs_path, output_zip_name, password) {
            js_result_area_element.value = `Reading ${input_vfs_path} from VFS...`;

let zip_reader = null;
            let zip_writer = null;
            try {
                // 1. VFSから暗号化ZIPファイルをバイナリとして読み込む
                if (!pyodide_js.FS.analyzePath(input_vfs_path).exists) {
                    throw new Error(`File not found in VFS: ${input_vfs_path}`);
                }
                const file_data = pyodide_js.FS.readFile(input_vfs_path);

// 2. 読み込み用(Reader)と書き込み用(Writer)の準備
                // Uint8ArrayReaderを使うことでメモリコピーを最小限に抑えます
                zip_reader = new zip.ZipReader(new zip.Uint8ArrayReader(file_data));
                const blobWriter = new zip.BlobWriter("application/zip");
                zip_writer = new zip.ZipWriter(blobWriter); // オプションなし＝標準ZIP(非暗号化)

// 3. エントリ一覧取得
                const entries = await zip_reader.getEntries();
                js_result_area_element.value = `Decrypting ${entries.length} files...`;

// 4. ストリーミング処理（1ファイルずつ 復号 -> 再圧縮）
                let count = 0;
                for (const entry of entries) {
                    if (entry.directory) {
                        await zip_writer.add(entry.filename, null, { directory: true });
                        continue;
                    }

// 進捗表示（重い処理なので重要）
                    if (count % 5 === 0) {
                        js_result_area_element.value = `Processing: ${entry.filename} ...`;
                    }

// A. 復号してデータを取り出す (パスワード使用)
                    // ここで展開されたデータは一時メモリにしか乗りません
                    const decrypted_data = await entry.getData(new zip.Uint8ArrayWriter(), {
                        password: password
                    });

// B. 標準ZIPに書き込む (パスワードなし)
                    await zip_writer.add(entry.filename, new zip.Uint8ArrayReader(decrypted_data));

count++;
                }

// 5. 終了処理 & ダウンロード
                js_result_area_element.value = "Finalizing ZIP...";
                await zip_reader.close();
                const out_blob = await zip_writer.close();

js_result_area_element.value = `Decrypted ZIP created. Size: ${out_blob.size}`;
                console.log(`Decrypted ZIP created. Size: ${out_blob.size}`);
                js_download_file(out_blob, output_zip_name, "application/zip");

js_result_area_element.value = `Success! Downloaded ${output_zip_name}`;

} catch (err) {
                js_result_area_element.value = "Decrypt Error:" + err;
                console.error("Decrypt Error:", err);
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`解凍エラー: パスワードが違うか、ファイルが破損しています。\n${err.message}`);

} finally {
                // エラー発生時でも確実に close する
                if (zip_reader) {
                    try { await zip_reader.close(); } catch (e) { }
                }
                if (zip_writer) {
                    try { await zip_writer.close(); } catch (e) { }
                }
            }
        }

//------------------------------------------------------------------------ ### VFS_File_Download ###
        /**
         * Pyodide VFS 内の単一ファイルを読み込み、ブラウザのダウンロード機能をトリガーします。
         * @param {string} vfs_path - ダウンロード対象のVFSフルパス
         */
        function js_download_vfs_file(vfs_path) {
            // PyodideとFSの初期化確認
            if (!pyodide_js || !pyodide_js.FS) {
                console.error("Pyodide FS not ready.");
                return;
            }

try {
                js_result_area_element.value = `Downloading ${vfs_path}...`;

// ファイル名をパスから抽出
                const file_name = vfs_path.split("/").pop();

// VFSからファイルをバイナリ(Uint8Array)として読み込む
                // ※ encodingを指定しないことでバイナリ取得となり、画像やzipなども破損せず扱えます
                const file_data = pyodide_js.FS.readFile(vfs_path);

// 既存のダウンロードヘルパー関数を利用
                // MIMEタイプは自動判別が難しいため、汎用的なバイナリストリームとして扱います
                js_download_file(file_data, file_name, "application/octet-stream");

js_result_area_element.value = `Download triggered for ${vfs_path}`;
                console.log(`Download triggered for ${vfs_path}`);

} catch (err) {
                js_result_area_element.value = `Download Error: ${err.message}`;
                const msg = `Download Error: ${err.message}`;
                console.error(msg);
                js_result_area_element.value = msg;
                alert(msg);
            }
        }

//------------------------------------------------------------------------ ### File_Download_Helper ###
        function js_download_file(data, filename, mime_type = "application/octet-stream") {
            let blob;
            if (data instanceof Uint8Array) {
                blob = new Blob([data], { type: mime_type });
            } else {
                // 文字列と仮定
                blob = new Blob([data], { type: mime_type });
            }

const a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = filename;
            document.body.appendChild(a); // Firefoxでの互換性のため
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(a.href);
        }

//------------------------------------------------------------------------ ### JS_Get_CSV_Data ###
        function js_get_csv_data(file_name) {
            // 1. 最優先：現在アクティブ（表示中）なタブが対象のファイル名かチェック
            if (active_tab_id && tabs_data[active_tab_id]) {
                const active_tab = tabs_data[active_tab_id];
                if (active_tab.name === file_name && active_tab.type === "spreadsheet") {
                    if (spreadsheet_instances[active_tab_id]) {
                        return spreadsheet_instances[active_tab_id].getData();
                    }
                }
            }

// 2. 次点：アクティブなタブではない場合、開いている全タブの中から探す
            for (const tab_id in tabs_data) {
                if (tabs_data[tab_id].name === file_name && tabs_data[tab_id].type === "spreadsheet") {
                    if (spreadsheet_instances[tab_id]) {
                        return spreadsheet_instances[tab_id].getData();
                    }
                }
            }

return null; // 開かれているタブの中に該当ファイルが見つからない場合
        }

//------------------------------------------------------------------------ ### Monacoローダー ###
        function load_script(src) {
            return new Promise((resolve, reject) => {
                const script = document.createElement("script");
                script.src = src;
                script.onload = () => resolve();
                script.onerror = (e) => reject(new Error(`Script load error for ${src}. Error: ${e}`));
                document.head.appendChild(script);
            });
        }

/* #################### ↑↑↑ script_js_call_by_pyodide ↑↑↑ #################### */
    </script>

//------------------------------------------------------------------------ ### IDE_frame_post_message_汎用受信 ###
        window.addEventListener("message", (event) => {
            const data = event.data;
            if (!data) return;

// 1. host_frameからの非同期処理実行結果の受信処理
            if (data && data.status && data.req_id && pending_host_requests[data.req_id]) {
                const { req_id, status, result, error } = data;
                const { resolve, reject } = pending_host_requests[req_id];
                // 処理済みリクエストを削除
                delete pending_host_requests[req_id];
                if (status === "success") {
                    resolve(result);
                } else {
                    console.error("Async Bridge Error:", error);
                    reject(error instanceof Error ? error : new Error(String(error)));
                }
            }

// 2. host_frameからのpost
            if (event.source === window.parent) {

// --------------- ### ボタン入力受信
                if (data.cmd === "click") {
                    //console.log("# host_to_ide : button_clicked")
                    switch (data.obj.click) {
                        case "toggle_sidebar_button":
                            document.body.classList.toggle("sidebar-hidden");
                            if (editor && typeof editor.layout === "function") {
                                editor.layout();
                            }
                            break;
                        case "input_file_button":
                            input_file_button_click();
                            break;
                        case "drive_dir_button":
                            drive_dir_button_click();
                            break;
                        case "download_html_button":
                            handle_download_self_html();
                            break;
                        case "save_script_button":
                            save_file_button_click();
                            break;
                        case "stop_script_button":
                            button_STOP_click();
                            break;
                        case "run_script_button":
                            button_RUN_click();
                            break;
                    }
                }

// --------------- ### シリアル受信データのハンドリング
                else if (data.cmd === "serial_rx") {
                    // Python側でコールバック関数が登録されていれば呼び出す
                    if (typeof py_message_callback === "function") {
                        // データ形式: { cmd: "serial_rx", data: Uint8Array }
                        py_message_callback(data);
                    }
                }

// --------------- ### 変数データ受信
                else if (data.cmd === "var_val") {
                    //console.log("# host_to_ide : val_post")
                    const local_obj = data.obj;
                    const local_keys = Object.keys(local_obj);
                    local_keys.forEach((local_keys) => {
                        // ブラケット記法 [key] を使って値にアクセス
                        const local_value = local_obj[local_keys];
                        js_obj_global_data[local_keys] = local_value;
                    });
                    if (local_keys.includes("js_result")) {
                        js_result_area_element.value = local_obj["js_result"];
                    }
                    //console.log("# js_obj_global_data :", js_obj_global_data)
                    //console.log("# js_obj_global_data[temp] :", js_obj_global_data["temp"])
                }

// --------------- ### Agent_Run_Handler
                else if (data.cmd === "agent_run") {
                    const code = data.code;
                    if (editor && code) {
                        // エディタにコードをセット
                        editor.setValue(code);
                        console.log("# IDE_frame_log : agent_run : set_code")
                        // エディタの内容で解析を実行
                        analyze_python_code(code);

// 実行開始 (実行元がAgentであることを識別するためのフラグがあれば尚良いが、今回は既存フローを使用)
                        // 実行前に結果エリアをクリア
                        js_print_clear();

// 実行ボタンの処理を呼び出す
                        // button_RUN_click は async なので await 可能だが、イベントハンドラ内なのでそのまま呼ぶ
                        agent_run_flag = true;
                        console.log("# IDE_frame_log : agent_run : run_code")
                        button_RUN_click();
                    }
                }

return; // host_frameからのメッセージ処理終了
            }

// 3. preview_frameからのメッセージを処理
            const preview_frame = document.getElementById("preview_frame");
            if (preview_frame && event.source === preview_frame.contentWindow) {
                // Python側で設定されたコールバック関数(py_message_callback)にデータを渡す
                if (typeof py_message_callback === "function") {
                    try {
                        py_message_callback(event.data);
                    } catch (e) {
                        console.error("Error in Python callback:", e);
                    }
                }
            }
        });

// ローカルファイルを開く機能
        async function input_file_button_click() {
            const [file] = e.target.files;
            if (file) {
                const reader = new FileReader();
                reader.addEventListener("load", () => {
                    update_editor_with_content(file.name, reader.result, "Input File");
                });
                reader.readAsText(file);
            }
        };

// ローカルにファイルを保存する機能
        async function save_file_button_click() {
            const content = (() => {
                if (tabs_data[active_tab_id] && tabs_data[active_tab_id].type === "spreadsheet") {
                    // スプレッドシートの内容をCSV文字列化して取得
                    const sheet_data = spreadsheet_instances[active_tab_id].getData();
                    return sheet_data.map(row => row.join(",")).join("\n");
                } else {
                    return editor.getValue();
                }
            })();
            const blob = new Blob([content], { type: "text/plain" });
            const a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            const current_name = file_name_val || "python_script.py";
            a.download = current_name;
            a.click();
            URL.revokeObjectURL(a.href);
        };

// ローカルにファイルを保存する機能 (Ctrl + S)
        window.addEventListener("keydown", (e) => {
            // Ctrl + S または Cmd + S（Mac）
            if ((e.ctrlKey || e.metaKey) && e.key === "s") {
                e.preventDefault(); // ブラウザのデフォルト保存を無効化
                const content = (() => {
                    if (tabs_data[active_tab_id] && tabs_data[active_tab_id].type === "spreadsheet") {
                        // スプレッドシートの内容をCSV文字列化して取得
                        const sheet_data = spreadsheet_instances[active_tab_id].getData();
                        return sheet_data.map(row => row.join(",")).join("\n");
                    } else {
                        return editor.getValue();
                    }
                })();
                const blob = new Blob([content], { type: "text/plain" });

const a = document.createElement("a");
                a.href = URL.createObjectURL(blob);

// 現在のファイル名を利用（なければ python_script.py）
                const current_name = file_name_val || "python_script.py";
                a.download = current_name;
                a.click();

URL.revokeObjectURL(a.href);

js_result_area_element.value = `Saved: ${current_name}`;
            }
        });

//------------------------------------------------------------------------ ### Loading_制御関数 ###
        function toggle_loading(is_loading, text = "Loading...") {
            const overlay = document.getElementById("loading_overlay");
            const msg_el = document.getElementById("loading_text");

if (msg_el) msg_el.textContent = text;

if (is_loading) {
                overlay.style.display = "flex";
            } else {
                overlay.style.display = "none";
            }
        }

//------------------------------------------------------------------------ ### button_enabled_disabled ###
        const control_button_list = [
            "script_upload",
            "vfs_upload",
            "refresh_script_explorer",
            "refresh_vfs_explorer",
            "reset_vfs_explorer",
        ];

function set_sidebar_buttons_state(enabled) {
            control_button_list.forEach(id => {
                const btn = document.getElementById(id);
                if (!btn) return;
                if (enabled) btn.removeAttribute("disabled");
                else btn.setAttribute("disabled", true);
            });
        }

//------------------------------------------------------------------------ ### Reset_VFS_Button ###
        if (reset_vfs_button) {
            reset_vfs_button.addEventListener("click", () => {
                const ok = confirm("VFS 内のすべてのファイル・フォルダを削除します。\nよろしいですか？");
                if (!ok) return;

try {
                    // CWD (カレントディレクトリ) が削除対象の中にあるとエラーになるため、一旦ルートに移動
                    try { pyodide_js.FS.chdir("/"); } catch (e) { console.warn("chdir / failed", e); }

// --- 1. NativeFS がマウントされていれば解除 ---
                    if (is_mounted) {
                        if (mounted_dir_handle) {
                            const prev = `${MOUNT_PATH}/${mounted_dir_handle.name}`;
                            try { pyodide_js.FS.unmount(prev); } catch (e) { }
                        }
                        try { pyodide_js.FS.unmount(MOUNT_PATH); } catch (e) { }
                        is_mounted = false;
                        mounted_dir_handle = null;
                    }
                    remove_directory_recursive_vfs(MOUNT_PATH); // --- 2. VFSの実データを完全削除 ---
                    pyodide_js.FS.mkdirTree(MOUNT_PATH); // --- 3. ルートフォルダを作り直し ---

// 削除後にPython側のCWDを再度 MOUNT_PATH に戻しておく
                    try {
                        pyodide_js.FS.chdir(MOUNT_PATH);
                        // Python側の os.getcwd() も同期させるために runPython を実行
                        pyodide_js.runPython(`import os; os.chdir('${MOUNT_PATH}')`);
                    } catch (e) { console.warn("chdir back failed", e); }

refresh_vfs_explorer_view(); // --- 4. 画面を更新 ---
                    js_result_area_element.value = "VFS was reset.";

} catch (err) {
                    console.error("VFS Reset Error:", err);
                    alert(`VFSリセットに失敗しました:\n${err.message}`);
                }
            });
        }

//------------------------------------------------------------------------ ### Monaco_Editor_Initialization ###
        function initialize_monaco_editor() {
            // Promiseを返すようにし、Monacoの準備完了を待てるようにする
            return new Promise((resolve) => {

// loader.min.jsが読み込まれた後でないと "require" は定義されていないため、
                // この関数の *内部* でconfigを設定します。
                require.config({ paths: { "vs": "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs" } });

// Monaco Editorの本体（editor.main）を非同期で読み込む
                require(["vs/editor/editor.main"], function () {
                    // 読み込み完了後、エディタを生成・初期化する
                    editor = monaco.editor.create(editor_element, {
                        theme: "vs-dark",
                        language: "python",
                        automaticLayout: true, // ウィンドウリサイズ時に自動レイアウト調整
                    });

open_tab("main.py", initial_code);

// エディタの内容が変更されたら、アウトライン更新と構文チェックを実行する
                    let outline_timer = null;
                    editor.onDidChangeModelContent(() => {
                        clearTimeout(outline_timer);

// 入力から 300ms 後にアウトライン更新と構文チェック
                        outline_timer = setTimeout(() => {
                            const code = editor.getValue();
                            analyze_python_code(code);
                        }, 300);
                    });

// 初回のアウトライン生成と構文チェック
                    analyze_python_code(initial_code);

// これでMonacoの初期化がすべて完了したため、
                    // 待機している window.onload の await に処理を返す
                    resolve();
                });
            });
        }

// ------------------------------------------------------------------------ ### Create_&_Open_Tab ###
        function open_tab(file_name, content, is_preview = false) {
            // 既に同じ名前のタブが開いているか確認
            for (const id in tabs_data) {
                if (tabs_data[id].name === file_name) {
                    // プレビューの場合、コンテンツ(URL)を更新して再表示
                    if (is_preview && tabs_data[id].type === "preview") {
                        tabs_data[id].content = content; // URLを更新
                        activate_tab(id);
                        return;
                    }
                    activate_tab(id);
                    return;
                }
            }

const tab_id = `tab_${tab_counter++}`;

// Monaco Modelの作成 (言語は拡張子から簡易判定、デフォルトはpython)
            // これにより各タブで Undo/Redo 履歴が保持されます
            let lang = "python";
            let type = "editor"; // "editor" or "preview"

if (is_preview === true) {
                type = "preview";
            } else if (is_preview === "plot") { // "plot" という文字列が渡された場合
                type = "plot";
                lang = "text"; // プロット用なので言語は関係ない
            } else {
                // 拡張子から言語を決定
                if (file_name.endsWith(".py")) lang = "python";
                else if (file_name.endsWith(".json")) lang = "json";
                else if (file_name.endsWith(".js")) lang = "javascript";
                else if (file_name.endsWith(".html")) lang = "html";
                else if (file_name.endsWith(".css")) lang = "css";
                else if (file_name.endsWith(".txt")) lang = "text/plain";
                else if (file_name.endsWith(".csv")) {
                    lang = "csv";
                    type = "spreadsheet";
                }
                else lang = "text/plain";
            }

// Monaco Modelの作成 (エディタモードの場合のみ)
            let new_model = null;
            if (type === "editor") {
                if (content !== "" || file_name !== "Untitled") {
                    new_model = monaco.editor.createModel(content, lang);
                }
            }

// データ格納
            tabs_data[tab_id] = {
                name: file_name,
                model: new_model,
                type: type, // タブの種類
                content: content, // プレビューの場合はBlobURL、エディタの場合は初期値など
                scroll_state: null
            };

// --- DOM要素の作成 ---
            const tab_div = document.createElement("div");
            tab_div.id = tab_id;
            tab_div.className = "tab_item";
            tab_div.title = file_name; // ホバー時にフルネーム表示

enable_tab_drag_and_drop(tab_div); // タブのドラッグ移動を有効化

// --- タブをクリックで切り替え ---
            tab_div.addEventListener("mousedown", (e) => {
                // ミドルクリック(1)で閉じる、左クリック(0)で切り替え
                if (e.button === 1) {
                    e.preventDefault();
                    close_tab(tab_id);
                } else if (e.button === 0) {
                    activate_tab(tab_id);
                }
            });

// --- タブをダブルクリックでタブ名変更 ---
            tab_div.addEventListener("dblclick", (e) => {
                e.stopPropagation(); // クリック系イベントの干渉防止

const old_name = tabs_data[tab_id].name;

// 拡張子とファイル名を分離する処理
                const last_dot_idx = old_name.lastIndexOf(".");
                let base_name = old_name;
                let ext_name = "";
                // ドットが見つかり、かつ先頭ではない場合（隠しファイル等でない場合）
                if (last_dot_idx > 0) {
                    base_name = old_name.substring(0, last_dot_idx);
                    ext_name = old_name.substring(last_dot_idx);
                }
                // プロンプトには拡張子を除いた名前を表示し、メッセージで拡張子が固定であることを伝える
                const input_base_name = prompt(`Rename tab (extension '${ext_name}' is fixed)`, base_name);
                // キャンセル・空文字は無視
                if (!input_base_name) return;
                // ユーザー入力値と元の拡張子を結合
                const new_name = input_base_name + ext_name;

// 同名は無視
                if (new_name === old_name) return;
                // データ更新
                tabs_data[tab_id].name = new_name;
                // 表示名更新
                const name_span = tab_div.querySelector(".tab_name");
                if (name_span) {
                    name_span.textContent = new_name;
                }

// title 属性更新
                tab_div.title = new_name;

// アクティブタブなら現在ファイル名も更新
                if (active_tab_id === tab_id) {
                    file_name_val = new_name;
                    const code = editor.getValue();
                    analyze_python_code(code);
                }
            });

// タブ名
            const name_span = document.createElement("span");
            name_span.className = "tab_name";
            name_span.textContent = file_name;
            tab_div.appendChild(name_span);

// 閉じるボタン
            const close_btn = document.createElement("span");
            close_btn.className = "tab_close_btn";
            close_btn.textContent = "[x]";
            close_btn.addEventListener("click", (e) => {
                e.stopPropagation(); // host_frameのクリックイベント伝播を防止
                close_tab(tab_id);
            });
            tab_div.appendChild(close_btn);

if (tab_plus_button_element) {
                tab_bar_element.insertBefore(tab_div, tab_plus_button_element);
            } else {
                tab_bar_element.appendChild(tab_div);
            }

// 作成したタブをアクティブにする
            activate_tab(tab_id);
        }

// ------------------------------------------------------------------------ ### Activate Tab ###
        function activate_tab(target_id) {
            if (!tabs_data[target_id]) return;

active_tab_id = target_id;
            const data = tabs_data[target_id];

// 1. タブの見た目を更新（activeクラスの付け替え）
            const all_tabs = document.querySelectorAll(".tab_item");
            all_tabs.forEach(el => el.classList.remove("active_tab"));

const target_tab_el = document.getElementById(target_id);
            if (target_tab_el) {
                target_tab_el.classList.add("active_tab");
                target_tab_el.scrollIntoView({ behavior: "smooth", block: "nearest" });
            }

const old_ui = document.getElementById("lang_select_box");
            if (old_ui) old_ui.remove();

editor_element.style.display = "none";
            preview_container_element.style.display = "none";
            plot_container_element.style.display = "none";
            spreadsheet_container_element.style.display = "none";

// 2. Monaco Editorのモデルを差し替え
            if (data.type === "preview") {
                // プレビューモード
                preview_container_element.style.display = "flex";
                // iframeのソースを設定 (contentにはBlob URLが入っている想定)
                preview_frame_element.src = data.content;
                file_name_val = data.name;

} else if (data.type === "plot") {
                // --- プロットモード (新規追加) ---
                plot_container_element.style.display = "flex";
                file_name_val = data.name;

} else if (data.type === "spreadsheet") {
                // --- スプレッドシートモード (CSV用) ---
                spreadsheet_container_element.style.display = "block";
                file_name_val = data.name;

// 全スプレッドシートインスタンスを非表示化
                document.querySelectorAll(".spreadsheet_instance").forEach(el => el.classList.remove("active_spreadsheet"));

if (!spreadsheet_instances[target_id]) {
                    // 初回表示時のみコンテナ生成とJspreadsheetの初期化
                    const sheet_div = document.createElement("div");
                    sheet_div.id = `sheet_${target_id}`;
                    sheet_div.className = "spreadsheet_instance active_spreadsheet";
                    spreadsheet_container_element.appendChild(sheet_div);

// CSV文字列を2次元配列に簡易変換
                    const parsed_data = data.content
                        ? data.content.trim().split("\n").map(row => row.split(","))
                        : [[]];

spreadsheet_instances[target_id] = jspreadsheet(sheet_div, {
                        data: parsed_data,
                        minDimensions: [10, 15],
                        defaultColWidth: 100,
                        parseFormulas: false
                    });
                } else {
                    // 既に作成済みの場合は表示クラスを付与
                    const sheet_div = document.getElementById(`sheet_${target_id}`);
                    if (sheet_div) sheet_div.classList.add("active_spreadsheet");
                }

} else {
                // エディタモード
                editor_element.style.display = "block";

const old_ui = document.getElementById("lang_select_overlay");
                if (old_ui) old_ui.remove();

if (!data.model) {

// editor DOM の破壊を避けるため overlay を上から重ねる
                    const overlay = document.createElement("div");
                    overlay.id = "lang_select_overlay";
                    overlay.style = `
        position: absolute;
        top: 10%;
        left: 20%;
        background: #1e1e1e;
        padding: 10px;
        border: 1px solid #555;
        z-index: 50;
        display: flex;
        gap: 5px;
      `;
                    overlay.innerHTML = `
        <button data-lang="python" style="width: 45px;">.py</button>
        <button data-lang="javascript" style="width: 45px;">.js</button>
        <button data-lang="html" style="width: 45px;">.html</button>
        <button data-lang="css" style="width: 45px;">.css</button>
        <button data-lang="csv" style="width: 45px;">.csv</button>
      `;

// editor の上に重ねる
                    editor_element.appendChild(overlay);

document.querySelectorAll("#lang_select_overlay button").forEach(btn => {
                        btn.addEventListener("click", () => {
                            const lang = btn.dataset.lang;
                            let initial_content = "";

if (lang === "python") {
                                initial_content = `
# Sample
# ========== import ==========
import js
import micropip
import asyncio

a = 0
	for i in range(1000):
		r = np.random.randint(1, 9)
		a = a + r
		if i % 200 == 0:
		    print(a)
	print("# TEST_COMPLETE #")

# ========== Main ==========
# Python から JavaScript の変数を扱えるようにする
if "JsProxy" in str(type(js_map_global_data)):
	js_map_global_data = js_map_global_data.to_py()

await main_async_def()
`;
                            } else if (lang === "javascript") {
                                initial_content =
                                    `
// Sample
async function setup_web_serial() {
	// すでにボタンがある場合は作成しない簡易チェック
	if (document.getElementById("btn_connect_serial")) {
		console.log("Serial button already exists.");
		return;
	}

const new_btn = document.createElement("button");
	new_btn.id = "btn_connect_serial";
	new_btn.textContent = "new_btn";
	new_btn.className = "other_button_css"; // 既存のスタイルクラスを流用
	new_btn.style.marginTop = "10px";
	new_btn.style.height = "30px";
	new_btn.style.width = "70px";

// クリック時の処理 (Web Serial API)
	new_btn.onclick = async () => {
		try {
            js_result_area_element.value = "clicked_new_btn..."
		} catch (e) {
            console.error("Serial Connection Failed:", e);
            alert("Serial Connection Failed: " + e);
		}
	};

// extension_area にボタンを追加してみる
	const extension_area = document.getElementById("extension_area");
	extension_area.appendChild(new_btn);
}

// 関数定義後に即実行してボタンを表示させる
setup_web_serial();
`;
                            } else if (lang === "html") {
                                initial_content =
                                    `

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Sample_Page</title>
</head>
<body>
	<h1>Hello HTML</h1>
</body>
</html>
`;
                            } else if (lang === "csv") {
                                initial_content = ""; // 初期は空データ
                            }

const new_model = monaco.editor.createModel(initial_content, lang);
                            data.model = new_model;

data.name = `Untitled.${lang === "python" ? "py" :
                                lang === "javascript" ? "js" :
                                    lang
                                }`;
                            file_name_val = data.name;

if (lang === "csv") {
                                data.type = "spreadsheet";
                                data.content = initial_content;
                            }

// タブの表示名(DOM)を更新する処理
                            const target_tab_element = document.getElementById(target_id);
                            if (target_tab_element) {
                                const name_span = target_tab_element.querySelector(".tab_name");
                                if (name_span) {
                                    name_span.textContent = data.name; // 表示名を更新 (例: Untitled.py)
                                }
                                target_tab_element.title = data.name; // ホバー時のツールチップも更新
                            }

overlay.remove();

// スプレッドシートなら再描画、エディタなら既存の処理
                            if (data.type === "spreadsheet") {
                                activate_tab(target_id); // 再帰呼び出しでスプレッドシートの表示処理に回す
                            } else {
                                editor.setModel(new_model);
                                editor.focus();
                                editor.layout();
                                const code = editor.getValue();
                                analyze_python_code(code);
                            }
                        });
                    });

return;
                }

if (editor && data.model) {
                    editor.setModel(data.model);
                    editor.focus();
                    editor.layout(); // レイアウト崩れ防止
                    file_name_val = data.name;
                    const code = editor.getValue();
                    analyze_python_code(code);
                }
            }
        }

// ------------------------------------------------------------------------ ### Close_Tab ###
        function close_tab(tab_id) {
            // Monaco Editor のモデルを破棄（dispose）する
            if (tabs_data[tab_id] && tabs_data[tab_id].model) {
                // モデルを破棄することで、アンドゥ履歴や内部データ構造がメモリから解放されます
                tabs_data[tab_id].model.dispose();
            }

// 1. タブのDOM要素を削除
            const tab_element = document.getElementById(tab_id);
            if (tab_element) {
                tab_element.remove();
            }

// 2. タブの内容（エディタのコンテナ）を削除
            // ※ エディタインスタンス自体はモデル破棄で間接的に解放されることが多いですが、
            // エディタインスタンスも保持している場合は、editor.dispose() も呼び出すのが安全です。
            // 今回のコード構造では model の破棄が最も重要です。
            const editor_container = document.getElementById(`editor-container-${tab_id}`);
            if (editor_container) {
                editor_container.remove();
            }

// 3. データ構造から情報を削除
            delete tabs_data[tab_id];

// 4. スプレッドシートインスタンスの破棄
            if (spreadsheet_instances[tab_id]) {
                spreadsheet_instances[tab_id].destroy();
                delete spreadsheet_instances[tab_id];
                const sheet_div = document.getElementById(`sheet_${tab_id}`);
                if (sheet_div) sheet_div.remove();
            }

// 5. アクティブだったタブを閉じた場合、別のタブを開く
            if (active_tab_id === tab_id) {
                const remaining_ids = Object.keys(tabs_data);
                if (remaining_ids.length > 0) {
                    // 最後のタブを開く（または隣のタブを開くロジック）
                    activate_tab(remaining_ids[remaining_ids.length - 1]);
                } else {
                    // タブがなくなった場合、新規タブを作成
                    open_tab("Untitled", "");
                }
            }
        }

//------------------------------------------------------------------------ ### +_Tab ###
        function setup_tab_plus_button() {
            if (tab_plus_button_element) return;
            tab_plus_button_element = document.createElement("div");
            tab_plus_button_element.className = "tab_plus_btn";
            tab_plus_button_element.textContent = "[+]";
            tab_plus_button_element.title = "New_Tab";
            tab_plus_button_element.addEventListener("click", () => { open_tab("Untitled", "") });
            tab_bar_element.appendChild(tab_plus_button_element);
        }

// ------------------------------------------------------------------------ ### Tab_Drag_And_Drop ###
        function enable_tab_drag_and_drop(tab_element) {
            // ドラッグを有効化
            tab_element.setAttribute("draggable", true);

// --- ドラッグ開始 ---
            tab_element.addEventListener("dragstart", (e) => {
                dragging_tab_element = tab_element;
                tab_element.classList.add("dragging");
                e.dataTransfer.effectAllowed = "move";
            });

// --- ドラッグ終了 ---
            tab_element.addEventListener("dragend", () => {
                dragging_tab_element = null;
                tab_element.classList.remove("dragging");
            });

// --- ドラッグ中に他タブ上に乗った時 ---
            tab_element.addEventListener("dragover", (e) => {
                e.preventDefault(); // dropを許可
                if (!dragging_tab_element || dragging_tab_element === tab_element) return;

const rect = tab_element.getBoundingClientRect();
                const offset_x = e.clientX - rect.left;

// 左半分 or 右半分で挿入位置を判断
                if (offset_x < rect.width / 2) {
                    tab_bar_element.insertBefore(dragging_tab_element, tab_element);
                } else {
                    tab_bar_element.insertBefore(dragging_tab_element, tab_element.nextSibling);
                }
            });
        }

//------------------------------------------------------------------------ ### File_Explorer_Logic ###
        // ファイルツリーを描画する（ローカルフォルダにも対応）
        function render_file_explorer(tree, type = "drive", target_element) { // target_element 引数を追加
            target_element.innerHTML = ""; // Clear loading message
            const rootUl = create_tree_level(tree, type);
            target_element.appendChild(rootUl);
        }

//------------------------------------------------------------------------ ### Explorer_Selection_Helper ###
        // エクスプローラー内のアイテム選択状態（色変え）を管理する関数
        function handle_explorer_item_click(target_row_element) {
            // 1. 既存の選択状態(.selected_item)をすべて解除
            // (script_explorer と vfs_explorer 両方から探して消す)
            const all_selected = document.querySelectorAll(".selected_item");
            all_selected.forEach(el => el.classList.remove("selected_item"));

// 2. 今回クリックされた要素にクラスを付与
            if (target_row_element) {
                target_row_element.classList.add("selected_item");
            }
        }

//------------------------------------------------------------------------ ### update_editor ###
        function update_editor_with_content(file_name, content, source_desc) {
            try {
                if (!editor) throw new Error("Editor not initialized");

open_tab(file_name, content);
                const code = editor.getValue();
                analyze_python_code(code);

file_name_val = file_name;
                js_result_area_element.value = `${file_name} loaded successfully (${source_desc}).`;

} catch (err) {
                console.error(`Error loading ${file_name}:`, err);
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`読み込み失敗: ${err.message}`);
            }
        }

//------------------------------------------------------------------------ ### Script_Explorerを更新する ###
        function refresh_script_explorer_view() {
            try {
                toggle_loading(true, "Refreshing Script Tree..."); // ローディング表示開始

// ローカル環境: デフォルトメッセージを表示
                script_explorer_element.textContent = "Use 'script_dir' to browse local scripts.";
                toggle_loading(false); // ローディング表示終了

} catch (err) {
                console.error(`Error Refreshing Script Tree:`, err);
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`読み込み失敗: ${err.message}`);
            }
        }

//------------------------------------------------------------------------ ### エクスプローラーアイテムへのイベント付与ロジックの分離 ###
        function attach_explorer_item_events(li, row_div, item, type) { // 引数に row_div を追加
            // --- クリックイベント (共通) ---
            // li ではなく row_div (行部分) にイベントを貼ることで、子要素クリック時のバブリング問題を回避
            if (item.type === "file") {
                row_div.addEventListener("click", (e) => {
                    e.stopPropagation();
                    handle_explorer_item_click(row_div); // 選択色を適用

if (type === "drive") load_file_content(item.id, item.name);
                    else if (type === "local") load_local_file_content_from_handle(item.handle, item.name);
                    else if (type === "local_upload") load_local_file_content_from_file(item.handle, item.name);
                    else if (type === "vfs") load_local_file_content_from_vfs(item.vfs_path, item.name);
                });
            }

// --- VFS特有のイベント (ドラッグ＆ドロップ / 右クリック) ---
            if (type === "vfs") {
                // Drag Start (行部分をドラッグ可能にする)
                row_div.setAttribute("draggable", "true");
                row_div.addEventListener("dragstart", (e) => {
                    e.stopPropagation();
                    // ドラッグ時は選択状態にする
                    handle_explorer_item_click(row_div); // ★ 選択色を適用
                    e.dataTransfer.setData("application/vfs-path", item.vfs_path);
                    e.dataTransfer.effectAllowed = "move";
                });

if (item.type === "folder") {
                    // Drop Target (フォルダ行へのドロップ)
                    row_div.addEventListener("dragover", (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        row_div.classList.add("vfs_drop_target"); // liではなくrow_divにクラス付与
                        e.dataTransfer.dropEffect = "move";
                    });

row_div.addEventListener("dragleave", (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        row_div.classList.remove("vfs_drop_target");
                    });

row_div.addEventListener("drop", (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        row_div.classList.remove("vfs_drop_target");

const src_path = e.dataTransfer.getData("application/vfs-path");
                        if (src_path) {
                            handle_vfs_move(src_path, item.vfs_path);
                        }
                    });

// Context Menu: ZIP Download (Folder)
                    row_div.addEventListener("contextmenu", (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        handle_explorer_item_click(row_div); // ★ 右クリック時も選択色を適用

const user_pass = window.prompt(
                            `【Folder Download】: ${item.name}\n\nZIPパスワードを入力してください。\n(空欄で非暗号化ZIP)`
                        );

if (user_pass === null) return;
                        // ... (以下既存処理と同じ) ...
                        if (user_pass === "") {
                            if (typeof js_encrypt_zipper === "function") {
                                js_encrypt_zipper(item.vfs_path, item.name + ".zip", null, false);
                            }
                        } else {
                            const use_legacy = window.confirm(`【暗号化方式】\nパスワード: "${user_pass}"\n[OK]: Legacy ZipCrypto\n[キャンセル]: AES-256`);
                            if (typeof js_encrypt_zipper === "function") {
                                js_encrypt_zipper(item.vfs_path, item.name + ".zip", user_pass, use_legacy);
                            }
                        }
                    });
                } else if (item.type === "file") {
                    // Context Menu: File Download
                    row_div.addEventListener("contextmenu", (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        handle_explorer_item_click(row_div); // ★ 右クリック時も選択色を適用

//------------------------------------------------------------------------ ### 再帰的にファイルツリーのHTML要素を生成する ###
        function create_tree_level(items, type) {
            const ul = document.createElement("ul");

items.forEach(item => {
                const li = document.createElement("li");
                // li.textContent = item.name; // ← 削除: liに直接文字を入れない

// 行を表す div を作成し、ここにテキストを入れる
                const row_div = document.createElement("div");
                row_div.classList.add("item_row");
                row_div.textContent = item.name;
                li.appendChild(row_div);

li.classList.add("explorer-item");

// イベント付与関数には li と row_div の両方を渡す
                attach_explorer_item_events(li, row_div, item, type);

if (item.type === "folder") {
                    // --- フォルダの場合 ---
                    li.classList.add("folder-item", "collapsed");

// クリックイベントは row_div (行部分) に対して設定
                    row_div.addEventListener("click", (e) => {
                        e.stopPropagation();
                        handle_explorer_item_click(row_div); // ★ 選択色を適用

// 親の li のクラスを操作して開閉する
                        li.classList.toggle("expanded");
                        li.classList.toggle("collapsed");
                    });

if (item.children && item.children.length > 0) {
                        const childrenUl = create_tree_level(item.children, type);
                        li.appendChild(childrenUl);
                    }

} else {
                    li.classList.add("file-item");
                    if (item.name.endsWith(".py")) {
                        li.classList.add("python-file");
                    }
                }
                ul.appendChild(li);
            });
            return ul;
        }

//------------------------------------------------------------------------ ### ローカルマウントから読み込む ###
        async function load_local_file_content_from_handle(file_handle, file_name) {
            try {
                js_result_area_element.value = `Loading ${file_name}...`;
                file_name_val = file_name;

const file = await file_handle.getFile();
                const content = await file.text();
                update_editor_with_content(file_name, content, "Local Handle");

} catch (err) {
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`ローカルファイルの読み込みに失敗しました: ${err.message}`);
            }
        }

//------------------------------------------------------------------------ ### ファイルアップロード (File Object) から読み込む ###
        async function load_local_file_content_from_file(file_object, file_name) {

if (!file_object || typeof file_object.text !== "function") {
                js_result_area_element.value = `Error: Not a valid File object.`;
                return;
            }
            try {
                js_result_area_element.value = `Loading ${file_name}...`;
                file_name_val = file_name;

const content = await file_object.text();

update_editor_with_content(file_name, content, "Local File");

//------------------------------------------------------------------------ ### VFS (Pyodide FS) から読み込む ###
        function load_local_file_content_from_vfs(vfs_path, file_name) {
            try {
                if (!pyodide_js || !pyodide_js.FS) {
                    throw new Error("Pyodide FS not available.");
                }
                js_result_area_element.value = `Loading ${file_name} from VFS...`;
                file_name_val = file_name;

const data = pyodide_js.FS.readFile(vfs_path);
                const content = decode_auto(data);

update_editor_with_content(file_name, content, "VFS");

} catch (err) {
                js_result_area_element.value = `Error: ${err.message}`;
                alert(`VFSファイルの読み込みに失敗しました: ${err.message}`);
                console.error(err);
            }
        }

//------------------------------------------------------------------------ ### 文字コード自動判別関数 ###
        function decode_auto(uint8_array) {
            // 1. UTF-8 (fatal: true で不正バイトがあればエラーを吐かせる)
            try {
                const decoder = new TextDecoder("utf-8", { fatal: true });
                return decoder.decode(uint8_array);
            } catch (e) {
                console.log("Not UTF-8, trying Shift_JIS...");
            }

// 2. Shift_JIS (CP932)
            try {
                const decoder = new TextDecoder("shift_jis", { fatal: true });
                return decoder.decode(uint8_array);
            } catch (e) {
                console.log("Not Shift_JIS, trying EUC-JP...");
            }

// 3. EUC-JP
            try {
                const decoder = new TextDecoder("euc-jp", { fatal: true });
                return decoder.decode(uint8_array);
            } catch (e) {
                console.log("Encoding detection failed. Fallback to UTF-8.");
            }

// 4. フォールバック (エラー無視で UTF-8 で開く)
            const decoder = new TextDecoder("utf-8", { fatal: false });
            return decoder.decode(uint8_array);
        }

//------------------------------------------------------------------------ ### ローカルフォルダ選択ボタンの処理
        async function handle_script_upload_click() {
            try {
                const dir_handle = await window.showDirectoryPicker();
                if (!dir_handle) return; // ユーザーがキャンセルした場合
                toggle_loading(true, "Mounting Local Folder...");  // ローディング表示開始

const folder_name = dir_handle.name; // 例: "Data"

// 1. 既存のマウントがあればアンマウント
                if (is_mounted) {
                    // 前回マウントしたディレクトリパスをアンマウント
                    if (mounted_dir_handle) {
                        const prev_mount_path = `${MOUNT_PATH}/${mounted_dir_handle.name}`;
                        try {
                            pyodide_js.FS.unmount(prev_mount_path);
                            console.log(`Unmounted: ${prev_mount_path}`);
                        } catch (e) {
                            console.warn("Unmount specific path failed:", e);
                        }
                    }

// 念のためルートのマウントもチェック（古いロジック対策）
                    try {
                        pyodide_js.FS.unmount(MOUNT_PATH);
                    } catch (e) { }

// VFS内を掃除 (vfs_dirの中身を空にする)
                    // マウント解除後も空フォルダが残る場合があるため
                    remove_directory_recursive_vfs(MOUNT_PATH);
                    pyodide_js.FS.mkdirTree(MOUNT_PATH); // ルート再作成

is_mounted = false;
                }

js_result_area_element.value = `Mounting local folder: ${folder_name}...`;

// マウント先を "/mnt/vfs_root" ではなく "/mnt/vfs_root/Data" にする
                const target_mount_path = `${MOUNT_PATH}/${folder_name}`;

// マウントポイント（空フォルダ）を作成
                pyodide_js.FS.mkdirTree(target_mount_path);

// NativeFSマウント実行
                await pyodide_js.mountNativeFS(target_mount_path, dir_handle);

mounted_dir_handle = dir_handle; // ハンドルを保存（次回アンマウント用）
                is_mounted = true;

// エクスプローラーの描画
                refresh_vfs_explorer_view();

js_result_area_element.value = `Local folder "${folder_name}" mounted at ${target_mount_path}.`;

} catch (error) {
                // ユーザーがフォルダ選択をキャンセルした場合のエラーは無視
                if (error.name !== "AbortError") {
                    console.error("Error opening local folder:", error);
                    js_result_area_element.value = `Error: ${error.message}`;
                    alert(`フォルダの読み込みに失敗しました: ${error.message}`);
                }
            } finally {
                toggle_loading(false); // ローディング表示終了
            }
        }

//------------------------------------------------------------------------ ### スクリプトツリー用 ローカルフォルダ選択ボタンの処理 (Local専用, VFSマウントなし)
        async function handle_open_script_folder_click() {
            try {
                const dir_handle = await window.showDirectoryPicker();
                if (!dir_handle) return; // ユーザーがキャンセルした場合

toggle_loading(true, "Loading Script Folder..."); // ローディング表示開始
                js_result_area_element.value = `Loading script folder: ${dir_handle.name}...`;

// エクスプローラーの描画 (VFSにはマウントしない)
                const tree = await create_tree_from_directory(dir_handle);
                render_file_explorer(tree, "local", script_explorer_element); // "local" タイプ、描画先 Script

js_result_area_element.value = `Script folder "${dir_handle.name}" loaded.`;

} catch (error) {
                // ユーザーがフォルダ選択をキャンセルした場合のエラーは無視
                if (error.name !== "AbortError") {
                    console.error("Error opening script folder:", error);
                    js_result_area_element.value = `Error: ${error.message}`;
                    alert(`スクリプトフォルダの読み込みに失敗しました: ${error.message}`);
                }
            } finally {
                toggle_loading(false); // ローディング表示終了
            }
        }

//------------------------------------------------------------------------ ### ディレクトリハンドルから再帰的にファイルツリー構造を生成する
        async function create_tree_from_directory(directoryHandle) {
            const tree = [];
            for await (const entry of directoryHandle.values()) {
                const item = {
                    name: entry.name,
                    handle: entry, // ファイル/フォルダハンドルを保持
                };
                if (entry.kind === "directory") {
                    item.type = "folder";
                    item.children = await create_tree_from_directory(entry);
                } else {
                    item.type = "file";
                }
                tree.push(item);
            }
            // フォルダが先、ファイルが後になるようにソート
            tree.sort((a, b) => {
                if (a.type === b.type) return a.name.localeCompare(b.name);
                return a.type === "folder" ? -1 : 1;
            });
            return tree;
        }

//------------------------------------------------------------------------ ### (Pyodide VFS用) ディレクトリを再帰的に削除する
        /**
         * @param {string} path - VFS内のパス
         */
        function remove_directory_recursive_vfs(path) {
            let stat;
            try {
                stat = pyodide_js.FS.stat(path);
            } catch (e) {
                return; // 存在しない
            }

if (pyodide_js.FS.isDir(stat.mode)) {
                // ディレクトリの場合
                const entries = pyodide_js.FS.readdir(path);
                for (const entry of entries) {
                    if (entry !== "." && entry !== "..") {
                        remove_directory_recursive_vfs(`${path}/${entry}`);
                    }
                }
                pyodide_js.FS.rmdir(path); // 中身が空になったディレクトリを削除
            } else if (pyodide_js.FS.isFile(stat.mode)) {
                // ファイルの場合
                pyodide_js.FS.unlink(path); // ファイルを削除
            }
        }

//------------------------------------------------------------------------ ### エクスプローラーツリー構築ヘルパー
        /**
         * @param {string} path - VFS内の相対パス (例: "sub/data.txt")
         * @param {Array} tree - 構築中のツリー配列 (トップレベル)
         * @param {Object} handle_map - ファイル/フォルダ識別のための仮マップ
         * @param {File} file_object - 元のFileオブジェクト (ファイルの場合のみ)
         */
        function add_path_to_tree_vfs(path, tree, handle_map, file_object) {
            if (!path) return; // 空のパスは無視

const parts = path.split("/");
            let current_level = tree;
            let current_path = ""; // ツリー構築用の仮想パス

for (let i = 0; i < parts.length; i++) {
                const part = parts[i];
                current_path = current_path ? `${current_path}/${part}` : part;

let node = handle_map[current_path];

if (!node) {
                    const is_file = (i === parts.length - 1);
                    node = {
                        name: part,
                        type: is_file ? "file" : "folder",
                        handle: is_file ? file_object : null, // ファイルはFileオブジェ、フォルダはnull
                        children: []
                    };
                    handle_map[current_path] = node;
                    current_level.push(node);
                }

if (node.type === "folder") {
                    current_level = node.children;
                }
            }
        }

//------------------------------------------------------------------------ ### 選択されたローカルフォルダをスクリプトツリーにアップロード
        async function handle_upload_folder_to_script_tree(event) {
            const files = event.target.files;
            if (!files || files.length === 0) return;

toggle_loading(true, "Processing Script Tree..."); // ローディング表示開始

try {
                let root_folder = files[0].webkitRelativePath.split("/")[0];
                let tree = [];
                let map = {};

for (const file of files) {
                    const rel = file.webkitRelativePath;
                    const path = rel.substring(root_folder.length + 1);
                    if (!path) continue;
                    add_path_to_tree_vfs(path, tree, map, file);
                }

const final_tree = [{
                    name: root_folder,
                    type: "folder",
                    children: tree,
                    handle: null
                }];

render_file_explorer(final_tree, "local_upload", script_explorer_element);
                js_result_area_element.value = `Local Script Folder "${root_folder}" loaded.`;

} catch (error) {
                console.error("Script Tree Load Error:", error);
                js_result_area_element.value = `Error: ${error.message}`;

} finally {
                toggle_loading(false); // ローディング表示終了
                event.target.value = ""; // 同じフォルダを再選択できるように値をクリア
            }
        }

//------------------------------------------------------------------------ ### 選択されたローカルフォルダをPyodideのVFSにアップロード
        async function handle_upload_folder_to_vfs(event) {
            const files = event.target.files;
            if (!files || files.length === 0) {
                return; // ファイルが選択されなかった
            }

toggle_loading(true, "Uploading to VFS..."); // ローディング表示開始

// ルートフォルダ名を特定する必要はありますが、パスの除去はしません
            let root_folder_name = "";
            if (files.length > 0) {
                const first_path_parts = files[0].webkitRelativePath.split("/");
                if (first_path_parts.length > 0) {
                    root_folder_name = first_path_parts[0];
                }
            }

// VFSのマウントポイント
            const mount_point = MOUNT_PATH;
            js_result_area_element.value = `Uploading "${root_folder_name}" to VFS (${mount_point})...`;

try {
                // 既存のマウント/アップロードがあればクリア (vfs_dirの中身を空にする)
                if (is_mounted) {
                    try {
                        // 前回がNativeFSマウントだった場合のアンマウント試行
                        // (具体的なマウントパスが不明なため、MOUNT_PATH直下等を想定)
                        // 今回のロジック変更に伴い、念のため再帰削除でクリーンアップします
                        if (mounted_dir_handle) {
                            const prev_mount = `${MOUNT_PATH}/${mounted_dir_handle.name}`;
                            try { pyodide_js.FS.unmount(prev_mount); } catch (e) { }
                        }
                        try { pyodide_js.FS.unmount(MOUNT_PATH); } catch (e) { }
                    } catch (e_unmount) {
                        console.warn("Unmount failed (proceeding):", e_unmount.message);
                    }
                }

// VFSのリセット (vfs_dir自体を作り直す)
                try {
                    remove_directory_recursive_vfs(mount_point);
                } catch (e) { console.log("Cleanup vfs info:", e); }

try {
                    pyodide_js.FS.mkdirTree(mount_point);
                } catch (e) { } // 既に存在すればOK

// ファイルをVFSに書き込む
                for (const file of files) {
                    // webkitRelativePath をそのまま使うことで、
                    // "Data/A.txt" なら "/mnt/vfs_root/Data/A.txt" に配置されます
                    const full_relative_path = file.webkitRelativePath;

if (!full_relative_path) continue;

const vfs_path = `${mount_point}/${full_relative_path}`;

// 親ディレクトリを再帰的に作成
                    const dir_name = vfs_path.substring(0, vfs_path.lastIndexOf("/"));
                    if (dir_name) {
                        pyodide_js.FS.mkdirTree(dir_name);
                    }

const file_buffer = await file.arrayBuffer();
                    const data = new Uint8Array(file_buffer);

pyodide_js.FS.writeFile(vfs_path, data);
                }

is_mounted = true; // アップロード完了
                mounted_dir_handle = null; // NativeFSではないためnull

refresh_vfs_explorer_view();

js_result_area_element.value = `Folder "${root_folder_name}" uploaded to ${mount_point}.`;

} catch (error) {
                console.error("Error uploading folder to VFS:", error);
                js_result_area_element.value = `Error: ${error.message}`;
                alert(`フォルダのアップロードに失敗しました: ${error.message}`);

//------------------------------------------------------------------------ ### Pyodide VFSから再帰的にツリーを構築する
        function create_tree_from_vfs(path) {
            const tree = [];
            let entries;
            try {
                const stat = pyodide_js.FS.stat(path);
                if (!pyodide_js.FS.isDir(stat.mode)) {
                    return []; // ディレクトリではない
                }
                entries = pyodide_js.FS.readdir(path);
            } catch (e) {
                return []; // パスが存在しないかエラー
            }

entries.forEach(entry => {
                if (entry === "." || entry === "..") return; // スキップ

const item = {
                    name: entry,
                    handle: null, // VFS内のファイル/フォルダには "handle" は無い
                    vfs_path: full_path // VFS内のパスを保持
                };

if (pyodide_js.FS.isDir(entry_stat.mode)) {
                    item.type = "folder";
                    item.children = create_tree_from_vfs(full_path);
                } else {
                    item.type = "file";
                }
                tree.push(item);
            });

// ソート
            tree.sort((a, b) => {
                if (a.type === b.type) return a.name.localeCompare(b.name);
                return a.type === "folder" ? -1 : 1;
            });

return tree;
        }

// VFSエクスプローラーを更新する
        function refresh_vfs_explorer_view() {
            if (!pyodide_js || !pyodide_js.FS) {
                vfs_explorer_element.textContent = "Pyodide not ready.";
                return;
            }
            vfs_explorer_element.textContent = `Scanning VFS at ${MOUNT_PATH}...`;
            const tree = create_tree_from_vfs(MOUNT_PATH);

// VFSの /mnt/vfs_root の *中身* ではなく、/mnt/vfs_root フォルダ自体をツリーのルートとして表示
            const root_folder_name = MOUNT_PATH.split("/").pop() || "/mnt/vfs_root";
            const wrapper_tree = [{
                name: root_folder_name,
                type: "folder",
                children: tree,
                handle: null,
                vfs_path: MOUNT_PATH
            }];

// 新しい "vfs" タイプで描画
            render_file_explorer(wrapper_tree, "vfs", vfs_explorer_element);

if (tree.length === 0) {
                vfs_explorer_element.textContent = `VFS path ${MOUNT_PATH} is empty. Use "VFS_Upload".`;
            }
        }

//------------------------------------------------------------------------ ### Syntax_Check_Logic ###
        // 構文解析とエラーチェックを一度に行う関数
        async function analyze_python_code(code) {

// エディタの現在の言語モードを確認
            const model = editor.getModel();
            const language_id = model.getLanguageId(); // "python", "javascript", "html" 等が返る

// Pythonでない場合は解析を行わず、アウトラインとエラーをクリアして終了
            if (language_id !== "python") {
                render_outline([]); // アウトラインをクリア
                monaco.editor.setModelMarkers(model, "owner", []); // 赤線をクリア
                return;
            }

// コードが空の場合は何もしない
            if (!code.trim()) {
                // アウトラインクリアとエラークリアを行って終了
                render_outline([]);
                monaco.editor.setModelMarkers(editor.getModel(), "owner", []);
                return;
            }

pyodide_js.globals.set("code_js", code);

const py_result = await pyodide_js.runPythonAsync(`
import ast, json, sys

code = code_js
result = {
	"outline": [],
	"errors": []
}

# NodeVisitor定義（アウトライン抽出用）
class OutlineVisitor(ast.NodeVisitor):
	def __init__(self):
		self.data = []
		self.level = 0

def generic_visit(self, node):
		super().generic_visit(node)

def visit_ClassDef(self, node):
		self.data.append({"type": "class", "name": node.name, "line": node.lineno, "level": self.level})
		self.level += 1
		self.generic_visit(node)
		self.level -= 1

def visit_FunctionDef(self, node):
		if node.name != "__init__":
			self.data.append({"type": "function", "name": node.name, "line": node.lineno, "level": self.level})
			self.level += 1
			self.generic_visit(node)
			self.level -= 1

def visit_AsyncFunctionDef(self, node):
		if node.name != "__init__":
			self.data.append({"type": "function", "name": node.name, "line": node.lineno, "level": self.level})
			self.level += 1
			self.generic_visit(node)
			self.level -= 1

try:
	# --- 1回だけのパース処理 ---
	tree = ast.parse(code)

# 成功した場合：アウトラインを抽出
	visitor = OutlineVisitor()
	visitor.visit(tree)
	result["outline"] = visitor.data

except SyntaxError as e:
	# 失敗した場合：エラー情報を抽出
	err_dict = {
		"line": e.lineno,
		"col": e.offset,
		"end_line": e.end_lineno,
		"end_col": e.end_offset,
		"message": e.msg
	}
	# Noneガード
	if err_dict["line"] is None: err_dict["line"] = 1
	if err_dict["col"] is None: err_dict["col"] = 1
	if err_dict["end_line"] is None: err_dict["end_line"] = err_dict["line"]
	if err_dict["end_col"] is None: err_dict["end_col"] = err_dict["col"] + 1

result["errors"].append(err_dict)

except Exception:
	pass

json.dumps(result)
`);

const data = JSON.parse(py_result);

// --- 1. アウトラインの更新処理 ---
            // グローバル変数 outline_data を更新（必要であれば）し、描画関数を呼ぶ
            // ※ここでは直接描画関数を呼ぶ形にしています。既存の update_outline の中身に合わせて調整してください
            render_outline(data.outline);

// --- 2. エディタのエラーマーカー更新処理 ---
            const markers = data.errors.map(err => {
                return {
                    startLineNumber: err.line,
                    startColumn: err.col,
                    endLineNumber: err.end_line,
                    endColumn: err.end_col,
                    message: err.message,
                    severity: monaco.MarkerSeverity.Error
                };
            });
            monaco.editor.setModelMarkers(editor.getModel(), "owner", markers);
        }

function render_outline(outline_list) {
            const outline_container = document.getElementById("code_outline");

if (!outline_container) return;
            outline_container.innerHTML = "";

// データがない、または配列でない場合は終了
            if (!outline_list || !Array.isArray(outline_list)) return;

outline_list.forEach(item => {
                // CSSに合わせて div 要素を作成
                const div = document.createElement("div");

// 共通クラス
                div.classList.add("outline-item");

// タイプ別クラスとアイコン等の装飾
                if (item.type === "class") {
                    div.classList.add("class-item");
                    div.textContent = `C: ${item.name}`; // Classを示す "C:" を付与（お好みで変更可）
                } else {
                    div.classList.add("function-item");
                    div.textContent = `f: ${item.name}`; // Functionを示す "f:" を付与
                }

// インデント処理 (階層レベル * 15px)
                // function-item はCSSで既に padding-left: 15px があるため、計算に加算して調整
                const base_padding = item.type === "function" ? 15 : 0;
                div.style.paddingLeft = `${base_padding + (item.level * 15)}px`;

// クリック時のジャンプ動作
                div.onclick = () => {
                    jump_to_line(item.line);
                };

outline_container.appendChild(div);
            });
        }

//------------------------------------------------------------------------ ### Outline_jump
        function jump_to_line(lineNumber) {
            editor.revealLineInCenter(lineNumber);
            editor.setPosition({ lineNumber: lineNumber, column: 1 });
            editor.focus();
        }

//------------------------------------------------------------------------ ### Drag_Handler_(メモリリーク対策) ###
        function attach_drag_handler(element, onDrag, onStart) {
            if (!element) return; // 要素が存在しない場合は何もしない

const startDrag = (e) => {
                // マウスのデフォルト動作（テキスト選択など）を無効化
                e.preventDefault();

let startX = e.clientX;
                let startY = e.clientY;

// ドラッグ開始時のコールバックを実行（初期値の取得などに使用）
                if (onStart) onStart();

// ドラッグ中の処理 (onMouseMove) を定義
                const onMouseMove = (moveEvent) => {
                    const dx = moveEvent.clientX - startX;
                    const dy = moveEvent.clientY - startY;

// onDrag コールバックを実行
                    if (onDrag) onDrag(dx, dy);
                };

// ドラッグ終了時の処理 (onMouseUp) を定義
                const onMouseUp = () => {
                    // イベントリスナーを確実に削除し、メモリリークを防ぐ
                    document.removeEventListener("mousemove", onMouseMove);
                    document.removeEventListener("mouseup", onMouseUp);
                };

// リスナーを document に追加し、ドラッグが要素外に出ても追跡できるようにする
                document.addEventListener("mousemove", onMouseMove);
                document.addEventListener("mouseup", onMouseUp);
            };

// ドラッグ開始リスナーを設定
            element.addEventListener("mousedown", startDrag);
        }

//------------------------------------------------------------------------ ### Resizer_Logic_(FIXED) ###
        function setup_resizers() {
            // 1. sidebar_area_width // (sidebar <-> (editor & footer))
            let start_sidebar_width;
            attach_drag_handler(sidebar_resizer_v_element, (dx) => {
                const new_width = start_sidebar_width + dx;
                if (new_width > 150) sidebar_area_container_element.style.width = `${new_width}px`;
            }, () => start_sidebar_width = sidebar_area_container_element.offsetWidth);

// 2. script_explorer_height // (Script_Explorer <-> VFS_Explorer)
            let start_script_h;
            attach_drag_handler(sidebar_resizer_h_element, (dx, dy) => {
                const new_script_height = start_script_h + dy;
                const sidebar_height = sidebar_area_container_element.clientHeight;
                const new_vfs_height = sidebar_height - new_script_height - outline_container_element.offsetHeight - sidebar_resizer_h_element.offsetHeight - sidebar_resizer_h2_element.offsetHeight;
                if (new_script_height > 50 && new_vfs_height > 50) {
                    script_container_element.style.flexBasis = `${new_script_height}px`;
                    vfs_container_element.style.flexBasis = `${new_vfs_height}px`;
                }
            }, () => start_script_h = script_container_element.offsetHeight);

// 3. VFS_explorer_height // (VFS_Explorer <-> outline)
            let start_vfs_h;
            attach_drag_handler(sidebar_resizer_h2_element, (dx, dy) => {
                const new_vfs_height = start_vfs_h + dy;
                const sidebar_height = sidebar_area_container_element.clientHeight;
                const new_outline_height = sidebar_height - new_vfs_height - script_container_element.offsetHeight - sidebar_resizer_h_element.offsetHeight - sidebar_resizer_h2_element.offsetHeight;
                if (new_vfs_height > 50 && new_outline_height > 50) {
                    vfs_container_element.style.flexBasis = `${new_vfs_height}px`;
                    outline_container_element.style.flexBasis = `${new_outline_height}px`;
                }
            }, () => start_vfs_h = vfs_container_element.offsetHeight);

// 4. py_result_width // (py_result_area <-> js_result_area)
            let start_py_result_w;
            let start_js_result_w; // 変数追加
            let start_plot_w;      // 変数追加

attach_drag_handler(footer_resizer_v_element, (dx, dy) => {
                const new_py_result_width = start_py_result_w + dx;
                const footer_width = footer_area_container_element.clientWidth;
                // 全体幅 - (左エリア新幅 + 右エリア固定幅 + リサイザー合計幅) = 中央エリア新幅
                const resizer_total_width = footer_resizer_v_element.offsetWidth + footer_resizer_v2_element.offsetWidth;
                const new_js_result_width = footer_width - new_py_result_width - start_plot_w - resizer_total_width;

if (new_py_result_width > 50 && new_js_result_width > 50) {
                    // flex-grow等を無効化しつつ幅を指定 (flex: 0 0 Xpx)
                    py_result_area_element.style.flex = `0 0 ${new_py_result_width}px`;
                    js_result_area_element.style.flex = `0 0 ${new_js_result_width}px`;
                }
            }, () => {
                // onStart: ドラッグ開始時に全要素の現在の幅を取得し、固定幅モード(flex-grow:0)に移行させる
                start_py_result_w = py_result_area_element.offsetWidth;
                start_js_result_w = js_result_area_element.offsetWidth;
                start_plot_w = extension_area_element.offsetWidth;

py_result_area_element.style.flex = `0 0 ${start_py_result_w}px`;
                js_result_area_element.style.flex = `0 0 ${start_js_result_w}px`;
                extension_area_element.style.flex = `0 0 ${start_plot_w}px`;
            });

// 5. js_result_width // (js_result_area <-> extension_area)
            let start_js_result_w_2;
            let start_plot_w_2;
            let start_py_result_w_2; // 変数追加

attach_drag_handler(footer_resizer_v2_element, (dx, dy) => {
                const new_js_result_width = start_js_result_w_2 + dx;
                const footer_width = footer_area_container_element.clientWidth;

// 全体幅 - (左エリア固定幅 + 中央エリア新幅 + リサイザー合計幅) = 右エリア新幅
                const resizer_total_width = footer_resizer_v_element.offsetWidth + footer_resizer_v2_element.offsetWidth;
                const new_plot_width = footer_width - start_py_result_w_2 - new_js_result_width - resizer_total_width;

if (new_js_result_width > 50 && new_plot_width > 50) {
                    // flex-grow等を無効化しつつ幅を指定
                    js_result_area_element.style.flex = `0 0 ${new_js_result_width}px`;
                    extension_area_element.style.flex = `0 0 ${new_plot_width}px`;
                }
            }, () => {
                // onStart: 同様に全要素を固定幅モードへ
                start_js_result_w_2 = js_result_area_element.offsetWidth;
                start_plot_w_2 = extension_area_element.offsetWidth;
                start_py_result_w_2 = py_result_area_element.offsetWidth;

py_result_area_element.style.flex = `0 0 ${start_py_result_w_2}px`;
                js_result_area_element.style.flex = `0 0 ${start_js_result_w_2}px`;
                extension_area_element.style.flex = `0 0 ${start_plot_w_2}px`;
            });
        }

//------------------------------------------------------------------------ ### Footer_Resizer_Logic ###
        // footer_area_height (editor <-> footer)
        function setup_footer_resizer() {
            const footer = document.querySelector("footer");
            let start_h;
            attach_drag_handler(footer_resizer_h_element, (dx, dy) => {
                // footerは上に伸ばすとdyがマイナスになるため反転
                const newHeight = start_h - dy;
                if (newHeight > 50 && newHeight < window.innerHeight - 100) {
                    footer.style.height = `${newHeight}px`;
                }
            }, () => start_h = footer.offsetHeight);
        }

//------------------------------------------------------------------------ ### Editor_Drag&Drop_Logic ###
        function setup_editor_drag_and_drop() {
            const editor_div = document.getElementById("editor");

// ドラッグ中
            editor_div.addEventListener("dragover", (e) => {
                e.preventDefault();
                e.stopPropagation();
                editor_div.classList.add("editor-dragover");
                e.dataTransfer.dropEffect = "copy"; // マウスカーソルを「コピー」表示に
            });

// ドラッグアウト
            editor_div.addEventListener("dragleave", (e) => {
                e.preventDefault();
                e.stopPropagation();
                editor_div.classList.remove("editor-dragover");
            });

// ドロップ
            editor_div.addEventListener("drop", async (e) => {
                e.preventDefault();
                e.stopPropagation();
                editor_div.classList.remove("editor-dragover");

const files = e.dataTransfer.files;
                if (!files || files.length === 0) return;

// 複数ドロップされても、エディターには最初の1つだけを表示する
                const file = files[0];

// テキストファイルとして読み込む
                try {
                    js_result_area_element.value = `Reading ${file.name}...`;
                    const text = await file.text(); // ファイルの中身をテキストとして取得

update_editor_with_content(file.name, text, "DragDrop");

} catch (err) {
                    console.error("File Read Error:", err);
                    js_result_area_element.value = "Error: Failed to read file text.";
                    alert("テキストファイルの読み込みに失敗しました。\nバイナリファイル等は開けません。");
                }
            });
        }

//------------------------------------------------------------------------ ### VFS_Drag&Drop_Logic ###
        async function handle_vfs_drop(event) {
            event.preventDefault();
            vfs_container_element.classList.remove("dragover"); // 枠線を消す

// itemsではなくfilesプロパティを使用し、Opaque Originによるセキュリティエラーを回避
            const files = event.dataTransfer.files;
            if (!files || files.length === 0) return;

toggle_loading(true, "Processing Dropped Files..."); // ローディング表示開始

js_result_area_element.value = "Processing dropped files...";
            const mount_point = MOUNT_PATH;

if (!pyodide_js.FS.analyzePath(mount_point).exists) {
                pyodide_js.FS.mkdirTree(mount_point);
            }

try {
                let count = 0;
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];

// 簡易的なフォルダ弾き（File APIではフォルダが0バイトや特定サイズのファイルとして認識される場合があるため）
                    if (!file.type && file.size % 4096 === 0 && file.size <= 4096) {
                        console.warn("Skipped folder or invalid file:", file.name);
                        continue;
                    }

// 階層構造は無視し、ルート直下にファイル名で書き込む
                    const vfs_path = `${mount_point}/${file.name}`;
                    const buffer = await file.arrayBuffer();
                    pyodide_js.FS.writeFile(vfs_path, new Uint8Array(buffer));
                    count++;
                }
                refresh_vfs_explorer_view();
                js_result_area_element.value = `Dropped & Uploaded ${count} files.`;

} catch (e) {
                js_result_area_element.value = `Drop Error: ${e.message}`;

} finally {
                toggle_loading(false); // ローディング表示終了
            }
        }

function setup_drag_and_drop() {
            const drop_zone = document.getElementById("vfs_explorer_container");

drop_zone.addEventListener("dragover", (e) => {
                e.preventDefault();
                drop_zone.classList.add("dragover");
            });

drop_zone.addEventListener("dragleave", (e) => {
                e.preventDefault();
                drop_zone.classList.remove("dragover");
            });

// コメントアウトを解除し、ドロップイベントを有効化
            drop_zone.addEventListener("drop", handle_vfs_drop);
        }

//------------------------------------------------------------------------ ### VFS_File_mover ###
        function handle_vfs_move(src_path, dest_folder_path) {
            if (src_path === dest_folder_path) return; // 自分自身への移動は無視

// ファイル名を取得
            const file_name = src_path.split("/").pop();
            const new_path = `${dest_folder_path}/${file_name}`;

// 移動先が現在の親フォルダと同じなら何もしない
            const current_dir = src_path.substring(0, src_path.lastIndexOf("/"));
            if (current_dir === dest_folder_path) return;

try {
                // 親子関係のチェック（親を子の中に移動しようとしていないか）
                const normalizedSrc = src_path.endsWith("/") ? src_path : src_path + "/";
                if (dest_folder_path.startsWith(normalizedSrc)) {
                    throw new Error("Cannot move a parent folder into its own child.");
                }

// 名前の衝突チェック（上書き確認、またはリネーム）
                if (pyodide_js.FS.analyzePath(new_path).exists) {
                    if (!confirm(`"${file_name}" already exists in destination.\nOverwrite?`)) {
                        return;
                    }
                    // 上書きの場合は先に削除が必要（renameは上書き動作が環境によるため安全策）
                    pyodide_js.FS.unlink(new_path);
                }

// 移動実行
                pyodide_js.FS.rename(src_path, new_path);
                console.log(`Moved: ${src_path} -> ${new_path}`);

// ビューを更新
                refresh_vfs_explorer_view();

} catch (err) {
                console.error("Move Error:", err);
                alert(`Move Failed: ${err.message}`);
            }
        }

//------------------------------------------------------------------------ ### Pyodide_and_Execution_Logic ###
        async function main_ini() { // pyodide初期化
            //document.querySelector("header").style.zIndex = "9998";
            pyodide_js = await loadPyodide();
            py_result_area_element.value =
                `################################################
# ★ Pyodide のロード完了
# → Pyodide のライブラリインポート中です...
# monaco Editor のロード待機
################################################`;

try {
                pyodide_js.FS.mkdirTree(MOUNT_PATH); // mkdir → mkdirTree に変更 (親ディレクトリ "/mnt" が無くても再帰的に作成するため安全)
            } catch (e) {
                if (e.errno !== 20 && e.errno !== 44 && e.code !== "EEXIST") { // 既存パスの場合は無視
                    console.error("mkdirTree failed:", e);
                    // throw e; // 致命的ではない場合が多いのでthrowまではしない、もしくは状況に応じてthrow
                }
            }

await pyodide_js.loadPackage(["micropip"]); // ["numpy", "pandas", "scipy, matplotlib, requests, pyodide-http, scikit-learn, opencv-python"]
            const micropip = pyodide_js.pyimport("micropip");
            //await micropip.install("scikit-learn");
            //await micropip.install("opencv-python");

pyodide_js.globals.set("js_map_global_data", js_map_global_data); // javascriptの変数をpyodideに引き渡し
            pyodide_js.globals.set("js_obj_global_data", js_obj_global_data); // javascriptの変数をpyodideに引き渡し
            pyodide_js.globals.set("js_print", js_print); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_print_clear", js_print_clear); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_add_plot_image", js_add_plot_image); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_clear_plot_area", js_clear_plot_area); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_download_func", js_download_file); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_encrypt_zipper", js_encrypt_zipper); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_post_message", js_post_message); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_register_python_callback", js_register_python_callback); // javascriptの関数をpyodideに引き渡し
            pyodide_js.globals.set("js_get_csv_data", js_get_csv_data); // javascriptの関数をpyodideに引き渡し
            if (dev_flag === true) {
                pyodide_js.globals.set("js_inject_script", js_inject_script); // javascriptの関数をpyodideに引き渡し // JSコード挿入用関数_野心的だが危険な機能 // サンドボックス化でリスクを許容値に
            }

await pyodide_js.runPythonAsync(`
import ast

class AutoSleepInjector(ast.NodeTransformer):
	def __init__(self):
		self.in_async = True # async関数内にいるかどうかのフラグ

# -----------------------------------------------------------------
	# 通常の def (同期関数) に入った場合の処理を追加
	# これがないと、async関数の中に入れ子で作った同期関数内のprintにも
	# awaitがついてしまい、SyntaxErrorになります。
	# -----------------------------------------------------------------
	def visit_FunctionDef(self, node):
		# 現在の状態を保存
		prev_async = self.in_async
		# 同期関数内なのでフラグを下ろす
		self.in_async = False

self.generic_visit(node) # 子ノードを再帰的に処理

# 抜けるときに元の状態に戻す
		self.in_async = prev_async
		return node
	# -----------------------------------------------------------------

def visit_AsyncFunctionDef(self, node):
		# async関数に入ったらフラグを立てる
		prev_async = self.in_async
		self.in_async = True
		self.generic_visit(node) # 子ノードを再帰的に処理
		self.in_async = prev_async # 抜けるときにフラグを戻す
		return node

def visit_Expr(self, node):
		# 式ノード（関数呼び出しなど）をチェック
		self.generic_visit(node)

if not self.in_async:
			return node

# print() 関数の呼び出し判定
		# (ここでの print は組み込み関数の print として扱います)
		if isinstance(node.value, ast.Call) and \
			isinstance(node.value.func, ast.Name) and \
			node.value.func.id == 'print':

# 挿入するノードを作成: await asyncio.sleep(0) を挿入する
			sleep_node = ast.Expr(
				value=ast.Await(
                    value=ast.Call(
                        func=ast.Attribute(
                            value=ast.Name(id='asyncio', ctx=ast.Load()),
                            attr='sleep',
                            ctx=ast.Load()
                        ),
                        args=[ast.Constant(value=0)],
                        keywords=[]
                    )
				)
			)
		
			# 元のノード(print)とスリープノードのリストを返す
			# 実行順序: print(...) -> await asyncio.sleep(0)
			return [node, sleep_node]

return node

def apply_auto_sleep(source_code):
	try:
		tree = ast.parse(source_code)
		transformer = AutoSleepInjector()
		new_tree = transformer.visit(tree)
		ast.fix_missing_locations(new_tree)
		return ast.unparse(new_tree) # 書き換えたコードを文字列に戻す
	except Exception as e:
		return f"# Parse Error: {e}"

# --- 1) Matplotlib show injection function ---
def _inject_matplotlib_show():
	import matplotlib
	import matplotlib.pyplot as plt
	import io, base64, js

def custom_show(*args, **kwargs):
		buf = io.BytesIO()
		plt.savefig(buf, format="png")
		buf.seek(0)
		img_str = base64.b64encode(buf.read()).decode("utf-8")
		js.js_add_plot_image(img_str)
		plt.clf()

plt.show = custom_show

# --- 2) Monkey patch micropip.install ---
import micropip
_real_install = micropip.install

async def _patched_install(pkg):
	res = await _real_install(pkg)
	# matplotlib を検知
	if (isinstance(pkg, str) and pkg == "matplotlib") or ("matplotlib" in pkg):
		try:
			_inject_matplotlib_show()
		except Exception as e:
			print("Inject matplotlib show failed:", e)
	return res

micropip.install = _patched_install
`);

await pyodide_js.runPythonAsync(`
import os
if os.path.exists("${MOUNT_PATH}"):
	os.chdir("${MOUNT_PATH}")
	print(f"Current Working Directory changed to: {os.getcwd()}")
`);

// interrupt_bufferの設定
            // SharedArrayBuffer が使える環境なら使用、なければ通常の ArrayBuffer (ただし通常のArrayBufferだとメインスレッドブロック時に効かない可能性あり)
            if (typeof SharedArrayBuffer !== "undefined") {
                interrupt_buffer = new Uint8Array(new SharedArrayBuffer(1));
            } else {
                interrupt_buffer = new Uint8Array(new ArrayBuffer(1));
            }
            pyodide_js.setInterruptBuffer(interrupt_buffer);

//pyodide_js.globals.get("py_result", py_result); // pyodideの変数(関数も可)をJavaScriptから参照
        };

//------------------------------------------------------------------------ ### RUN
        async function button_RUN_click() {

try {
                if (!editor) return;
                const model = editor.getModel();
                let code = editor.getValue(); // エディタからコードを取得
                const lang_id = model.getLanguageId(); // "python", "html", "javascript" 等

if (lang_id === "html") { // --- HTMLの場合 ---
                    if (dev_flag === true) {
                        // Blobを作成してURL化
                        const blob = new Blob([code], { type: "text/html" });
                        const url = URL.createObjectURL(blob);
                        // プレビュー専用タブを開く (第3引数 true)
                        // ファイル名は "Preivew_[元のファイル名]" とする
                        const preview_name = `Preview_${file_name_val}`;
                        open_tab(preview_name, url, true);
                        js_result_area_element.value = "# HTML Preview Started #";
                    } else {
                        js_result_area_element.value = "JS execution is disabled. Use HTML Preview.";
                        alert("セキュリティのため、HTMLファイルのプレビューは開発モードでのみ許可されています。");
                    }
                    return; // Python実行処理には行かない

} else if (lang_id === "javascript") { // --- JavaScriptの場合 ---
                    if (dev_flag === true) {
                        js_inject_script(code)  // JSコード挿入用関数_野心的だが危険な機能 // サンドボックス化でリスクを許容値に
                    } else {
                        js_result_area_element.value = "JS execution is disabled. Use HTML Preview.";
                        alert("セキュリティのため、JSファイルの直接実行は開発モードでのみ許可されています。");
                    }
                    return;

} else if (lang_id === "python") {  // --- pythonの場合 ---
                    if (stop_watchdog_timer) {// もし強制停止タイマーが待機中なら、新しい実行が始まったのでキャンセルする
                        clearTimeout(stop_watchdog_timer);
                        stop_watchdog_timer = null;
                    }
                    interrupt_buffer[0] = 0;
                    js_result_area_element.value = "# Python_Script_Running... #"; // ステータスを「Running」に更新
                    py_result_area_element.value = ""
                    toggle_loading(true, "Running Script..."); // ローディング表示開始
                    set_sidebar_buttons_state(false);
                    if (interrupt_buffer) interrupt_buffer[0] = 0; // 実行前に割り込みバッファをクリア (0にする)

// 自動sleep注入処理
                    // ユーザーに処理内容を通知（オプション）
                    console.log("Injecting asyncio.sleep(0) after print statements...")
                    js_result_area_element.value = "Injecting asyncio.sleep(0) after print statements...";

// Python側の変換関数を呼び出す
                    const transformer = pyodide_js.globals.get("apply_auto_sleep");
                    const transformed_code = transformer(code);
                    transformer.destroy(); // メモリ解放

// 変換エラーのチェック（構文エラーがある場合は変換に失敗する）
                    if (transformed_code.startsWith("# Parse Error")) {
                        console.warn("Auto-injection failed, running original code. Error:", transformed_code);
                        // 変換失敗時は元のコードを実行（ユーザーに構文エラーを表示させるため）
                    } else {
                        // デバッグ用: 変換後のコードを確認したい場合
                        // console.log(transformed_code);
                        code = transformed_code;
                    }

const stdout_redirect_code = `
import sys
import js
import asyncio

class Web_Stdout:
	def write(self, text): # 通常の def (同期メソッド) として定義
		js.js_print(text) # JS側の同期関数 js_print を呼び出す

def flush(self):
		pass

sys.stdout = Web_Stdout()
sys.stderr = Web_Stdout()
`;
                    // 2. リダイレクト設定を実行
                    await pyodide_js.runPythonAsync(stdout_redirect_code);

// 3. ユーザーコードを非同期で実行
                    // ユーザーコード内の print() が Web_Stdout.write() を呼び出し、
                    // Pyodideがこれを非同期として処理するため、リアルタイム表示が実現します。
                    await pyodide_js.runPythonAsync(code);

js_result_area_element.value = "# Python_Script_END #";

} else {  // --- その他の場合 ---
                    js_result_area_element.value = `Run not supported for: ${lang_id}`;
                    return;
                }

} catch (error) {

const errStr = String(error);
                // KeyboardInterrupt (停止ボタン) かどうか判定
                if (errStr.includes("KeyboardInterrupt")) {
                    js_result_area_element.value = "# Script Interrupted #";
                    const msg = "\n==========\n[!] ユーザーによって処理が中断されました。\n==========";
                    py_result_area_element.value += py_result_area_element.value ? "\n" + msg : msg;
                } else {
                    // 通常のエラー
                    js_result_area_element.value = "# Python_Script_Error #";
                    const error_msg = "====================\n" + "Traceback (most recent call last):\n" + errStr;
                    const separator = py_result_area_element.value ? "\n\n" : "";
                    py_result_area_element.value += separator + error_msg;
                }
                py_result_area_element.scrollTop = py_result_area_element.scrollHeight;

} finally {
                // 4. 実行の成否にかかわらず、標準出力(sys.stdout)を元の状態 (sys.__stdout__) に戻す
                // 次の実行で出力が残らないようにするためのクリーンアップ処理

// AI_agentから実行結果ログを取得してHostへ送信する
                if (agent_run_flag === true) {
                    js_post_message("script_complete", "host", "*", { "log": py_result_area_element.value }, []);
                    agent_run_flag = false;
                } else {
                    js_post_message("script_complete", "host", "*", {}, []);
                }

pyodide_js.runPython("import sys; sys.stdout = sys.__stdout__");
                //if (interrupt_buffer) interrupt_buffer[0] = 0; // バッファを念のためリセット
                toggle_loading(false); // ローディング表示終了
                set_sidebar_buttons_state(true);
                console.log("# IDE_frame_log : script_complete")
            }
        };

//------------------------------------------------------------------------ ### STOP
        async function button_STOP_click() {
            const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

if (interrupt_buffer) {
                // 2 = SIGINT (KeyboardInterrupt) をバッファに書き込む
                for (let i = 0; i < 10; i++) {
                    //console.log("# stop_process_time :", i)
                    interrupt_buffer[0] = 2;
                    await sleep(50);
                }

// ユーザーへのフィードバック
                js_result_area_element.value = "# Stopping... #";
                console.log("Interrupt signal sent.");

// 2. 強制UI復帰のセーフティネット
                // Pyodideが即座に反応しない場合、1秒後に強制的にローディングを消す
                if (stop_watchdog_timer) clearTimeout(stop_watchdog_timer);
                stop_watchdog_timer = setTimeout(() => {
                    const overlay = document.getElementById("loading_overlay");
                    // まだローディング中であれば強制解除
                    if (overlay && overlay.style.display !== "none") {
                        console.warn("Stop watchdog triggered: Forcing UI unlock.");
                        js_result_area_element.value = "# Force Stopped #";
                        const msg = "\n==========\n[!] 停止処理がタイムアウトしたため、UIロックを強制解除しました。\n==========";
                        if (js_result_area_element) {
                            js_result_area_element.value += msg;
                            js_result_area_element.scrollTop = js_result_area_element.scrollHeight;
                        }
                        toggle_loading(false);
                        set_sidebar_buttons_state(true);
                        js_post_message("script_complete", "host", "*", {}, []);
                    }
                    // タイマー終了後はnullに戻す
                    stop_watchdog_timer = null;
                }, 3000);
            }
        }

//------------------------------------------------------------------------ ### Initial_Load ###
        window.onload = async () => {

try {
                set_sidebar_buttons_state(false);
                toggle_loading(true); // ローディング表示開始
                py_result_area_element.value =
                    `################################################
# → Pyodide のロード中です...
# Pyodide のライブラリインポート待機
# monaco Editor のロード待機
################################################`;
                // 1. Pyodideの初期化を待ちます
                await main_ini();
                // 2. Pyodide完了後、Monacoのローダーを動的に読み込み、待機
                py_result_area_element.value =
                    `################################################
# ★ Pyodide のロード完了
# ★ Pyodide のライブラリインポート完了
# → monaco Editor のロード中です
################################################`;

await load_script("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs/loader.min.js");
                // 3. Monacoローダー完了後、Monaco本体の初期化を待ちます
                await initialize_monaco_editor();
                setup_tab_plus_button();
                // 3. すべて完了してからUI（リサイザーなど）を設定します
                setup_resizers();
                setup_footer_resizer();
                //document.querySelector("header").style.zIndex = "9999";
                py_result_area_element.value =
                    `################################################
# ★ 各種ロード完了
# → [▶] ボタンでコードを実行できます
################################################`;
                js_post_message("script_complete", "host", "*", {}, []);
                console.log("# IDE_frame_log : script_complete")
                // --------------- ### Refresh Button Logic ###
                if (refresh_script_button) {
                    refresh_script_button.addEventListener("click", (e) => {
                        e.stopPropagation(); // h3のクリックイベントを止める
                        refresh_script_explorer_view();
                    });
                }

if (refresh_vfs_button) {
                    refresh_vfs_button.addEventListener("click", (e) => {
                        e.stopPropagation();
                        refresh_vfs_explorer_view();
                    });
                }
                // VFS_Upload
                vfs_upload_button.addEventListener("click", () => {
                    input_vfs_folder.value = null; // 連続選択リセット
                    input_vfs_folder.click(); // 非表示input起動
                });
                // script_mount
                script_mount_button.addEventListener("click", () => {
                    input_script_folder.value = null;
                    handle_script_upload_click();
                });
                // script_upload
                script_upload_button.addEventListener("click", () => {
                    input_script_folder.value = null;
                    input_script_folder.click();
                });
                input_script_folder.addEventListener("change", handle_upload_folder_to_script_tree);
                input_vfs_folder.addEventListener("change", handle_upload_folder_to_vfs);
                // スクリプトツリーの初期メッセージ設定
                refresh_script_explorer_view();

setup_editor_drag_and_drop(); // drag_and_drop (エディター用)
                setup_drag_and_drop(); // drag_and_drop (VFS用)の呼び出しを追加
                // VFSツリーの初期スキャン
                refresh_vfs_explorer_view();
                js_result_area_element.value = "All_Ready...";

} catch (error) {
                js_result_area_element.value = `Initialization Error: ${error}`;
                console.error("Initialization failed:", error);

} finally {
                set_sidebar_buttons_state(true);
                toggle_loading(false); // ローディング表示終了
            }
        }

/* #################### ↑↑↑ script_MAIN ↑↑↑ #################### */
    </script>

</body>
</html>