picoride 0.1.0

data/web/funicular/ruby/components/log_panel.rb

@@ -0,0 +1,102 @@
+# ビルドログとプラットフォームセットアップログをまとめたタブ切り替えパネル。
+#
+# 以前は BuildPanel / PlatformPanel という別々のパネルを常時両方表示していたが、
+# 同時に見る場面は少なく画面を圧迫するだけだったので、タブで切り替える1つの
+# パネルに統合した。どちらのタブを表示中かは親(EditorApp)のstate(log_tab)に
+# 持たせてあるので、タブを切り替えてもポーリングによるログ更新自体は
+# バックグラウンドで両方継続する。
+#
+# 他のパネルと同じく表示専用。タブ切り替え/ログ更新は
+# props[:on_tab_change] / props[:on_build_refresh] / props[:on_platform_refresh]
+# 経由で親(EditorApp)に委譲する。
+class LogPanel < Funicular::Component
+  BUILD_STATUS_LABELS = {
+    'idle' => 'ビルド未実行',
+    'running' => 'ビルド中…',
+    'success' => 'ビルド成功',
+    'failed' => 'ビルド失敗'
+  }.freeze
+
+  PLATFORM_STATUS_LABELS = {
+    'idle' => '未実行',
+    'running' => 'セットアップ中…',
+    'success' => 'セットアップ完了',
+    'failed' => 'セットアップ失敗'
+  }.freeze
+
+  def render
+    div(class: 'log-panel') do
+      div(class: 'log-panel-header') do
+        render_tab_button('build', 'R2P2 Build', :handle_select_build_tab)
+        render_tab_button('platform', 'Platform Setup', :handle_select_platform_tab)
+        div(class: 'log-panel-spacer')
+        span(class: 'platform-target') { props[:selected_platform] || '未選択' } unless build_tab?
+        render_refresh_button
+        span(class: "build-status #{status}") { status_label }
+      end
+      tag(:pre, class: 'build-log') { log_text }
+    end
+  end
+
+  def handle_select_build_tab(event)
+    event.preventDefault
+    select_tab('build')
+  end
+
+  def handle_select_platform_tab(event)
+    event.preventDefault
+    select_tab('platform')
+  end
+
+  def handle_refresh(event)
+    event.preventDefault
+    on_refresh = build_tab? ? props[:on_build_refresh] : props[:on_platform_refresh]
+    on_refresh.call if on_refresh
+  end
+
+  private
+
+  def select_tab(tab)
+    on_tab_change = props[:on_tab_change]
+    on_tab_change.call(tab) if on_tab_change
+  end
+
+  def render_tab_button(key, label_text, handler)
+    classes = key == active_tab ? 'log-panel-tab active' : 'log-panel-tab'
+    button(class: classes, onclick: handler) { label_text }
+  end
+
+  def render_refresh_button
+    button(class: 'build-refresh', onclick: :handle_refresh) { 'ログを更新' }
+  end
+
+  def active_tab
+    props[:active_tab] == 'platform' ? 'platform' : 'build'
+  end
+
+  def build_tab?
+    active_tab == 'build'
+  end
+
+  def status
+    build_tab? ? props[:build_status] : props[:platform_status]
+  end
+
+  def status_label
+    if build_tab?
+      BUILD_STATUS_LABELS[props[:build_status]] || props[:build_status].to_s
+    else
+      PLATFORM_STATUS_LABELS[props[:platform_status]] || props[:platform_status].to_s
+    end
+  end
+
+  def log_text
+    if build_tab?
+      log = props[:build_log].to_s
+      props[:build_log_truncated] ? "…(冒頭は省略)\n#{log}" : log
+    else
+      log = props[:platform_log].to_s
+      props[:platform_log_truncated] ? "…(冒頭は省略)\n#{log}" : log
+    end
+  end
+end

data/web/funicular/ruby/components/menu_bar.rb

@@ -0,0 +1,266 @@
+# 最上部のメニュー/グローバルステータスバー。
+#
+# 常設ドロップダウンは「プロジェクト」の切り替え用。プロジェクトが1つも
+# 開かれていない(props[:known_projects]が空)間は、この場所に実質的に
+# 「プロジェクトを開く」ボタンを出す(ドロップダウンの代わりにbuttonを
+# 描画するだけで、同じprops[:on_open_project]を使う)。アプリ起動時に自動で
+# ダイアログを出したりはしない。ユーザーがこのボタン/ファイルメニューから
+# 明示的に開く操作をするまで、プロジェクトは開かれない。
+#
+# 以前は「複数プロジェクトを束ねるワークスペース」という上位概念があり、
+# このドロップダウンはワークスペース選択用、プロジェクトの切り替えは別の
+# ダイアログ(OpenProjectDialog)、という2階層構成だった。しかし
+# 「ワークスペース=プロジェクトだった」というフィードバックにより2階層は
+# 不要と判明し、1階層に統合した。このドロップダウンはそのままプロジェクト
+# 選択用になり、OpenProjectDialog・「新しいプロジェクト」メニュー項目(旧・
+# ワークスペース配下に名前でサブディレクトリを作る機能)は削除した
+# (「新しいプロジェクト」はDirectoryBrowserDialogの「新しいフォルダ」+
+# 「このディレクトリを開く」に統合されている)。
+#
+# ターゲットチップ・VM・USB Consoleは以前ここに常設セレクト/ビルド時ダイアログで
+# 出していたが、「プロジェクトの設定としてプロジェクトに含めたい」という
+# フィードバックを受けてプロジェクトごとの設定(`~/.picoride/project.toml`)に
+# 持たせる方式に変更した。そのため、ここには設定値を編集する「設定」ボタンと、
+# その設定値をそのまま使って実行するだけの「セットアップ」「ビルド開始」
+# ボタンだけが残っている。
+# 左端には「ファイル」メニュー(プロジェクトを開く/mrbgemを追加/新規ファイル/
+# 新しいフォルダ)を置いてある。開閉状態はここでは持たず(理由は
+# editor_app.rbの「子コンポーネントは親の再描画のたびに作り直される」の節参照)、
+# props[:file_menu_open]として親(EditorApp)のstateをそのまま反映するだけにしてある。
+# 他のパネルと同じく表示専用で、実処理(状態管理・API呼び出し)は
+# props[:on_project_select] / props[:on_settings] / props[:on_setup] /
+# props[:on_build] / props[:on_file_menu_toggle] / props[:on_open_project] /
+# props[:on_add_mrbgem] / props[:on_new_file] / props[:on_new_folder]
+# 経由で親(EditorApp)に委譲する。
+#
+# props[:project] は現在開いているプロジェクトの絶対パス(未設定ならnil)。
+# props[:known_projects] はこのセッションで一度でも開いたプロジェクトの
+# 絶対パスの配列(ドロップダウンの選択肢)。
+class MenuBar < Funicular::Component
+  STATUS_LABELS = {
+    'idle' => 'ビルド未実行',
+    'running' => 'ビルド中…',
+    'success' => 'ビルド成功',
+    'failed' => 'ビルド失敗'
+  }.freeze
+
+  def render
+    div(class: 'menu-bar') do
+      span(class: 'menu-bar-title') { 'PicoRIDE' }
+      render_file_menu
+      render_project_select
+      div(class: 'menu-bar-spacer')
+      render_settings_button
+      render_setup_button
+      render_build_button
+      render_status_pill
+      render_install_button
+    end
+  end
+
+  def handle_file_menu_toggle(event)
+    event.preventDefault
+    on_file_menu_toggle = props[:on_file_menu_toggle]
+    on_file_menu_toggle.call if on_file_menu_toggle
+  end
+
+  def handle_open_project(event)
+    event.preventDefault
+    on_open_project = props[:on_open_project]
+    on_open_project.call if on_open_project
+  end
+
+  def handle_add_mrbgem(event)
+    event.preventDefault
+    on_add_mrbgem = props[:on_add_mrbgem]
+    on_add_mrbgem.call if on_add_mrbgem
+  end
+
+  def handle_new_file(event)
+    event.preventDefault
+    on_new_file = props[:on_new_file]
+    on_new_file.call if on_new_file
+  end
+
+  def handle_new_folder(event)
+    event.preventDefault
+    on_new_folder = props[:on_new_folder]
+    on_new_folder.call if on_new_folder
+  end
+
+  # <select> の変更イベント。選ばれたプロジェクトの絶対パスをそのまま渡す。
+  def handle_project_change(event)
+    node = refs[:project_select]
+    return unless node
+
+    value = node[:value].to_s
+    return if value.empty?
+
+    on_project_select = props[:on_project_select]
+    on_project_select.call(value) if on_project_select
+  end
+
+  def handle_settings(event)
+    event.preventDefault
+    on_settings = props[:on_settings]
+    on_settings.call if on_settings
+  end
+
+  def handle_setup(event)
+    event.preventDefault
+    on_setup = props[:on_setup]
+    on_setup.call if on_setup
+  end
+
+  def handle_build(event)
+    event.preventDefault
+    on_build = props[:on_build]
+    on_build.call if on_build
+  end
+
+  private
+
+  def render_file_menu
+    div(class: 'file-menu') do
+      button(class: 'file-menu-toggle', onclick: :handle_file_menu_toggle) { 'ファイル' }
+      render_file_menu_dropdown if props[:file_menu_open]
+    end
+  end
+
+  def render_file_menu_dropdown
+    div(class: 'file-menu-dropdown') do
+      button(class: 'file-menu-item', onclick: :handle_open_project) { 'プロジェクトを開く…' }
+      render_add_mrbgem_menu_item
+      render_new_file_menu_item
+      render_new_folder_menu_item
+    end
+  end
+
+  # mrbgem追加・新規ファイル作成はプロジェクトを開いていないと行き先が無いので、
+  # 未選択時は押せないようにする(disabled: false を渡す書き方はこのDSLでは
+  # 効かないため、分岐で二通りの要素を書き分ける。toolbar.rbのrender_save_button参照)。
+  def render_add_mrbgem_menu_item
+    if props[:project].to_s.empty?
+      button(class: 'file-menu-item', disabled: true) { 'mrbgemを追加…' }
+    else
+      button(class: 'file-menu-item', onclick: :handle_add_mrbgem) { 'mrbgemを追加…' }
+    end
+  end
+
+  def render_new_file_menu_item
+    if props[:project].to_s.empty?
+      button(class: 'file-menu-item', disabled: true) { '新規ファイル…' }
+    else
+      button(class: 'file-menu-item', onclick: :handle_new_file) { '新規ファイル…' }
+    end
+  end
+
+  def render_new_folder_menu_item
+    if props[:project].to_s.empty?
+      button(class: 'file-menu-item', disabled: true) { '新しいフォルダ…' }
+    else
+      button(class: 'file-menu-item', onclick: :handle_new_folder) { '新しいフォルダ…' }
+    end
+  end
+
+  # プロジェクトを1つも開いたことが無ければ(known_projectsが空)、<select>の
+  # 代わりに「プロジェクトを開く」ボタンを出す(props[:on_open_project]、
+  # ファイルメニューの項目と同じコールバック)。1つ以上開いていれば、それらを
+  # 選択肢に持つ<select>にする(選ぶとon_project_select経由で即座に切り替わる)。
+  def render_project_select
+    known = props[:known_projects] || []
+
+    if known.empty?
+      button(class: 'menu-project-open', onclick: :handle_open_project) { 'プロジェクトを開く…' }
+    else
+      tag(:select, class: 'menu-project-select', ref: :project_select, onchange: :handle_project_change,
+                   title: props[:project].to_s) { render_project_options(known) }
+    end
+  end
+
+  def render_project_options(known)
+    known.each do |path|
+      label = project_label(path)
+      if path == props[:project]
+        tag(:option, value: path, selected: true) { label }
+      else
+        tag(:option, value: path) { label }
+      end
+    end
+  end
+
+  # プロジェクト名は既定でディレクトリ名(パスの最後のセグメント)にする。
+  # PicoRuby.wasm上ではFile.basenameのようなFile系メソッドの対応が不確かなため
+  # (editor_app.rbのextensionヘルパーと同じ理由)、素の文字列分割で求める。
+  def project_label(path)
+    segments = path.to_s.split('/')
+    name = segments.last
+    (name.nil? || name.empty?) ? path.to_s : name
+  end
+
+  # 設定はプロジェクト単位(project_store.rb参照)なので、プロジェクト未設定の
+  # 間は保存先が無く押せない。
+  def render_settings_button
+    if props[:project].to_s.empty?
+      button(class: 'menu-settings', disabled: true) { '設定' }
+    else
+      button(class: 'menu-settings', onclick: :handle_settings) { '設定' }
+    end
+  end
+
+  # ターゲットが未設定なら押せない(設定ダイアログで選んでもらう)。
+  def render_setup_button
+    platform = value_of(props[:project_config], 'platform')
+
+    if props[:platform_building]
+      button(class: 'menu-setup', disabled: true) { 'セットアップ中…' }
+    elsif platform.to_s.empty?
+      button(class: 'menu-setup', disabled: true) { 'ターゲット未設定' }
+    else
+      button(class: 'menu-setup', onclick: :handle_setup) { "#{platform}をセットアップ" }
+    end
+  end
+
+  def render_build_button
+    if props[:building]
+      button(class: 'menu-build', disabled: true) { 'ビルド中…' }
+    else
+      button(class: 'menu-build', onclick: :handle_build) { 'ビルド開始' }
+    end
+  end
+
+  def render_status_pill
+    span(class: "menu-bar-status #{props[:build_status]}") { status_label }
+  end
+
+  # ESP32: 実際の書き込み処理はブラウザのWeb Serial API経由でESP Web Tools
+  # (esp-web-install-button カスタム要素)が行う。旧 install_panel.rb と同じ使い方。
+  # Raspberry Pi Pico: ブラウザから直接書き込む仕組みは使わず、ビルド成果物の
+  # .uf2をダウンロードさせる(BOOTSELを押しながら接続して現れるドライブへ
+  # ユーザーがコピーする)。<a download>をボタン風に見せている。
+  def render_install_button
+    if props[:project].to_s.empty?
+      button(class: 'menu-install', disabled: true) { 'デバイスにインストール' }
+    elsif ProjectSettingsDialog.pico?(value_of(props[:project_config], 'platform'))
+      tag(:a, class: 'menu-install menu-download', href: '/api/firmware/uf2', download: '',
+              title: 'BOOTSELボタンを押しながらPicoを接続し、現れたドライブへUF2ファイルをコピーしてください') do
+        'UF2をダウンロード'
+      end
+    else
+      tag(:'esp-web-install-button', manifest: '/api/firmware/manifest.json') do
+        button(slot: 'activate', class: 'menu-install') { 'デバイスにインストール' }
+        span(slot: 'unsupported', class: 'menu-bar-hint') { '未対応ブラウザ' }
+        span(slot: 'not-allowed', class: 'menu-bar-hint') { 'HTTPS必須' }
+      end
+    end
+  end
+
+  def status_label
+    STATUS_LABELS[props[:build_status]] || props[:build_status].to_s
+  end
+
+  def value_of(data, key)
+    return nil unless data
+    data[key] || data[key.to_sym]
+  end
+end

data/web/funicular/ruby/components/project_settings_dialog.rb

@@ -0,0 +1,203 @@
+# プロジェクトごとの設定(ターゲットチップ・VM・USB Console)を編集するダイアログ。
+#
+# 以前はターゲットをメニューバー常設のセレクトで、VM/USB Consoleをビルド開始の
+# たびに出るダイアログで選ばせていたが、「プロジェクトの設定としてプロジェクトに
+# 含めたい」というフィードバックを受けて永続化する方式に変更した。永続化先は
+# プロジェクトごとの隠しファイル(`.config.yml`)→(一時期あった「複数プロジェクトを
+# 束ねるワークスペース」という上位概念の下で)`~/.picoride/workspace.toml`、と
+# 経緯を経て、現在は`~/.picoride/project.toml`(`project_store.rb`)に落ち着いている。
+# このダイアログはその値を編集して保存するためだけのもので、保存後は
+# 「プラットフォームをセットアップ」「ビルド開始」の各ボタンがこの設定値を
+# そのまま使う(都度選び直す必要はない)。
+#
+# 他のパネルと同じく表示専用。値の変更/保存/キャンセルは
+# props[:on_platform_change] / props[:on_vm_change] / props[:on_usb_console_change] /
+# props[:on_save] / props[:on_cancel] 経由で親(EditorApp)に委譲する。
+#
+# ターゲットはESP32系とRaspberry Pi Pico系の2ファミリーに分かれていて、
+# どちらを選んだかでサーバー側のビルド用Dockerイメージ・ビルド手順が切り替わる
+# (lib/picoride/server.rb の PLATFORM_FAMILIES / BUILDER_IMAGES)。
+# Picoでは「USB Console」はESP32専用の設定なので出さず、VMはボードによって
+# 選べるものが違う(RP2040のpico/pico_wはFemtoRubyのみ)。
+class ProjectSettingsDialog < Funicular::Component
+  # [optgroupのラベル, [[値, 表示名], ...]] の並び。値はサーバー側の
+  # PLATFORM_FAMILIES と一致させる。
+  PLATFORM_GROUPS = [
+    ['ESP32', [
+      ['esp32', 'esp32'],
+      ['esp32c3', 'esp32c3'],
+      ['esp32c6', 'esp32c6'],
+      ['esp32h2', 'esp32h2'],
+      ['esp32p4', 'esp32p4'],
+      ['esp32s3', 'esp32s3']
+    ]],
+    ['Raspberry Pi Pico', [
+      ['pico', 'Pico (RP2040)'],
+      ['pico_w', 'Pico W (RP2040)'],
+      ['pico2', 'Pico 2 (RP2350)'],
+      ['pico2_w', 'Pico 2 W (RP2350)']
+    ]]
+  ].freeze
+
+  # 空文字は「デフォルトVM」を意味する(ESP32: idf.py buildにVM未指定、
+  # Pico: FemtoRuby)。
+  VM_OPTIONS = [
+    ['', 'デフォルト'],
+    ['femtoruby', 'FemtoRuby (mruby/c)'],
+    ['picoruby', 'PicoRuby (mruby)']
+  ].freeze
+
+  # Picoの各ボードで選べるVM(サーバー側のPICO_BOARD_VMSと一致させる)。
+  PICO_BOARD_VMS = {
+    'pico' => ['femtoruby'],
+    'pico_w' => ['femtoruby'],
+    'pico2' => ['femtoruby', 'picoruby'],
+    'pico2_w' => ['femtoruby', 'picoruby']
+  }.freeze
+
+  PICO_NOTE = 'ビルドするとUF2ファイルができます。BOOTSELボタンを押しながらPicoをUSB接続し、' +
+              '現れたドライブ(RPI-RP2 / RP2350)へコピーすると書き込めます。' +
+              'app/ はターミナルタブの「app/ をアップロード」で転送してください。'
+
+  def self.pico?(platform)
+    PICO_BOARD_VMS.key?(platform.to_s)
+  end
+
+  # そのターゲットで選べるVMかどうか(空文字=デフォルトは常に可)。
+  # ターゲットを切り替えたときに、選べなくなったVMをデフォルトに戻すのに使う
+  # (EditorAppのon_platform_change)。
+  def self.vm_allowed?(platform, vm)
+    return true if vm.to_s.empty?
+    return true unless pico?(platform)
+
+    PICO_BOARD_VMS[platform.to_s].include?(vm.to_s)
+  end
+
+  def render
+    div(class: 'dialog-overlay') do
+      div(class: 'dialog settings-dialog') do
+        h2 { "プロジェクト設定(#{props[:project_path]})" }
+        div(class: 'build-options') do
+          render_platform_select
+          render_vm_select
+          if ProjectSettingsDialog.pico?(props[:platform])
+            render_pico_note
+          else
+            render_usb_console_checkbox
+          end
+        end
+        div(class: 'dialog-actions') do
+          button(class: 'dialog-cancel', onclick: :handle_cancel) { 'キャンセル' }
+          button(class: 'dialog-confirm', onclick: :handle_save) { '保存' }
+        end
+      end
+    end
+  end
+
+  def handle_cancel(event)
+    event.preventDefault
+    on_cancel = props[:on_cancel]
+    on_cancel.call if on_cancel
+  end
+
+  def handle_save(event)
+    event.preventDefault
+    on_save = props[:on_save]
+    on_save.call if on_save
+  end
+
+  def handle_platform_change(event)
+    node = refs[:platform_select]
+    return unless node
+    value = node[:value].to_s
+    on_platform_change = props[:on_platform_change]
+    on_platform_change.call(value.empty? ? nil : value) if on_platform_change
+  end
+
+  def handle_vm_change(event)
+    node = refs[:vm_select]
+    return unless node
+    on_vm_change = props[:on_vm_change]
+    on_vm_change.call(node[:value].to_s) if on_vm_change
+  end
+
+  def handle_usb_console_change(event)
+    node = refs[:usb_console_checkbox]
+    return unless node
+    on_usb_console_change = props[:on_usb_console_change]
+    on_usb_console_change.call(truthy?(node[:checked])) if on_usb_console_change
+  end
+
+  private
+
+  def render_platform_select
+    label(class: 'build-option') do
+      span { 'ターゲット' }
+      tag(:select, ref: :platform_select, onchange: :handle_platform_change) { render_platform_options }
+    end
+  end
+
+  def render_platform_options
+    if props[:platform].to_s.empty?
+      tag(:option, value: '', selected: true) { '未選択' }
+    else
+      tag(:option, value: '') { '未選択' }
+    end
+
+    PLATFORM_GROUPS.each do |group_label, options|
+      tag(:optgroup, label: group_label) do
+        options.each do |value, label_text|
+          if value == props[:platform]
+            tag(:option, value: value, selected: true) { label_text }
+          else
+            tag(:option, value: value) { label_text }
+          end
+        end
+      end
+    end
+  end
+
+  def render_vm_select
+    label(class: 'build-option') do
+      span { 'VM' }
+      tag(:select, ref: :vm_select, onchange: :handle_vm_change) { render_vm_options }
+    end
+  end
+
+  def render_vm_options
+    VM_OPTIONS.each do |value, label_text|
+      next unless ProjectSettingsDialog.vm_allowed?(props[:platform], value)
+
+      if value == props[:vm]
+        tag(:option, value: value, selected: true) { label_text }
+      else
+        tag(:option, value: value) { label_text }
+      end
+    end
+  end
+
+  def render_usb_console_checkbox
+    label(class: 'build-option') do
+      render_usb_console_input
+      span { 'USB Console(外部UART変換チップなしのボード向け)' }
+    end
+  end
+
+  def render_pico_note
+    div(class: 'build-option-note') do
+      span { PICO_NOTE }
+    end
+  end
+
+  def render_usb_console_input
+    if props[:usb_console]
+      tag(:input, type: 'checkbox', ref: :usb_console_checkbox, checked: true, onchange: :handle_usb_console_change)
+    else
+      tag(:input, type: 'checkbox', ref: :usb_console_checkbox, onchange: :handle_usb_console_change)
+    end
+  end
+
+  def truthy?(js_value)
+    js_value.to_s == 'true'
+  end
+end

data/web/funicular/ruby/components/prompt_dialog.rb

@@ -0,0 +1,76 @@
+# 1行のテキスト入力を伴う汎用的な確認ダイアログ。
+#
+# 「新しいプロジェクト」「mrbgemを追加」「新規ファイル」はどれも
+# 名前(パス)を1つ入力させて確定/キャンセルさせるだけなので、用途ごとに
+# 別コンポーネントを作らずタイトル/ラベル/プレースホルダ/確定ボタンの
+# ラベルをpropsで差し替えて使い回す。
+#
+# 入力欄はref経由でDOM値を直接読む非制御コンポーネントにしてある。
+# ビルドログのポーリング等、ダイアログを開いたまま親(EditorApp)が
+# 再描画される場面があるため、value を props 経由で毎回書き戻す制御方式にすると
+# その再描画のたびに入力中の文字が消えてしまう(他のフォーム系コンポーネントと
+# 同じ理由。project_settings_dialog.rb / editor_app.rb 参照)。
+#
+# props:
+#   title:         ダイアログの見出し
+#   label:         入力欄のラベル
+#   placeholder:   入力欄のプレースホルダ
+#   confirm_label: 確定ボタンのラベル(省略時 'OK')
+#   error:         エラーメッセージ(あれば表示)
+#   on_confirm:    入力値(String)を渡して呼ばれるlambda
+#   on_cancel:     キャンセル時に呼ばれるlambda
+class PromptDialog < Funicular::Component
+  def render
+    div(class: 'dialog-overlay') do
+      div(class: 'dialog prompt-dialog') do
+        h2 { props[:title].to_s }
+        label(class: 'prompt-field') do
+          span { props[:label].to_s }
+          tag(:input, type: 'text', ref: :value_input, placeholder: props[:placeholder].to_s, onkeydown: :handle_keydown)
+        end
+        render_error
+        div(class: 'dialog-actions') do
+          button(class: 'dialog-cancel', onclick: :handle_cancel) { 'キャンセル' }
+          button(class: 'dialog-confirm', onclick: :handle_confirm) { confirm_label }
+        end
+      end
+    end
+  end
+
+  def handle_cancel(event)
+    event.preventDefault
+    on_cancel = props[:on_cancel]
+    on_cancel.call if on_cancel
+  end
+
+  def handle_confirm(event)
+    event.preventDefault
+    confirm
+  end
+
+  # Enterキーでも確定できるようにする(<form>で囲んでいないのでブラウザ標準の
+  # submit挙動とは衝突しない)。
+  def handle_keydown(event)
+    confirm if event[:key].to_s == 'Enter'
+  end
+
+  private
+
+  def confirm
+    node = refs[:value_input]
+    return unless node
+
+    on_confirm = props[:on_confirm]
+    on_confirm.call(node[:value].to_s) if on_confirm
+  end
+
+  def confirm_label
+    label = props[:confirm_label].to_s
+    label.empty? ? 'OK' : label
+  end
+
+  def render_error
+    return if props[:error].to_s.empty?
+    div(class: 'prompt-error') { props[:error].to_s }
+  end
+end

data/web/funicular/ruby/components/toolbar.rb

@@ -0,0 +1,30 @@
+# エディタ上部のツールバー(ファイル名 / 保存ボタン / ステータス表示)。
+#
+# こちらも表示専用。保存の実処理は親が持ち、props[:on_save] 経由で呼び出す。
+class Toolbar < Funicular::Component
+  def render
+    div(class: 'toolbar') do
+      span(class: 'current-file') { props[:current_path] || 'ファイルを選択してください' }
+      render_save_button
+      span(class: "status #{props[:status_kind]}") { props[:status].to_s }
+    end
+  end
+
+  def handle_save(event)
+    event.preventDefault
+    on_save = props[:on_save]
+    on_save.call if on_save
+  end
+
+  private
+
+  # disabled は「属性を付けない/付ける」で切り替える。
+  # false を渡す書き方に依存しないよう、分岐で二通りの要素を書き分けている。
+  def render_save_button
+    if props[:dirty]
+      button(class: 'save', onclick: :handle_save) { '保存 (Ctrl+S)' }
+    else
+      button(class: 'save', disabled: true) { '保存 (Ctrl+S)' }
+    end
+  end
+end